oxjs/demos/videotimelineplayer/js/demo.js
2012-03-14 10:35:46 +00:00

77 lines
2.3 KiB
JavaScript

Ox.load('UI', function() {
Ox.Theme('modern');
var $innerPanel = Ox.SplitPanel({
elements: [
{
element: Ox.Element(),
resizable: true,
resize: [64, 128, 192],
size: 64
},
{
element: Ox.Element()
}
],
orientation: 'vertical'
}),
$outerPanel = Ox.SplitPanel({
elements: [
{
element: Ox.Element(),
resizable: true,
resize: [128, 256, 384],
size: 128
},
{
element: $innerPanel
}
],
orientation: 'horizontal'
}).appendTo(Ox.$body);
Ox.get('srt/0097514.srt', function(srt) {
var $videoTimelinePlayer = Ox.VideoTimelinePlayer({
duration: 3029.96,
getFrameURL: function(position) {
return 'http://0xdb.org/0097514/64p' + position + '.jpg'
},
getImageURL: function(i) {
return 'http://0xdb.org/0097514/timeline64p' + i + '.png'
},
height: window.innerHeight - 65,
paused: true,
position: 1000,
subtitles: Ox.parseSRT(srt),
timelineURL: 'http://0xdb.org/0097514/timeline16p.png',
videoRatio: 1.291667,
videoURL: 'http://0xdb.org/0097514/96p.webm',
width: window.innerWidth - 129
})
.bindEvent({
resizeend: function(data) {
Ox.print('RESIZE', data.size)
$videoTimelinePlayer.options({
height: data.size
});
}
});
$innerPanel
.replaceElement(1, $videoTimelinePlayer)
.bindEvent({
resize: function(data) {
Ox.print('RESIZE', data.size)
$videoTimelinePlayer.options({
width: data.size
});
}
});
$videoTimelinePlayer.gainFocus();
});
});