oxjs/demos/video/js/video.js

164 lines
5.8 KiB
JavaScript
Raw Normal View History

Ox.load('UI', {
debug: true,
theme: 'modern'
}, function() {
2011-05-14 19:32:49 +00:00
var id = '0393109',
poster = 'http://next.0xdb.org/' + id + '/poster.jpg',
timeline = 'http://next.0xdb.org/' + id + '/timeline.16.png',
url = 'http://next.0xdb.org/' + id + '/96p.webm',
videoSize = getVideoSize(),
$videos = [
Ox.VideoPlayer({
2011-05-15 07:26:00 +00:00
controls: ['play', 'mute', 'fullscreen', 'scale', 'timeline', 'position'],
2011-05-14 19:32:49 +00:00
enableKeyboard: 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: timeline,
title: '<b>Brick</b> - Rian Johnson - 2005',
video: url + '?' + + Ox.random(1000000),
width: 360
})
.css({
2011-05-15 07:26:00 +00:00
left: '16px',
top: '16px'
}),
2011-05-14 19:32:49 +00:00
Ox.VideoPlayer({
2011-05-15 07:26:00 +00:00
enableKeyboard: true,
2011-05-14 19:32:49 +00:00
height: 192,
'in': 3128.725,
//keepIconVisible: true,
out: 3130.725,
paused: true,
playInToOut: true,
//preload: 'none',
showIcon: true,
timeline: timeline,
video: url + '?' + + Ox.random(1000000),
width: 360
})
.css({
2011-05-15 07:26:00 +00:00
left: '16px',
top: '16px'
2011-05-14 19:32:49 +00:00
}),
Ox.VideoPlayer({
controls: ['play', 'playInToOut', 'mute', 'size', 'space', 'position'],
externalControls: true,
height: videoSize.height,
'in': 3128.725,
out: 3130.725,
paused: true,
showMilliseconds: 2,
subtitles: 'srt/' + id + '.srt',
timeline: timeline,
video: url + '?' + + Ox.random(1000000),
width: videoSize.width
})
.css({
2011-05-15 07:26:00 +00:00
left: '16px',
top: '16px'
})
.bindEvent({
size: function() {
}
2011-05-14 19:32:49 +00:00
})
];
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: Ox.Element()
}
],
orientation: 'vertical'
})
.bindEvent({
resize: function(foo, size) {
$videos[0].options({width: size - 32});
}
}),
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: Ox.Element()
}
],
orientation: 'vertical'
})
.bindEvent({
resize: function(foo, size) {
$videos[2].options({width: size - 32});
}
}),
size: 392,
resizable: true,
resize: [200, 600]
}
],
orientation: 'horizontal'
}).appendTo(Ox.UI.$body);
2011-05-14 19:32:49 +00:00
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
});
}
});