VideoPlayer: use new video icon, avoid showing first frame of video if position is set, fix showIcon/showIconOnLoad, remove non existing options from documentation
This commit is contained in:
j
parent
403e38a57f
commit
2e86007187
1 changed files with 31 additions and 26 deletions
|
|
@ -39,9 +39,6 @@ Ox.VideoPlayer <f> Generic Video Player
|
|||
height <n|144> Height in px (excluding external controls)
|
||||
in <n> In point (sec)
|
||||
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
|
||||
logoLink <s|''> Logo link URL
|
||||
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,
|
||||
height: 144,
|
||||
'in': 0,
|
||||
keepIconVisible: false,
|
||||
keepLargeTimelineVisible: false,
|
||||
keepLogoVisible: false,
|
||||
logo: '',
|
||||
logoLink: '',
|
||||
logoTitle: '',
|
||||
|
|
@ -363,8 +357,7 @@ Ox.VideoPlayer = function(options, self) {
|
|||
|
||||
if (
|
||||
(!self.options.externalControls &&
|
||||
(self.options.controlsTop.length || self.options.controlsBottom.length)) ||
|
||||
self.options.showIcon
|
||||
(self.options.controlsTop.length || self.options.controlsBottom.length))
|
||||
) {
|
||||
that.on({
|
||||
mouseenter: function() {
|
||||
|
|
@ -433,6 +426,8 @@ Ox.VideoPlayer = function(options, self) {
|
|||
.appendTo(self.$videoContainer);
|
||||
|
||||
self.$video.$element.css({position: 'absolute'});
|
||||
// avoid showing first frame
|
||||
self.$video.hide();
|
||||
|
||||
} else {
|
||||
|
||||
|
|
@ -541,7 +536,7 @@ Ox.VideoPlayer = function(options, self) {
|
|||
.attr({
|
||||
src: Ox.UI.getImageURL('symbol' + (
|
||||
self.options.paused ? 'Play' : 'Pause'
|
||||
), 'video')
|
||||
), 'videoIcon')
|
||||
})
|
||||
.appendTo(self.$videoContainer);
|
||||
if (self.options.showIcon) {
|
||||
|
|
@ -560,7 +555,7 @@ Ox.VideoPlayer = function(options, self) {
|
|||
.addClass('OxCensoredIcon OxVideo')
|
||||
.attr({
|
||||
src: Ox.UI.getImageURL(
|
||||
'symbol' + self.options.censoredIcon, 'video'
|
||||
'symbol' + self.options.censoredIcon, 'videoIcon'
|
||||
)
|
||||
})
|
||||
.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) {
|
||||
return Math.abs(a - b) < 0.001;
|
||||
}
|
||||
|
|
@ -1846,12 +1850,12 @@ Ox.VideoPlayer = function(options, self) {
|
|||
|
||||
hideLoadingIcon();
|
||||
if (self.options.showIcon || self.options.showIconOnLoad) {
|
||||
//!self.options.keepIconVisible && self.$playIcon.addClass('OxInterface');
|
||||
if (self.options.showIconOnLoad) {
|
||||
self.$playIcon.animate({
|
||||
opacity: 1
|
||||
}, 250);
|
||||
}
|
||||
self.$playIcon.animate({
|
||||
opacity: 1
|
||||
}, 250);
|
||||
}
|
||||
if (self.options.showControlsOnLoad) {
|
||||
showControls();
|
||||
}
|
||||
!hadDuration && self.$timeline && self.$timeline.replaceWith(
|
||||
self.$timeline = getTimeline()
|
||||
|
|
@ -2079,7 +2083,9 @@ Ox.VideoPlayer = function(options, self) {
|
|||
self.seekTimeout = 0;
|
||||
Ox.Log('Video', 'hide loading icon')
|
||||
hideLoadingIcon();
|
||||
self.$video.show();
|
||||
self.$playIcon && self.$playIcon.show();
|
||||
hidePoster();
|
||||
}
|
||||
|
||||
function seeking() {
|
||||
|
|
@ -2144,12 +2150,6 @@ Ox.VideoPlayer = function(options, self) {
|
|||
}, 250);
|
||||
self.iconIsVisible = false;
|
||||
}
|
||||
if (self.posterIsVisible) {
|
||||
self.$poster.animate({
|
||||
opacity: 0
|
||||
}, 250);
|
||||
self.posterIsVisible = false;
|
||||
}
|
||||
self.$timeline /*&& from != 'timeline'*/ && self.$timeline.options({
|
||||
position: self.options.position
|
||||
});
|
||||
|
|
@ -2530,21 +2530,26 @@ Ox.VideoPlayer = function(options, self) {
|
|||
clearInterval(self.playInterval);
|
||||
if (self.options.showIcon) {
|
||||
togglePlayIcon();
|
||||
self.options.showIcon && self.$playIcon.animate({
|
||||
self.$playIcon.animate({
|
||||
opacity: 1
|
||||
}, 250);
|
||||
}
|
||||
self.playInToOut = false;
|
||||
} else {
|
||||
hidePoster();
|
||||
if (self.options.playInToOut && self.options.position > self.options.out - self.secondsPerFrame) {
|
||||
setPosition(self.options['in']);
|
||||
}
|
||||
self.$video.play();
|
||||
self.playInterval = setInterval(playing, self.millisecondsPerFrame);
|
||||
if (self.options.showIcon) {
|
||||
self.options.showIcon && self.$playIcon.animate({
|
||||
if (self.options.showIcon) {
|
||||
self.$playIcon.animate({
|
||||
opacity: 0
|
||||
}, 250, togglePlayIcon);
|
||||
} else if (self.options.showIconOnLoad) {
|
||||
self.$playIcon.animate({
|
||||
opacity: 0
|
||||
}, 250);
|
||||
}
|
||||
self.options.showMarkers && hideMarkers();
|
||||
}
|
||||
|
|
@ -2563,7 +2568,7 @@ Ox.VideoPlayer = function(options, self) {
|
|||
self.$playIcon.attr({
|
||||
src: Ox.UI.getImageURL(
|
||||
'symbol' + (self.options.paused ? 'Play' : 'Pause'
|
||||
), 'video')
|
||||
), 'videoIcon')
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue