0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

VideoPlayer: use new video icon, avoid showing first frame of video if position is set, fix showIcon/showIconOnLoad, remove non existing options from documentation

Browse source
This commit is contained in:
j 2014-02-04 09:32:53 +00:00
parent 403e38a57f
commit 2e86007187
1 changed files with 31 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
source/Ox.UI/js/Video/VideoPlayer.js
View file

@ -39,9 +39,6 @@ Ox.VideoPlayer <f> Generic Video Player
height <n|144> Height in px (excluding external controls) height <n|144> Height in px (excluding external controls)
in <n> In point (sec) in <n> In point (sec)
invertHighlight <b|false> If true, invert selection highlight on timeline invertHighlight <b|false> If true, invert selection highlight on timeline
keepIconVisible <b|false> If true, play icon stays visible after mouseleave
keepLargeTimelineVisible <b|false> If true, large timeline stays visible after mouseleave
keepLogoVisible <b|false> If true, logo stays visible after mouseleave
logo <s|''> Logo image URL logo <s|''> Logo image URL
logoLink <s|''> Logo link URL logoLink <s|''> Logo link URL
logoTitle <s|''> Text for Logo tooltip // fixme: shouldn't this be logoTooltip then?s logoTitle <s|''> Text for Logo tooltip // fixme: shouldn't this be logoTooltip then?s
@ -139,9 +136,6 @@ Ox.VideoPlayer = function(options, self) {
fullscreen: false, fullscreen: false,
height: 144, height: 144,
'in': 0, 'in': 0,
keepIconVisible: false,
keepLargeTimelineVisible: false,
keepLogoVisible: false,
logo: '', logo: '',
logoLink: '', logoLink: '',
logoTitle: '', logoTitle: '',
@ -363,8 +357,7 @@ Ox.VideoPlayer = function(options, self) {
if ( if (
(!self.options.externalControls && (!self.options.externalControls &&
(self.options.controlsTop.length || self.options.controlsBottom.length)) || (self.options.controlsTop.length || self.options.controlsBottom.length))
self.options.showIcon
) { ) {
that.on({ that.on({
mouseenter: function() { mouseenter: function() {
@ -433,6 +426,8 @@ Ox.VideoPlayer = function(options, self) {
.appendTo(self.$videoContainer); .appendTo(self.$videoContainer);
self.$video.$element.css({position: 'absolute'}); self.$video.$element.css({position: 'absolute'});
// avoid showing first frame
self.$video.hide();
} else { } else {
@ -541,7 +536,7 @@ Ox.VideoPlayer = function(options, self) {
.attr({ .attr({
src: Ox.UI.getImageURL('symbol' + ( src: Ox.UI.getImageURL('symbol' + (
self.options.paused ? 'Play' : 'Pause' self.options.paused ? 'Play' : 'Pause'
), 'video') ), 'videoIcon')
}) })
.appendTo(self.$videoContainer); .appendTo(self.$videoContainer);
if (self.options.showIcon) { if (self.options.showIcon) {
@ -560,7 +555,7 @@ Ox.VideoPlayer = function(options, self) {
.addClass('OxCensoredIcon OxVideo') .addClass('OxCensoredIcon OxVideo')
.attr({ .attr({
src: Ox.UI.getImageURL( src: Ox.UI.getImageURL(
'symbol' + self.options.censoredIcon, 'video' 'symbol' + self.options.censoredIcon, 'videoIcon'
) )
}) })
.hide() .hide()
@ -1772,6 +1767,15 @@ Ox.VideoPlayer = function(options, self) {
}); });
} }
function hidePoster() {
if (self.posterIsVisible) {
self.$poster.animate({
opacity: 0
}, 250);
self.posterIsVisible = false;
}
}
function isEqual(a, b) { function isEqual(a, b) {
return Math.abs(a - b) < 0.001; return Math.abs(a - b) < 0.001;
} }
@ -1846,12 +1850,12 @@ Ox.VideoPlayer = function(options, self) {
hideLoadingIcon(); hideLoadingIcon();
if (self.options.showIcon || self.options.showIconOnLoad) { if (self.options.showIcon || self.options.showIconOnLoad) {
//!self.options.keepIconVisible && self.$playIcon.addClass('OxInterface'); self.$playIcon.animate({
if (self.options.showIconOnLoad) { opacity: 1
self.$playIcon.animate({ }, 250);
opacity: 1 }
}, 250); if (self.options.showControlsOnLoad) {
} showControls();
} }
!hadDuration && self.$timeline && self.$timeline.replaceWith( !hadDuration && self.$timeline && self.$timeline.replaceWith(
self.$timeline = getTimeline() self.$timeline = getTimeline()
@ -2079,7 +2083,9 @@ Ox.VideoPlayer = function(options, self) {
self.seekTimeout = 0; self.seekTimeout = 0;
Ox.Log('Video', 'hide loading icon') Ox.Log('Video', 'hide loading icon')
hideLoadingIcon(); hideLoadingIcon();
self.$video.show();
self.$playIcon && self.$playIcon.show(); self.$playIcon && self.$playIcon.show();
hidePoster();
} }
function seeking() { function seeking() {
@ -2144,12 +2150,6 @@ Ox.VideoPlayer = function(options, self) {
}, 250); }, 250);
self.iconIsVisible = false; self.iconIsVisible = false;
} }
if (self.posterIsVisible) {
self.$poster.animate({
opacity: 0
}, 250);
self.posterIsVisible = false;
}
self.$timeline /*&& from != 'timeline'*/ && self.$timeline.options({ self.$timeline /*&& from != 'timeline'*/ && self.$timeline.options({
position: self.options.position position: self.options.position
}); });
@ -2530,21 +2530,26 @@ Ox.VideoPlayer = function(options, self) {
clearInterval(self.playInterval); clearInterval(self.playInterval);
if (self.options.showIcon) { if (self.options.showIcon) {
togglePlayIcon(); togglePlayIcon();
self.options.showIcon && self.$playIcon.animate({ self.$playIcon.animate({
opacity: 1 opacity: 1
}, 250); }, 250);
} }
self.playInToOut = false; self.playInToOut = false;
} else { } else {
hidePoster();
if (self.options.playInToOut && self.options.position > self.options.out - self.secondsPerFrame) { if (self.options.playInToOut && self.options.position > self.options.out - self.secondsPerFrame) {
setPosition(self.options['in']); setPosition(self.options['in']);
} }
self.$video.play(); self.$video.play();
self.playInterval = setInterval(playing, self.millisecondsPerFrame); self.playInterval = setInterval(playing, self.millisecondsPerFrame);
if (self.options.showIcon) { if (self.options.showIcon) {
self.options.showIcon && self.$playIcon.animate({ self.$playIcon.animate({
opacity: 0 opacity: 0
}, 250, togglePlayIcon); }, 250, togglePlayIcon);
} else if (self.options.showIconOnLoad) {
self.$playIcon.animate({
opacity: 0
}, 250);
} }
self.options.showMarkers && hideMarkers(); self.options.showMarkers && hideMarkers();
} }
@ -2563,7 +2568,7 @@ Ox.VideoPlayer = function(options, self) {
self.$playIcon.attr({ self.$playIcon.attr({
src: Ox.UI.getImageURL( src: Ox.UI.getImageURL(
'symbol' + (self.options.paused ? 'Play' : 'Pause' 'symbol' + (self.options.paused ? 'Play' : 'Pause'
), 'video') ), 'videoIcon')
}); });
} }