forked from 0x2620/oxjs
new timeline implementation
This commit is contained in:
rolux
parent
0642c10951
commit
fd1fc212f2
8 changed files with 690 additions and 54 deletions
|
|
@ -16,6 +16,7 @@ Ox.VideoPlayer <f> Generic Video Player
|
|||
duration <n|-1> Duration (sec)
|
||||
enableKeyboard <b|false> If true, enable keyboard controls
|
||||
externalControls <b|false> If true, controls are outside the video
|
||||
find <s|''> Query string
|
||||
focus <s|'click'> focus on 'click', 'load' or 'mouseover'
|
||||
fps <n|25> Frames per second
|
||||
fullscreen <b|false> If true, video is in fullscreen
|
||||
|
|
@ -68,6 +69,7 @@ Ox.VideoPlayer = function(options, self) {
|
|||
duration: 86399,
|
||||
enableKeyboard: false,
|
||||
externalControls: false,
|
||||
find: '',
|
||||
focus: 'click',
|
||||
fps: 25,
|
||||
fullscreen: false,
|
||||
|
|
@ -143,7 +145,7 @@ Ox.VideoPlayer = function(options, self) {
|
|||
setPosition(self.options.position + self.secondsPerFrame, true);
|
||||
},
|
||||
key_shift_f: function() {
|
||||
toggleFullscreen();
|
||||
toggleFullscreen(true);
|
||||
},
|
||||
key_space: function() {
|
||||
togglePaused(true);
|
||||
|
|
@ -154,8 +156,14 @@ Ox.VideoPlayer = function(options, self) {
|
|||
if (self.options.enableKeyboard) {
|
||||
if (self.options.focus == 'mouseenter') {
|
||||
that.bind({
|
||||
mouseenter: that.gainFocus,
|
||||
mouseleave: that.loseFocus
|
||||
mouseenter: function() {
|
||||
if (!self.inputHasFocus) {
|
||||
that.gainFocus();
|
||||
}
|
||||
},
|
||||
mouseleave: function() {
|
||||
that.loseFocus();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
that.bind({
|
||||
|
|
@ -164,10 +172,21 @@ Ox.VideoPlayer = function(options, self) {
|
|||
}
|
||||
}
|
||||
|
||||
if ((!self.options.externalControls && self.options.controls.length) || self.options.showIcon || self.options.title) {
|
||||
if (
|
||||
(!self.options.externalControls && self.options.controls.length) ||
|
||||
self.options.showIcon || self.options.title
|
||||
) {
|
||||
that.bind({
|
||||
mouseenter: showInterface,
|
||||
mouseleave: hideInterface
|
||||
mouseenter: function() {
|
||||
showInterface();
|
||||
self.mouseHasLeft = false;
|
||||
Ox.print('MOUSE HAS ENTERED')
|
||||
},
|
||||
mouseleave: function() {
|
||||
hideInterface();
|
||||
self.mouseHasLeft = true;
|
||||
Ox.print('MOUSE HAS LEFT')
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -300,7 +319,7 @@ Ox.VideoPlayer = function(options, self) {
|
|||
}
|
||||
|
||||
if (self.options.title) {
|
||||
self.$titlebar = $('<div>')
|
||||
self.$title = $('<div>')
|
||||
.addClass('OxInterface')
|
||||
.css({
|
||||
position: 'absolute',
|
||||
|
|
@ -388,7 +407,9 @@ Ox.VideoPlayer = function(options, self) {
|
|||
type: 'image'
|
||||
})
|
||||
.css({float: 'left'})
|
||||
.bindEvent('click', toggleMuted)
|
||||
.bindEvent('click', function() {
|
||||
toggleMuted();
|
||||
})
|
||||
.appendTo(self.$controls);
|
||||
|
||||
} else if (control == 'volume') {
|
||||
|
|
@ -420,7 +441,9 @@ Ox.VideoPlayer = function(options, self) {
|
|||
type: 'image'
|
||||
})
|
||||
.css({float: 'left'})
|
||||
.bindEvent('click', toggleFullscreen)
|
||||
.bindEvent('click', function() {
|
||||
toggleFullscreen();
|
||||
})
|
||||
.appendTo(self.$controls);
|
||||
|
||||
} else if (control == 'size') {
|
||||
|
|
@ -576,12 +599,6 @@ Ox.VideoPlayer = function(options, self) {
|
|||
MozBoxShadow: '0 0 0',
|
||||
WebkitBoxShadow: '0 0 0'
|
||||
})
|
||||
.bind({
|
||||
blur: function() {
|
||||
},
|
||||
focus: function() {
|
||||
}
|
||||
})
|
||||
.bindEvent({
|
||||
focus: function() {
|
||||
self.inputHasFocus = true;
|
||||
|
|
@ -618,6 +635,11 @@ Ox.VideoPlayer = function(options, self) {
|
|||
|
||||
setSizes();
|
||||
|
||||
function clearInterfaceTimeout() {
|
||||
clearTimeout(self.interfaceTimeout);
|
||||
self.interfaceTimeout = 0;
|
||||
}
|
||||
|
||||
function ended() {
|
||||
if (!self.options.paused) {
|
||||
togglePaused(true);
|
||||
|
|
@ -643,7 +665,7 @@ Ox.VideoPlayer = function(options, self) {
|
|||
|
||||
function getCSS(element) {
|
||||
var css;
|
||||
if (element == 'controls' || element == 'titlebar') {
|
||||
if (element == 'controls' || element == 'title') {
|
||||
css = {
|
||||
width: self.width + 'px'
|
||||
};
|
||||
|
|
@ -655,11 +677,11 @@ Ox.VideoPlayer = function(options, self) {
|
|||
height: self.iconSize + 'px'
|
||||
};
|
||||
} else if (element == 'logo') {
|
||||
var logoHeight = Math.round(self.height / 10);
|
||||
self.logoMargin = Math.round(self.height / 20);
|
||||
var logoHeight = Math.round(self.height / 10),
|
||||
logoMargin = Math.round(self.height / 20);
|
||||
css = {
|
||||
left: self.logoMargin + 'px',
|
||||
top: self.logoMargin + 'px',
|
||||
left: logoMargin + 'px',
|
||||
top: (logoMargin + !!self.titleIsVisible * 16) + 'px',
|
||||
height: logoHeight + 'px',
|
||||
};
|
||||
} else if (element == 'player') {
|
||||
|
|
@ -727,7 +749,7 @@ Ox.VideoPlayer = function(options, self) {
|
|||
};
|
||||
} else if (element == 'subtitle') {
|
||||
css = {
|
||||
bottom: parseInt(self.height / 16) + 'px',
|
||||
bottom: (parseInt(self.height / 16) + !!self.controlsAreVisible * 16) + 'px',
|
||||
width: self.width + 'px',
|
||||
fontSize: parseInt(self.height / 20) + 'px',
|
||||
WebkitTextStroke: (self.height / 1000) + 'px rgb(0, 0, 0)'
|
||||
|
|
@ -811,7 +833,7 @@ Ox.VideoPlayer = function(options, self) {
|
|||
v['in'] <= self.options.position &&
|
||||
v.out > self.options.position
|
||||
) {
|
||||
subtitle = v.text;
|
||||
subtitle = Ox.highlight(v.text, self.options.find, 'OxHighlight');
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
|
@ -819,13 +841,16 @@ Ox.VideoPlayer = function(options, self) {
|
|||
}
|
||||
|
||||
function hideInterface() {
|
||||
if (!self.inputHasFocus) {
|
||||
self.controlsTimeout = setTimeout(function() {
|
||||
Ox.print('hideInterface');
|
||||
self.interfaceTimeout = setTimeout(function() {
|
||||
if (!self.exitFullscreen && !self.inputHasFocus && !self.mouseIsInControls) {
|
||||
self.titleIsVisible = false;
|
||||
self.controlsAreVisible = false;
|
||||
that.find('.OxInterface').animate({
|
||||
opacity: 0
|
||||
}, 250);
|
||||
self.$logo && self.$logo.animate({
|
||||
top: self.logoMargin + 'px',
|
||||
top: getCSS('logo').top,
|
||||
opacity: 0.25
|
||||
}, 250, function() {
|
||||
self.options.logoLink && self.$logo.unbind('click');
|
||||
|
|
@ -833,10 +858,10 @@ Ox.VideoPlayer = function(options, self) {
|
|||
self.$logo.unbind('mouseenter').unbind('mouseleave');
|
||||
});
|
||||
self.$subtitle && self.$subtitle.animate({
|
||||
bottom: parseInt(self.options.height / 16) + 'px',
|
||||
});
|
||||
}, 1000);
|
||||
}
|
||||
bottom: getCSS('subtitle').bottom,
|
||||
}, 250);
|
||||
}
|
||||
}, self.options.fullscreen ? 2500 : 1000);
|
||||
}
|
||||
|
||||
function hideLoadingIcon() {
|
||||
|
|
@ -932,6 +957,9 @@ Ox.VideoPlayer = function(options, self) {
|
|||
} else {
|
||||
setPosition(self.options.position);
|
||||
}
|
||||
that.triggerEvent('position', {
|
||||
position: self.options.position
|
||||
});
|
||||
}
|
||||
|
||||
function playInToOut() {
|
||||
|
|
@ -1020,7 +1048,7 @@ Ox.VideoPlayer = function(options, self) {
|
|||
self.$loadingIcon.animate(getCSS('loadingIcon'), ms);
|
||||
self.$playIcon && self.$playIcon.animate(getCSS('playIcon'), ms);
|
||||
self.$subtitle && self.$subtitle.animate(getCSS('subtitle'), ms);
|
||||
self.$titlebar && self.$titlebar.animate(getCSS('titlebar'), ms);
|
||||
self.$title && self.$title.animate(getCSS('title'), ms);
|
||||
self.$controls && self.$controls.animate(getCSS('controls'), ms);
|
||||
if (self.$timeline) {
|
||||
self.$timeline.animate(getCSS('timeline'), ms);
|
||||
|
|
@ -1045,12 +1073,19 @@ Ox.VideoPlayer = function(options, self) {
|
|||
}
|
||||
|
||||
function showInterface() {
|
||||
clearTimeout(self.controlsTimeout);
|
||||
Ox.print('showInterface');
|
||||
clearTimeout(self.interfaceTimeout);
|
||||
if (self.$title) {
|
||||
self.titleIsVisible = true;
|
||||
}
|
||||
if (self.$controls) {
|
||||
self.controlsAreVisible = true;
|
||||
}
|
||||
that.find('.OxInterface').animate({
|
||||
opacity: 1
|
||||
}, 250);
|
||||
self.$logo && self.$logo.animate({
|
||||
top: self.logoMargin + 16 + 'px',
|
||||
top: getCSS('logo').top,
|
||||
opacity: 0.5
|
||||
}, 250, function() {
|
||||
self.options.logoLink && self.$logo
|
||||
|
|
@ -1067,9 +1102,9 @@ Ox.VideoPlayer = function(options, self) {
|
|||
mouseleave: self.$logoTooltip.hide
|
||||
});
|
||||
});
|
||||
self.$subtitle.animate({
|
||||
bottom: self.barHeight + parseInt(self.options.height / 16) + 'px',
|
||||
});
|
||||
self.$subtitle && self.$subtitle.animate({
|
||||
bottom: getCSS('subtitle').bottom,
|
||||
}, 250);
|
||||
}
|
||||
|
||||
function showLoadingIcon() {
|
||||
|
|
@ -1088,12 +1123,17 @@ Ox.VideoPlayer = function(options, self) {
|
|||
self.video.play();
|
||||
self.wasPlaying = false;
|
||||
}
|
||||
if (self.focus == 'mouseenter' && !self.mouseHasLeft) {
|
||||
that.gainFocus();
|
||||
}
|
||||
self.mouseHasLeft && hideInterface();
|
||||
}
|
||||
|
||||
function toggleFullscreen() {
|
||||
function toggleFullscreen(toggleButton) {
|
||||
var parentOffset, wasPlaying;
|
||||
self.options.fullscreen = !self.options.fullscreen;
|
||||
if (!self.options.paused) {
|
||||
// video won't keep playing accross detach/append
|
||||
self.video.pause();
|
||||
wasPlaying = true;
|
||||
}
|
||||
|
|
@ -1114,10 +1154,36 @@ Ox.VideoPlayer = function(options, self) {
|
|||
.appendTo(Ox.UI.$body);
|
||||
setSizes(function() {
|
||||
wasPlaying && self.video.play();
|
||||
that.bind({
|
||||
mousemove: function() {
|
||||
if (!self.mouseIsInControls) {
|
||||
showInterface();
|
||||
hideInterface();
|
||||
}
|
||||
}
|
||||
});
|
||||
self.$controls && self.$controls.bind({
|
||||
mouseenter: function() {
|
||||
self.mouseIsInControls = true;
|
||||
},
|
||||
mouseleave: function() {
|
||||
self.mouseIsInControls = false;
|
||||
}
|
||||
});
|
||||
showInterface();
|
||||
hideInterface();
|
||||
});
|
||||
} else {
|
||||
// flag makes the animation end on absolute position
|
||||
self.exitFullscreen = true;
|
||||
that.unbind('mousemove');
|
||||
self.$controls && self.$controls
|
||||
.trigger('mouseleave')
|
||||
.unbind('mouseenter')
|
||||
.unbind('mouseleave');
|
||||
Ox.print('???', self.mouseIsInControls);
|
||||
setSizes(function() {
|
||||
self.exitFullscreen = false;
|
||||
that.detach()
|
||||
.css({
|
||||
left: self.relativeOffset.left + 'px',
|
||||
|
|
@ -1125,17 +1191,24 @@ Ox.VideoPlayer = function(options, self) {
|
|||
})
|
||||
.appendTo(self.$parent);
|
||||
wasPlaying && self.video.play();
|
||||
self.exitFullscreen = false;
|
||||
self.options.enableKeyboard && that.gainFocus();
|
||||
//showInterface();
|
||||
});
|
||||
}
|
||||
if (toggleButton && self.$fullscreenButton) {
|
||||
self.$fullscreenButton.toggleTitle();
|
||||
}
|
||||
}
|
||||
|
||||
function toggleMuted() {
|
||||
function toggleMuted(toggleButton) {
|
||||
self.options.muted = !self.options.muted;
|
||||
self.video.muted = self.options.muted;
|
||||
if (toggleButton && self.$muteButton) {
|
||||
self.$muteButton.toggleTitle();
|
||||
}
|
||||
}
|
||||
|
||||
function togglePaused(togglePlayButton) {
|
||||
function togglePaused(toggleButton) {
|
||||
self.options.paused = !self.options.paused;
|
||||
self.$timeline && self.$positionMarkerRing.css({
|
||||
borderColor: 'rgba(255, 255, 255, ' + (self.options.paused ? 0.5 : 1) + ')'
|
||||
|
|
@ -1161,7 +1234,7 @@ Ox.VideoPlayer = function(options, self) {
|
|||
}, 250, togglePlayIcon);
|
||||
}
|
||||
}
|
||||
if (togglePlayButton && self.$playButton) {
|
||||
if (toggleButton && self.$playButton) {
|
||||
self.$playButton.toggleTitle();
|
||||
}
|
||||
}
|
||||
|
|
@ -1174,10 +1247,13 @@ Ox.VideoPlayer = function(options, self) {
|
|||
});
|
||||
}
|
||||
|
||||
function toggleScale() {
|
||||
function toggleScale(toggleButton) {
|
||||
self.options.scaleToFill = !self.options.scaleToFill;
|
||||
self.$video.animate(getCSS('video'), 250);
|
||||
self.$poster && self.$poster.animate(getCSS('poster'), 250);
|
||||
if (toggleButton && self.$scaleButton) {
|
||||
self.$scaleButton.toggleTitle();
|
||||
}
|
||||
}
|
||||
|
||||
function toggleSize() {
|
||||
|
|
@ -1189,18 +1265,17 @@ Ox.VideoPlayer = function(options, self) {
|
|||
|
||||
self.setOption = function(key, value) {
|
||||
if (key == 'fullscreen') {
|
||||
toggleFullscreen();
|
||||
toggleFullscreen(true);
|
||||
} else if (key == 'height' || key == 'width') {
|
||||
setSizes();
|
||||
} else if (key == 'muted') {
|
||||
toggleMuted();
|
||||
self.$muteButton && self.$muteButton.toggleTitle();
|
||||
toggleMuted(true);
|
||||
} else if (key == 'paused') {
|
||||
togglePaused(true);
|
||||
} else if (key == 'position') {
|
||||
setPosition(value);
|
||||
setPosition(value, true);
|
||||
} else if (key == 'scaleToFill') {
|
||||
self.$video.css(getVideoCSS());
|
||||
toggleScale(true);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue