forked from 0x2620/oxjs
add video editor demo
This commit is contained in:
rolux
parent
8fe529df81
commit
f8ec3fccf4
8 changed files with 5947 additions and 162 deletions
|
|
@ -65,6 +65,7 @@ Ox.load('UI', {
|
|||
left: '16px',
|
||||
top: '16px'
|
||||
}),
|
||||
/*
|
||||
Ox.VideoPlayer({
|
||||
enableKeyboard: true,
|
||||
height: videoSize.height,
|
||||
|
|
@ -83,8 +84,26 @@ Ox.load('UI', {
|
|||
left: '16px',
|
||||
top: '16px'
|
||||
}),
|
||||
*/
|
||||
Ox.VideoPlayer({
|
||||
controlsBottom: ['goto', 'set', 'space', 'position'],
|
||||
externalControls: true,
|
||||
height: videoSize.height,
|
||||
position: 3128.72,
|
||||
showMarkers: true,
|
||||
showMilliseconds: 2,
|
||||
subtitles: 'srt/' + id + '.srt',
|
||||
type: 'in',
|
||||
video: function(position) {
|
||||
return 'png/poster.png'
|
||||
},
|
||||
width: videoSize.width
|
||||
})
|
||||
.css({
|
||||
left: '16px',
|
||||
top: '16px'
|
||||
}),
|
||||
Ox.VideoPlayer({
|
||||
controlsTop: ['fullscreen', 'title', 'find'],
|
||||
controlsBottom: ['play', 'playInToOut', 'volume', 'size', 'space', 'position'],
|
||||
enableFind: true,
|
||||
enableFullscreen: true,
|
||||
|
|
@ -92,9 +111,6 @@ Ox.load('UI', {
|
|||
externalControls: true,
|
||||
height: 192,
|
||||
'in': 3128.72,
|
||||
largeTimeline: function(i) {
|
||||
return 'http://next.0xdb.org/' + id + '/timelines/timeline.64.' + i + '.png';
|
||||
},
|
||||
out: 3130.72,
|
||||
paused: true,
|
||||
position: 3168.04,
|
||||
|
|
@ -102,7 +118,6 @@ Ox.load('UI', {
|
|||
showMarkers: true,
|
||||
showMilliseconds: 2,
|
||||
subtitles: 'srt/' + id + '.srt',
|
||||
timeline: timeline,
|
||||
title: 'Brick - Rian Johnson - 2005',
|
||||
video: url + '?' + + Ox.random(1000000),
|
||||
width: 360
|
||||
|
|
@ -172,7 +187,7 @@ Ox.load('UI', {
|
|||
$videos[2].options({height: size - 48});
|
||||
}
|
||||
}),
|
||||
size: 320,
|
||||
size: 240,
|
||||
resizable: true,
|
||||
resize: [100, 400]
|
||||
},
|
||||
|
|
@ -253,14 +268,14 @@ Ox.load('UI', {
|
|||
$blockTimeline = Ox.BlockVideoTimeline({
|
||||
duration: 6336.08,
|
||||
find: 'brick',
|
||||
getImageURL: function(i) {
|
||||
return 'png/timeline.16.' + i + '.png';
|
||||
},
|
||||
'in': 3128.725,
|
||||
out: 3130.725,
|
||||
results: results,
|
||||
showMilliseconds: 2,
|
||||
subtitles: subtitles,
|
||||
timeline: function(i) {
|
||||
return 'png/timeline.16.' + i + '.png';
|
||||
},
|
||||
width: 376
|
||||
})
|
||||
.css({
|
||||
|
|
|
|||
10
demos/videoeditor/index.html
Normal file
10
demos/videoeditor/index.html
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>OxJS Video Editor Demo</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<script type="text/javascript" src="../../build/Ox.js"></script>
|
||||
<script type="text/javascript" src="js/videoeditor.js"></script>
|
||||
</head>
|
||||
<body></body>
|
||||
</html>
|
||||
88
demos/videoeditor/js/videoeditor.js
Normal file
88
demos/videoeditor/js/videoeditor.js
Normal file
|
|
@ -0,0 +1,88 @@
|
|||
Ox.load('UI', {
|
||||
debug: true,
|
||||
theme: 'modern'
|
||||
}, function() {
|
||||
|
||||
Ox.get('srt/0393109.srt', function(srt) {
|
||||
|
||||
var subtitles = Ox.parseSRT(srt);
|
||||
|
||||
var $videoEditor = Ox.VideoEditor({
|
||||
annotationsSize: 256,
|
||||
duration: 6336.08,
|
||||
find: 'dode',
|
||||
getLargeTimelineImageURL: function(i) {
|
||||
return 'http://next.0xdb.org/0393109/timelines/timeline.64.' + i + '.png';
|
||||
},
|
||||
getSmallTimelineImageURL: function(i) {
|
||||
return 'http://next.0xdb.org/0393109/timelines/timeline.16.' + i + '.png';
|
||||
},
|
||||
getVideoImageURL: function(i) {
|
||||
return 'png/0393109.png';
|
||||
},
|
||||
height: window.innerHeight - 129,
|
||||
'in': 3128.76,
|
||||
out: 3130.72,
|
||||
position: 3168.04,
|
||||
posterFrame: 3168.04,
|
||||
subtitles: subtitles,
|
||||
video: {
|
||||
96: 'http://next.0xdb.org/0393109/96p.webm',
|
||||
240: 'http://next.0xdb.org/0393109/96p.webm?240p',
|
||||
480: 'http://next.0xdb.org/0393109/96p.webm?480p'
|
||||
},
|
||||
videoHeight: 96,
|
||||
videoWidth: 180,
|
||||
width: window.innerWidth - 257
|
||||
});
|
||||
|
||||
Ox.SplitPanel({
|
||||
elements: [
|
||||
{
|
||||
collapsible: true,
|
||||
element: Ox.Element(),
|
||||
resizable: true,
|
||||
resize: [128, 256, 384],
|
||||
size: 256
|
||||
},
|
||||
{
|
||||
element: Ox.SplitPanel({
|
||||
elements: [
|
||||
{
|
||||
collapsible: true,
|
||||
element: Ox.Element(),
|
||||
resizable: true,
|
||||
resize: [64, 128, 192],
|
||||
size: 128
|
||||
},
|
||||
{
|
||||
element: $videoEditor
|
||||
}
|
||||
],
|
||||
orientation: 'vertical'
|
||||
})
|
||||
.bindEvent({
|
||||
resize: function(foo, size) {
|
||||
$videoEditor.options({
|
||||
width: size
|
||||
});
|
||||
}
|
||||
})
|
||||
}
|
||||
],
|
||||
orientation: 'horizontal'
|
||||
})
|
||||
.appendTo(Ox.UI.$body);
|
||||
|
||||
$videoEditor.$element.bindEvent({
|
||||
resize: function(foo, size) {
|
||||
Ox.print('HHHHHHHHH', foo, size)
|
||||
$videoEditor.options({
|
||||
height: size
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
BIN
demos/videoeditor/png/0393109.png
Normal file
BIN
demos/videoeditor/png/0393109.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
5560
demos/videoeditor/srt/0393109.srt
Normal file
5560
demos/videoeditor/srt/0393109.srt
Normal file
File diff suppressed because it is too large
Load diff
Loading…
Add table
Add a link
Reference in a new issue