sanj/oxjs
1
0
Fork 0
forked from 0x2620/oxjs
Code Pull requests Activity

new timeline implementation

Browse source
This commit is contained in:
rolux 2011-05-15 18:18:58 +02:00
commit fd1fc212f2
8 changed files with 690 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

82
demos/video/js/video.js
View file

@ -2,8 +2,31 @@ 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 = 'http://next.0xdb.org/' + id + '/timeline.16.png',
url = 'http://next.0xdb.org/' + id + '/96p.webm',
videoSize = getVideoSize(),
@ -13,9 +36,11 @@ Ox.load('UI', {
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,
@ -51,6 +76,7 @@ Ox.load('UI', {
Ox.VideoPlayer({
controls: ['play', 'playInToOut', 'mute', 'size', 'space', 'position'],
externalControls: true,
find: 'brick',
height: 192,
'in': 3128.725,
out: 3130.725,
@ -66,8 +92,10 @@ Ox.load('UI', {
top: '16px'
})
.bindEvent({
size: function() {
position: function(data) {
$blockTimeline.options({
position: data.position
});
}
})
];
@ -90,7 +118,7 @@ Ox.load('UI', {
resize: [100, 400]
},
{
element: Ox.Element()
element: $foo = Ox.Element()
}
],
orientation: 'vertical'
@ -127,7 +155,7 @@ Ox.load('UI', {
resize: [100, 400]
},
{
element: Ox.Element()
element: $bar = Ox.Element()
}
],
orientation: 'vertical'
@ -135,6 +163,7 @@ Ox.load('UI', {
.bindEvent({
resize: function(foo, size) {
$videos[2].options({width: size - 32});
$blockTimeline.options({width: size - 40});
}
}),
size: 392,
@ -160,4 +189,49 @@ Ox.load('UI', {
});
}
Ox.get('srt/0393109.srt', function(srt) {
var subtitles = Ox.parseSRT(srt);
$foo.append(
Ox.SmallVideoTimelineImages({
duration: 6336.08,
getTimelineURL: function(i) {
return 'png/timeline.16.' + i + '.png';
},
'in': 1800,
out: 1900,
results: [
{'in': 3600, out: 3700}
],
subtitles: subtitles,
type: 'editor',
width: 392
})
);
$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,
subtitles: subtitles,
width: 353
})
.css({
position: 'absolute',
left: '16px',
top: '16px'
})
.bindEvent('position', function(data) {
$videos[2].options({
position: data.position
});
})
);
})
});