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

52
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 censoredTooltip <s|''> Tooltip for 'censored' icon
controlsBottom <[s]|[]> Bottom controls, from left to right controlsBottom <[s]|[]> Bottom controls, from left to right
Can be 'close', fullscreen', 'scale', 'title', 'find', 'open', Can be 'close', fullscreen', 'scale', 'title', 'find', 'open',
'play', 'playInToOut', 'previous', 'next', 'mute', 'volume', 'size', 'play', 'playInToOut', 'previous', 'next', 'loop', 'mute', 'volume',
'timeline', 'position', 'settings', and 'space[int]'. A 'space16' 'size', 'timeline', 'position', 'settings', and 'space[int]'. A
control, for example, is empty space that is 16px wide, and a 'space16' control, for example, is empty space that is 16px wide,
'space' control is empty space that separates left-aligned from and a 'space' control is empty space that separates left-aligned
right-aligned controls. from right-aligned controls.
controlsTooltips <o|{}> Tooltip text per control id controlsTooltips <o|{}> Tooltip text per control id
controlsTop <[s]|[]> Top controls, from left to right controlsTop <[s]|[]> Top controls, from left to right
duration <n|-1> Duration (sec) duration <n|-1> Duration (sec)
@ -44,6 +44,7 @@ Ox.VideoPlayer <f> Generic Video Player
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
loop <b|false> If true, video loops
muted <b|false> If true, video is muted muted <b|false> If true, video is muted
paused <b|false> If true, video is paused paused <b|false> If true, video is paused
playInToOut <b|false> If true, video plays only from in to out playInToOut <b|false> If true, video plays only from in to out
@ -142,6 +143,7 @@ Ox.VideoPlayer = function(options, self) {
logo: '', logo: '',
logoLink: '', logoLink: '',
logoTitle: '', logoTitle: '',
loop: false,
muted: false, muted: false,
paused: false, paused: false,
playInToOut: false, playInToOut: false,
@ -677,6 +679,22 @@ Ox.VideoPlayer = function(options, self) {
}) })
.appendTo(self['$controls' + titleCase]); .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') { } else if (control == 'mute') {
self.$muteButton = Ox.Button({ self.$muteButton = Ox.Button({
@ -1236,6 +1254,10 @@ Ox.VideoPlayer = function(options, self) {
} }
function ended() { function ended() {
if (self.options.loop) {
rewind();
self.$video.play();
} else {
!self.options.paused && togglePaused(); !self.options.paused && togglePaused();
if (self.options.poster) { if (self.options.poster) {
self.$poster.animate({ self.$poster.animate({
@ -1249,9 +1271,10 @@ Ox.VideoPlayer = function(options, self) {
}, 250); }, 250);
self.iconIsVisible = true; self.iconIsVisible = true;
} }
self.options.rewind && rewind(); self.options.rewind && setTimeout(rewind, 250);
that.triggerEvent('ended'); that.triggerEvent('ended');
} }
}
function enterFullscreen() { function enterFullscreen() {
that.on({ that.on({
@ -1832,10 +1855,13 @@ Ox.VideoPlayer = function(options, self) {
) { ) {
if (self.isPlaylist) { if (self.isPlaylist) {
self.$video.playNext(); self.$video.playNext();
} else if (self.options.loop) {
rewind();
self.$video.play();
} else { } else {
togglePaused(); togglePaused();
if (self.options.rewind) { if (self.options.rewind) {
rewind(); setTimeout(rewind, 250);
} else { } else {
setPosition(self.playInToOut ? self.options.out : self.out/*, 'video'*/); setPosition(self.playInToOut ? self.options.out : self.out/*, 'video'*/);
} }
@ -2002,9 +2028,7 @@ Ox.VideoPlayer = function(options, self) {
} }
function rewind() { function rewind() {
setTimeout(function() {
setPosition(self.options.playInToOut ? self.options['in'] : 0); setPosition(self.options.playInToOut ? self.options['in'] : 0);
}, 250);
} }
function seeked() { 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) { function toggleMuted(from) {
self.hasVolumeControl && showVolume(); self.hasVolumeControl && showVolume();
self.options.muted = !self.options.muted; self.options.muted = !self.options.muted;