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:
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)
|
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');
|
|
||||||
if (self.options.showIconOnLoad) {
|
|
||||||
self.$playIcon.animate({
|
self.$playIcon.animate({
|
||||||
opacity: 1
|
opacity: 1
|
||||||
}, 250);
|
}, 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')
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue