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

Video Player: Add support for chapter titles

Browse source
This commit is contained in:
rolux 2014-02-08 12:34:06 +05:30
parent 5bbac7aadd
commit 7acf1c3712
1 changed files with 38 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -11,14 +11,14 @@ 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
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',
'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.
Can be 'close', fullscreen', 'scale', 'title', 'chapterTitle',
'find', 'open', '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)
@ -639,7 +639,14 @@ Ox.VideoPlayer = function(options, self) {
self.options['controls' + titleCase].forEach(function(control) {
if (control == 'close') {
if (control == 'chapterTitle') {
self.$chapterTitle = $('<div>')
.addClass('OxTitle')
.html(getChapterTitle())
.appendTo(self['$controls' + titleCase].$element);
} else if (control == 'close') {
self.$closeButton = Ox.Button({
style: 'video',
@ -1392,6 +1399,20 @@ Ox.VideoPlayer = function(options, self) {
return censored;
}
function getChapterTitle() {
var chapterTitle = '';
self.options.chapters && Ox.forEach(self.options.chapters, function(v) {
if (
v['in'] <= self.options.position
&& v.out >= self.options.position
) {
chapterTitle = v.text;
return false; // break
}
});
return chapterTitle;
}
function getCSS(element) {
var css;
if (element == 'copyrightIcon') {
@ -2111,6 +2132,14 @@ Ox.VideoPlayer = function(options, self) {
}
}
function setChapterTitle() {
var chapterTitle = getChapterTitle();
if (chapterTitle != self.chapterTitle) {
self.chapterTitle = chapterTitle;
self.$chapterTitle.html(self.chapterTitle)
}
}
function setMarkers() {
//Ox.Log('Video', 'SET MARKERS', self.options.position, self.options['in'], self.options.out, self.$pointMarker);
self.$posterMarker && Ox.forEach(self.$posterMarker, function(marker) {
@ -2143,6 +2172,7 @@ Ox.VideoPlayer = function(options, self) {
self.options.paused && self.options.showMarkers && setMarkers();
self.options.censored.length && setCensored();
self.options.enableSubtitles && self.$subtitle && setSubtitle();
self.$chapterTitle && setChapterTitle();
self.$position && self.$position.html(formatPosition());
if (self.options.type == 'play') {
if (self.loadedMetadata && from != 'video') {