oxjs/demos/video/js/video.js

268 lines
9.3 KiB
JavaScript

Ox.load('UI', {
debug: true,
theme: 'modern'
}, function() {
var $foo, $bar;
var id = '0393109',
poster = 'png/poster.png',
results = [
{'in': 190.335, out: 192.353},
{'in': 1185.215, out: 1188.115},
{'in': 1784.525, out: 1785.915},
{'in': 1786.015, out: 1787.835},
{'in': 3087.365, out: 3090.275},
{'in': 3704.915, out: 3706.795},
{'in': 3706.895, out: 3709.615},
{'in': 4061.655, out: 4063.95},
{'in': 4531.775, out: 4533.415},
{'in': 4946.095, out: 4948.875},
{'in': 5292.885, out: 5294.665},
{'in': 5381.965, out: 5383.338},
{'in': 5385.415, out: 5389.58},
{'in': 5434.93, out: 5436.93},
{'in': 5437.405, out: 5439.405},
{'in': 5749.535, out: 5751.915},
{'in': 5780.235, out: 5782.435},
{'in': 5881.365, out: 5886.635}
],
timeline = 'png/timeline.16.png',
url = 'http://next.0xdb.org/' + id + '/96p.webm',
videoSize = getVideoSize(),
$videos = [
Ox.VideoPlayer({
controls: ['play', 'mute', 'fullscreen', 'scale', 'timeline', 'position'],
enableFind: true,
enableFullscreen: true,
enableKeyboard: true,
focus: 'mouseenter',
height: 192,
'in': 3128.725,
logoLink: 'http://next.0xdb.org/' + id,
logoTitle: 'Watch on 0xdb',
logo: 'png/logo.png',
out: 3130.725,
paused: true,
poster: poster,
showIconOnLoad: true,
showProgress: false,
subtitles: 'srt/' + id + '.srt',
timeline: function(i) {
return 'png/timeline.16.' + i + '.png';
},
title: '<b>Brick</b> - Rian Johnson - 2005',
video: url + '?' + + Ox.random(1000000),
width: 360
})
.css({
left: '16px',
top: '16px'
}),
Ox.VideoPlayer({
enableKeyboard: true,
height: videoSize.height,
'in': 3128.725,
//keepIconVisible: true,
out: 3130.725,
paused: true,
playInToOut: true,
//preload: 'none',
showIcon: true,
timeline: timeline,
video: url + '?' + + Ox.random(1000000),
width: videoSize.width
})
.css({
left: '16px',
top: '16px'
}),
Ox.VideoPlayer({
controls: ['play', 'playInToOut', 'mute', 'size', 'space', 'position'],
externalControls: true,
find: 'brick',
height: 192,
'in': 3128.725,
out: 3130.725,
paused: true,
showMilliseconds: 2,
subtitles: 'srt/' + id + '.srt',
timeline: timeline,
video: url + '?' + + Ox.random(1000000),
width: 360
})
.css({
left: '16px',
top: '16px'
})
.bindEvent({
position: function(data) {
$blockTimeline.options({
position: data.position
});
}
})
];
window.$videos = $videos
Ox.SplitPanel({
elements: [
{
element: Ox.SplitPanel({
elements: [
{
element: Ox.Element()
.append($videos[0])
.bindEvent({
resize: function(foo, size) {
$videos[0].options({height: size - 32});
}
}),
size: 224,
resizable: true,
resize: [100, 400]
},
{
element: $foo = Ox.Element()
}
],
orientation: 'vertical'
})
.bindEvent({
resize: function(foo, size) {
$videos[0].options({width: size - 32});
$smallTimeline.options({width: size - 16});
$playerTimeline.options({width: size - 16});
}
}),
size: 392,
resizable: true,
resize: [200, 600]
},
{
element: Ox.Element()
.append($videos[1])
.bindEvent({
resize: resizeVideo
})
},
{
element: Ox.SplitPanel({
elements: [
{
element: Ox.Element()
.append($videos[2])
.bindEvent({
resize: function(foo, size) {
$videos[2].options({height: size - 48});
}
}),
size: 240,
resizable: true,
resize: [100, 400]
},
{
element: $bar = Ox.Element()
}
],
orientation: 'vertical'
})
.bindEvent({
resize: function(foo, size) {
$videos[2].options({width: size - 32});
$blockTimeline.options({width: size - 16});
}
}),
size: 392,
resizable: true,
resize: [200, 600]
}
],
orientation: 'horizontal'
}).appendTo(Ox.UI.$body);
function getVideoSize() {
var size = {},
widths = $videos ? $videos[0].options('width') + $videos[2].options('width') : 720
size.width = window.innerWidth - widths - 98;
size.height = Math.round(size.width / 180 * 96);
return size;
}
function resizeVideo() {
var size = getVideoSize();
$videos[1].options({
width: size.width,
height: size.height
});
}
Ox.get('srt/0393109.srt', function(srt) {
var subtitles = Ox.parseSRT(srt);
$foo.append(
$smallTimeline = Ox.SmallVideoTimeline({
duration: 6336.08,
find: 'brick',
getTimelineURL: function(i) {
return 'png/timeline.16.' + i + '.png';
},
'in': 3128.725,
out: 3130.725,
results: results,
subtitles: subtitles,
type: 'editor',
width: 376
})
.css({
position: 'absolute',
left: '4px',
top: '4px'
})
);
$foo.append(
$playerTimeline = Ox.SmallVideoTimeline({
duration: 6336.08,
find: 'brick',
getTimelineURL: function(i) {
return 'png/timeline.16.' + i + '.png';
},
'in': 3128.725,
out: 3130.725,
results: results,
subtitles: subtitles,
type: 'player',
width: 376
})
.css({
position: 'absolute',
left: '4px',
top: '32px'
})
);
$bar.append(
$blockTimeline = Ox.BlockVideoTimeline({
duration: 6336.08,
find: 'brick',
getTimelineURL: function(i) {
return 'png/timeline.16.' + i + '.png';
},
'in': 3128.725,
out: 3130.725,
results: results,
showMilliseconds: 2,
subtitles: subtitles,
width: 376
})
.css({
position: 'absolute',
left: '4px',
top: '4px'
})
.bindEvent('position', function(data) {
$videos[2].options({
position: data.position
});
})
);
})
});