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 censored <a|[]> Array of censored ranges
censoredIcon <s|''> 'Censored' icon censoredIcon <s|''> 'Censored' icon
censoredTooltip <s|''> Tooltip for '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 controlsBottom <[s]|[]> Bottom controls, from left to right
Can be 'close', fullscreen', 'scale', 'title', 'find', 'open', Can be 'close', fullscreen', 'scale', 'title', 'chapterTitle',
'play', 'playInToOut', 'previous', 'next', 'loop', 'mute', 'volume', 'find', 'open', 'play', 'playInToOut', 'previous', 'next', 'loop',
'size', 'timeline', 'position', 'settings', and 'space[int]'. A 'mute', 'volume', 'size', 'timeline', 'position', 'settings', and
'space16' control, for example, is empty space that is 16px wide, 'space[int]'. A 'space16' control, for example, is empty space that
and a 'space' control is empty space that separates left-aligned is 16px wide, and a 'space' control is empty space that separates
from right-aligned controls. left-aligned 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)
@ -639,7 +639,14 @@ Ox.VideoPlayer = function(options, self) {
self.options['controls' + titleCase].forEach(function(control) { 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({ self.$closeButton = Ox.Button({
style: 'video', style: 'video',
@ -1392,6 +1399,20 @@ Ox.VideoPlayer = function(options, self) {
return censored; 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) { function getCSS(element) {
var css; var css;
if (element == 'copyrightIcon') { 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() { function setMarkers() {
//Ox.Log('Video', 'SET MARKERS', self.options.position, self.options['in'], self.options.out, self.$pointMarker); //Ox.Log('Video', 'SET MARKERS', self.options.position, self.options['in'], self.options.out, self.$pointMarker);
self.$posterMarker && Ox.forEach(self.$posterMarker, function(marker) { 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.paused && self.options.showMarkers && setMarkers();
self.options.censored.length && setCensored(); self.options.censored.length && setCensored();
self.options.enableSubtitles && self.$subtitle && setSubtitle(); self.options.enableSubtitles && self.$subtitle && setSubtitle();
self.$chapterTitle && setChapterTitle();
self.$position && self.$position.html(formatPosition()); self.$position && self.$position.html(formatPosition());
if (self.options.type == 'play') { if (self.options.type == 'play') {
if (self.loadedMetadata && from != 'video') { if (self.loadedMetadata && from != 'video') {