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

add video timeline player and demo

Browse source
This commit is contained in:
rlx 2012-03-14 10:35:46 +00:00
commit 8521eb36ba
5 changed files with 1347 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

31
source/Ox.UI/js/Video/Ox.BlockVideoTimeline.js
View file

@ -40,10 +40,11 @@ Ox.BlockVideoTimeline = function(options, self) {
self.$interfaces = [];
self.$lines = [];
self.$tooltip = Ox.Tooltip({
animate: false
}).css({
textAlign: 'center'
});
animate: false
})
.css({
textAlign: 'center'
});
self.height = 16;
self.lines = getLines();
self.margin = 8;
@ -93,7 +94,7 @@ Ox.BlockVideoTimeline = function(options, self) {
self.$lines[i] = $('<div>')
.css({
position: 'absolute',
left: (self.margin / 2) + 'px',
left: self.margin / 2 + 'px',
top: i * (self.height + self.margin) + 'px',
width: self.options.width + 'px',
height: '24px',
@ -103,7 +104,7 @@ Ox.BlockVideoTimeline = function(options, self) {
self.$images[i] = self.$image.clone()
.css({
position: 'absolute',
marginLeft: (-i * self.options.width) + 'px'
marginLeft: -i * self.options.width + 'px'
})
.appendTo(self.$lines[i]);
self.$interfaces[i] = $('<div>')
@ -113,7 +114,7 @@ Ox.BlockVideoTimeline = function(options, self) {
top: '2px',
width: Math.round(self.options.duration) + 'px',
height: '20px',
marginLeft: (-i * self.options.width) + 'px',
marginLeft: -i * self.options.width + 'px',
//background: 'rgba(255, 0, 0, 0.1)',
})
.appendTo(self.$lines[i]);
@ -141,7 +142,8 @@ Ox.BlockVideoTimeline = function(options, self) {
function getPosition(e) {
//FIXME: this might still be broken in opera according to http://acko.net/blog/mouse-handling-and-absolute-positions-in-javascript
return (e.offsetX ? e.offsetX : e.clientX - $(e.target).offset().left);
return e.offsetX ? e.offsetX
: e.clientX - $(e.target).offset().left;
}
function getSubtitle(position) {
@ -188,12 +190,13 @@ Ox.BlockVideoTimeline = function(options, self) {
position = getPosition(e);
subtitle = getSubtitle(position);
self.$tooltip.options({
title: subtitle ?
'<span class=\'OxBright\'>' +
Ox.highlight(subtitle.text, self.options.find, 'OxHighlight').replace(/\n/g, '<br/>') +
'</span><br/>' +
Ox.formatDuration(subtitle['in'], 3) + ' - ' + Ox.formatDuration(subtitle['out'], 3) :
Ox.formatDuration(position)
title: subtitle
? '<span class=\'OxBright\'>' +
Ox.highlight(subtitle.text, self.options.find, 'OxHighlight').replace(/\n/g, '<br/>') +
'</span><br/>' +
Ox.formatDuration(subtitle['in'], 3) + ' - '
+ Ox.formatDuration(subtitle['out'], 3)
: Ox.formatDuration(position)
})
.show(e.clientX, e.clientY);
} else {