add chapter support to VideoPlayer, use for next/previous in VideoEditPanel

This commit is contained in:
j 2013-07-14 18:52:26 +00:00
parent 19b9b14dfc
commit 5b29e4348b
3 changed files with 38 additions and 23 deletions

View file

@ -89,7 +89,10 @@ Ox.VideoEditPanel = function(options, self) {
self.$timeline.options({type: self.options.timeline});
},
video: function() {
self.$video.options({video: self.options.video});
self.$video.options({
chapters: getChapters(),
video: self.options.video
});
},
width: function() {
self.$video.options({width: getPlayerWidth()});
@ -133,6 +136,7 @@ Ox.VideoEditPanel = function(options, self) {
self.$player = Ox.Element().css({overflowX: 'hidden'});
self.$video = Ox.VideoPlayer({
chapters: getChapters(),
controlsTop: ['fullscreen', 'space', 'open'],
controlsBottom: [
'play', 'playInToOut', 'volume', 'scale', 'timeline',
@ -312,6 +316,18 @@ Ox.VideoEditPanel = function(options, self) {
return Ox.getObjectById(self.options.clips, id);
}
function getChapters() {
var currentTime = 0;
return self.options.clips.map(function(clip) {
var chapter = {
position: currentTime,
title: clip.title || clip.id
};
currentTime += clip.duration;
return chapter;
});
}
function getPlayerHeight() {
return self.options.height - 24
- self.options.showTimeline * 80 - 1;

View file

@ -428,24 +428,6 @@ Ox.VideoElement = function(options, self) {
return that;
};
/*@
playNext <f> play next
@*/
that.playNext = function() {
Ox.Log('Video', 'PLAY NEXT');
setCurrentItem(self.currentItem + 1);
self.video.play();
};
/*@
playPrevious <f> play previous
@*/
that.playPrevious = function() {
Ox.Log('Video', 'PLAY PREVIOUS');
setCurrentItem(self.currentItem - 1);
self.video.play();
};
/*@
videoHeight <f> get videoHeight
@*/

View file

@ -11,6 +11,7 @@ Ox.VideoPlayer <f> Generic Video Player
censored <a|[]> Array of censored ranges
censoredIcon <s|''> 'Censored' icon
censoredTooltip <s|''> Tooltip for 'censored' icon
chapters: <[o]|[]> List of chapter objects with position and title
controlsBottom <[s]|[]> Bottom controls, from left to right
Can be 'close', fullscreen', 'scale', 'title', 'find', 'open',
'play', 'playInToOut', 'previous', 'next', 'loop', 'mute', 'volume',
@ -722,7 +723,7 @@ Ox.VideoPlayer = function(options, self) {
})
.bindEvent({
click: function() {
goToNextClip(1);
goToNextChapter(1);
}
})
.appendTo(self['$controls' + titleCase]);
@ -845,7 +846,7 @@ Ox.VideoPlayer = function(options, self) {
})
.bindEvent({
click: function() {
goToNextClip(-1);
goToNextChapter(-1);
}
})
.appendTo(self['$controls' + titleCase]);
@ -1679,8 +1680,24 @@ Ox.VideoPlayer = function(options, self) {
return symbol;
}
function goToNextClip(direction) {
self.$video[direction == 1 ? 'playNext' : 'playPrevious']();
function goToNextChapter(direction) {
var next,
points = self.options.chapters.map(function(chapter) {
return chapter.position;
}).concat([self.options.duration]);
if (direction == 1) {
next = points.filter(function(point) {
return point > self.options.position;
})[0];
} else {
next = points.filter(function(point) {
return point < self.options.position;
}).slice(-1)[0];
}
if (Ox.isUndefined(next)) {
next = direction == 1 ? self.options.duration : 0;
}
setPosition(next);
}
function goToNextResult(direction) {