Fixed support for webvtt chapters. Fixes #676.. closes #1221

videojs · Jun 13, 2014 · 95173eb · 95173eb
1 parent 6d78c95
commit 95173eb
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 12 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,7 @@ CHANGELOG
 
 ## HEAD (Unreleased)
 * Added cross-browser isArray for cross-frame support. fixes #1195 ([view](https://github.com/videojs/video.js/pull/1218))
+* Fixed support for webvtt chapters. Fixes #676. ([view](https://github.com/videojs/video.js/pull/1221))
 
 --------------------
 

diff --git a/src/css/video-js.less b/src/css/video-js.less
@@ -100,6 +100,7 @@ The control icons are from a custom font. Each icon corresponds to a character
 @spinner4-icon: "\e01f";
 @subtitles-icon: "\e00c";
 @captions-icon: "\e008";
+@chapters-icon: "\e00c";
 @share-icon: "\e00e";
 @cog-icon: "\e600";
 
@@ -765,13 +766,24 @@ easily in the skin designer. http://designer.videojs.com/
 }
 
 /* Subtitles Button */
-.vjs-default-skin .vjs-subtitles-button:before { content: @subtitles-icon; }
+.vjs-default-skin .vjs-subtitles-button:before {
+  content: @subtitles-icon;
+}
 
 /* Captions Button */
 .vjs-default-skin .vjs-captions-button:before {
   content: @captions-icon;
 }
 
+/* Chapters Button */
+.vjs-default-skin .vjs-chapters-button:before {
+  content: @chapters-icon;
+}
+
+.vjs-default-skin .vjs-chapters-button.vjs-menu-button .vjs-menu .vjs-menu-content {
+  width: 20em;
+}
+
 /* Replacement for focus outline */
 .vjs-default-skin .vjs-captions-button:focus .vjs-control-content:before,
 .vjs-default-skin .vjs-captions-button:hover .vjs-control-content:before {

diff --git a/src/js/tracks.js b/src/js/tracks.js
@@ -941,25 +941,26 @@ vjs.ChaptersButton.prototype.createMenu = function(){
 
   for (;i<j;i++) {
     track = tracks[i];
-    if (track.kind() == this.kind_ && track.dflt()) {
-      if (track.readyState() < 2) {
-        this.chaptersTrack = track;
+    if (track.kind() == this.kind_) {
+      if (track.readyState() === 0) {
+        track.load();
         track.on('loaded', vjs.bind(this, this.createMenu));
-        return;
       } else {
         chaptersTrack = track;
         break;
       }
     }
   }
 
-  var menu = this.menu = new vjs.Menu(this.player_);
-
-  menu.contentEl().appendChild(vjs.createEl('li', {
-    className: 'vjs-menu-title',
-    innerHTML: vjs.capitalize(this.kind_),
-    tabindex: -1
-  }));
+  var menu = this.menu;
+  if (menu === undefined) {
+    menu = new vjs.Menu(this.player_);
+    menu.contentEl().appendChild(vjs.createEl('li', {
+      className: 'vjs-menu-title',
+      innerHTML: vjs.capitalize(this.kind_),
+      tabindex: -1
+    }));
+  }
 
   if (chaptersTrack) {
     var cues = chaptersTrack.cues_, cue, mi;
@@ -978,6 +979,7 @@ vjs.ChaptersButton.prototype.createMenu = function(){
 
       menu.addChild(mi);
     }
+    this.addChild(menu);
   }
 
   if (this.items.length > 0) {