add chapter support to VideoPlayer, use for next/previous in VideoEditPanel
This commit is contained in:
parent
19b9b14dfc
commit
5b29e4348b
3 changed files with 38 additions and 23 deletions
|
@ -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;
|
||||
|
|
|
@ -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
|
||||
@*/
|
||||
|
|
|
@ -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) {
|
||||
|
|
Loading…
Reference in a new issue