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

Ox.VideoPlayer: add loop option and control

Browse source
This commit is contained in:
rlx 2013-07-12 14:43:30 +00:00
parent 82fc0e791a
commit 0fdd110f11
1 changed files with 57 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -13,11 +13,11 @@ Ox.VideoPlayer <f> Generic Video Player
censoredTooltip <s|''> Tooltip for 'censored' icon
controlsBottom <[s]|[]> Bottom controls, from left to right
Can be 'close', fullscreen', 'scale', 'title', 'find', 'open',
'play', 'playInToOut', 'previous', 'next', 'mute', 'volume', 'size',
'timeline', 'position', 'settings', and 'space[int]'. A 'space16'
control, for example, is empty space that is 16px wide, and a
'space' control is empty space that separates left-aligned from
right-aligned controls.
'play', 'playInToOut', 'previous', 'next', 'loop', 'mute', 'volume',
'size', 'timeline', 'position', 'settings', and 'space[int]'. A
'space16' control, for example, is empty space that is 16px wide,
and a 'space' control is empty space that separates left-aligned
from right-aligned controls.
controlsTooltips <o|{}> Tooltip text per control id
controlsTop <[s]|[]> Top controls, from left to right
duration <n|-1> Duration (sec)
@ -44,6 +44,7 @@ Ox.VideoPlayer <f> Generic Video Player
logo <s|''> Logo image URL
logoLink <s|''> Logo link URL
logoTitle <s|''> Text for Logo tooltip // fixme: shouldn't this be logoTooltip then?s
loop <b|false> If true, video loops
muted <b|false> If true, video is muted
paused <b|false> If true, video is paused
playInToOut <b|false> If true, video plays only from in to out
@ -142,6 +143,7 @@ Ox.VideoPlayer = function(options, self) {
logo: '',
logoLink: '',
logoTitle: '',
loop: false,
muted: false,
paused: false,
playInToOut: false,
@ -677,6 +679,22 @@ Ox.VideoPlayer = function(options, self) {
})
.appendTo(self['$controls' + titleCase]);
} else if (control == 'loop') {
self.$loopButton = Ox.Button({
style: 'video',
tooltip: [Ox._('Don\'t Loop'), Ox._('Loop')],
type: 'image',
value: self.options.loop ? 'RepeatNone' : 'RepeatAll',
values: ['RepeatNone', 'RepeatAll']
})
.bindEvent({
click: function() {
toggleLoop('button');
}
})
.appendTo(self['$controls' + titleCase]);
} else if (control == 'mute') {
self.$muteButton = Ox.Button({
@ -1236,21 +1254,26 @@ Ox.VideoPlayer = function(options, self) {
}
function ended() {
!self.options.paused && togglePaused();
if (self.options.poster) {
self.$poster.animate({
opacity: 1
}, 250);
self.posterIsVisible = true;
if (self.options.loop) {
rewind();
self.$video.play();
} else {
!self.options.paused && togglePaused();
if (self.options.poster) {
self.$poster.animate({
opacity: 1
}, 250);
self.posterIsVisible = true;
}
if (self.options.showIconOnLoad) {
self.$playIcon.animate({
opacity: 1
}, 250);
self.iconIsVisible = true;
}
self.options.rewind && setTimeout(rewind, 250);
that.triggerEvent('ended');
}
if (self.options.showIconOnLoad) {
self.$playIcon.animate({
opacity: 1
}, 250);
self.iconIsVisible = true;
}
self.options.rewind && rewind();
that.triggerEvent('ended');
}
function enterFullscreen() {
@ -1832,10 +1855,13 @@ Ox.VideoPlayer = function(options, self) {
) {
if (self.isPlaylist) {
self.$video.playNext();
} else if (self.options.loop) {
rewind();
self.$video.play();
} else {
togglePaused();
if (self.options.rewind) {
rewind();
setTimeout(rewind, 250);
} else {
setPosition(self.playInToOut ? self.options.out : self.out/*, 'video'*/);
}
@ -2002,9 +2028,7 @@ Ox.VideoPlayer = function(options, self) {
}
function rewind() {
setTimeout(function() {
setPosition(self.options.playInToOut ? self.options['in'] : 0);
}, 250);
setPosition(self.options.playInToOut ? self.options['in'] : 0);
}
function seeked() {
@ -2394,6 +2418,16 @@ Ox.VideoPlayer = function(options, self) {
});
}
function toggleLoop(from) {
self.options.loop = !self.options.loop;
if (self.$loopButton && from != 'button') {
self.$loopButton.toggle();
}
that.triggerEvent('loop', {
loop: self.options.loop
});
}
function toggleMuted(from) {
self.hasVolumeControl && showVolume();
self.options.muted = !self.options.muted;