sanj/oxjs
1
0
Fork 0
forked from 0x2620/oxjs
Code Pull requests Activity

video updates (playlists)

Browse source
This commit is contained in:
rlx 2011-08-20 09:48:28 +00:00
commit 0369eaff14
2 changed files with 334 additions and 110 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -10,12 +10,12 @@ Ox.VideoPlayer <f> Generic Video Player
in <n> In point (sec)
out <n> Out point (sec)
text <s> Text
# fixme: documentation is wrong
controls <[[s]]|[[][]]> Controls, first top, then bottom, from left to right
Can be 'fullscreen', 'scale', 'title', 'find', 'menu',
'play', 'playInToOut', 'mute', 'volume', 'size', 'timeline', 'space',
controlsBottom <[s]|[]> Bottom controls, from left to right
Can be 'fullscreen', 'scale', 'title', 'find', 'menu', 'play', 'playInToOut',
'previous', 'next', 'mute', 'volume', 'size', 'timeline', 'space',
'position', 'resolution', 'settings'. The 'space' control is just
empty space that separates left-aligned from right-aligned controls.
controlsTop <[s]|[]> Top controls, from left to right
duration <n|-1> Duration (sec)
enableFind <b|false> If true, enable find
enableFullscreen <b|false> If true, enable fullscreen
@ -140,6 +140,7 @@ Ox.VideoPlayer = function(options, self) {
}
self.video = self.options.video[self.options.resolution];
} else {
self.isPlaylist = Ox.isFunction(self.options.video);
self.video = self.options.video;
}
@ -284,8 +285,10 @@ Ox.VideoPlayer = function(options, self) {
.bindEvent(Ox.extend({
ended: ended,
loadedmetadata: loadedmetadata,
pointschange: pointschange,
seeked: seeked,
seeking: seeking
seeking: seeking,
sizechange: sizechange
}, self.options.progress ? {
progress: progress
} : {}))
@ -516,6 +519,22 @@ Ox.VideoPlayer = function(options, self) {
})
.appendTo(self['$controls' + titleCase]);
} else if (control == 'next') {
self.$nextClipButton = Ox.Button({
style: 'symbol',
title: 'arrowRight',
tooltip: 'Next',
type: 'image'
})
.addClass('OxVideo')
.bindEvent({
click: function() {
goToNextClip(1);
}
})
.appendTo(self['$controls' + titleCase]);
} else if (control == 'play') {
self.$playButton = Ox.Button({
@ -609,6 +628,22 @@ Ox.VideoPlayer = function(options, self) {
fontSize: '9px'
});
} else if (control == 'previous') {
self.$previousClipButton = Ox.Button({
style: 'symbol',
title: 'arrowLeft',
tooltip: 'Previous',
type: 'image'
})
.addClass('OxVideo')
.bindEvent({
click: function() {
goToNextClip(-1);
}
})
.appendTo(self['$controls' + titleCase]);
} else if (control == 'resolution') {
self.$resolutionButton = Ox.Element({
@ -801,7 +836,7 @@ Ox.VideoPlayer = function(options, self) {
.html('0')
.appendTo(self.$find);
self.$previousButton = Ox.Button({
self.$previousResultButton = Ox.Button({
disabled: true,
style: 'symbol',
title: 'arrowLeft',
@ -816,7 +851,7 @@ Ox.VideoPlayer = function(options, self) {
})
.appendTo(self.$find);
self.$nextButton = Ox.Button({
self.$nextResultButton = Ox.Button({
disabled: true,
style: 'symbol',
title: 'arrowRight',
@ -1316,6 +1351,28 @@ Ox.VideoPlayer = function(options, self) {
return Ox.UI.getImageURL('symbol' + symbol, 'modern');
}
function goToNextClip(direction) {
self.$video[direction == 1 ? 'playNext' : 'playPrevious']();
}
function goToNextResult(direction) {
var found = false,
position = 0;
direction == -1 && self.results.reverse();
Ox.forEach(self.results, function(v) {
if (direction == 1 ? v['in'] > self.options.position : v.out < self.options.position) {
position = v['in'];
found = true;
return false;
}
});
direction == -1 && self.results.reverse();
if (!found) {
position = self.results[direction == 1 ? 0 : self.results.length - 1]['in'];
}
setPosition(position + self.secondsPerFrame);
}
function goToPoint() {
that.triggerEvent('gotopoint');
}
@ -1416,10 +1473,10 @@ Ox.VideoPlayer = function(options, self) {
});
self.out = self.options.playInToOut &&
self.options.out < self.$video.duration() ?
self.options.out : self.$video.duration();
self.out < self.$video.duration() ?
self.out : self.$video.duration();
self.options.duration = self.out - self['in'];
Ox.print('----------------------------------------', self.options.position)
Ox.print('---------------------------------------- POS', self.options.position)
//self.options.position = Ox.limit(self.options.position, self['in'], self.out);
self.$video.currentTime(self.options.position);
@ -1475,13 +1532,17 @@ Ox.VideoPlayer = function(options, self) {
function playing() {
self.options.position = self.$video.currentTime();
if (
(self.options.playInToOut || self.playInToOut) &&
self.options.position >= self.options.out
(self.options.playInToOut || self.playInToOut || self.isPlaylist) &&
self.options.position >= self.out
) {
togglePaused();
setPosition(self.options.out/*, 'video'*/);
//ended();
self.playInToOut = false;
if (self.isPlaylist) {
self.$video.playNext();
} else {
togglePaused();
setPosition(self.out/*, 'video'*/);
//ended();
self.playInToOut = false;
}
} else {
setPosition(self.options.position, 'video');
}
@ -1499,6 +1560,15 @@ Ox.VideoPlayer = function(options, self) {
}
}
function pointschange() {
var points = self.$video.points();
self['in'] = points[0];
self.out = points[1];
self.options.duration = self.out - self['in'];
setPosition(self['in']);
Ox.print('POINTSCHANGE', self['in'], self.out, self.options.position, self.options.duration)
}
function progress() {
var buffered = self.$video.buffered();
for (var i = 0; i < buffered.length; i++) {
@ -1555,7 +1625,7 @@ Ox.VideoPlayer = function(options, self) {
}
function setPosition(position, from) {
self.options.position = Ox.limit(position, self['in'], self['out']);
self.options.position = Ox.limit(position, self['in'], self.out);
/*
self.options.position = Math.round(
position * self.options.fps
@ -1686,6 +1756,13 @@ Ox.VideoPlayer = function(options, self) {
//Ox.print('?!?', self.$subtitle.css('bottom'), self.$subtitle.height())
}
function sizechange() {
self.videoWidth = self.$video.videoWidth();
self.videoHeight = self.$video.videoHeight();
self.videoCSS = getVideoCSS();
self.$video.css(self.videoCSS);
};
function changeVolumeBy(num) {
showVolume();
self.options.volume = Ox.limit(self.options.volume + num, 0, 1);
@ -1781,10 +1858,10 @@ Ox.VideoPlayer = function(options, self) {
//Ox.print('results', self.results.length);
if (self.$find) {
self.$results.html(self.results.length);
self.$previousButton.options({
self.$previousResultButton.options({
disabled: self.results.length <= 1
});
self.$nextButton.options({
self.$nextResultButton.options({
disabled: self.results.length <= 1
});
self.$clearButton.options({
@ -1801,24 +1878,6 @@ Ox.VideoPlayer = function(options, self) {
}
}
function goToNextResult(direction) {
var found = false,
position = 0;
direction == -1 && self.results.reverse();
Ox.forEach(self.results, function(v) {
if (direction == 1 ? v['in'] > self.options.position : v['out'] < self.options.position) {
position = v['in'];
found = true;
return false;
}
});
direction == -1 && self.results.reverse();
if (!found) {
position = self.results[direction == 1 ? 0 : self.results.length - 1]['in'];
}
setPosition(position + self.secondsPerFrame);
}
function submitPositionInput() {
self.$positionInput.hide();
self.$position.html('').show();