267 lines
9.3 KiB
JavaScript
267 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({
|
|
controlsBottom: ['play', 'volume', 'scale', 'timeline', 'position'],
|
|
controlsTop: ['fullscreen', 'title', 'find'],
|
|
enableFind: true,
|
|
enableFullscreen: true,
|
|
enableKeyboard: true,
|
|
enableVolume: true,
|
|
focus: 'mouseenter',
|
|
height: 192,
|
|
logoLink: 'http://next.0xdb.org/' + id,
|
|
logoTitle: 'Watch on 0xdb',
|
|
logo: 'png/logo.png',
|
|
paused: true,
|
|
poster: poster,
|
|
showIconOnLoad: true,
|
|
showProgress: false,
|
|
subtitles: 'srt/' + id + '.srt',
|
|
timeline: function(i) {
|
|
return 'png/timeline.16.' + i + '.png';
|
|
},
|
|
title: 'Brick - 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({
|
|
controlsBottom: ['play', 'playInToOut', 'mute', 'size', 'space', 'position'],
|
|
externalControls: true,
|
|
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
|
|
});
|
|
})
|
|
);
|
|
})
|
|
|
|
|
|
});
|