Merge pull request #446 from cloudinary/ME-13952-chapters-button

ME-13952-chapters-button
cloudinary · Oct 12, 2023 · d057290 · d057290
2 parents 20e4183 + 652b32a
commit d057290
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 6 deletions.
diff --git a/docs/chapters.html b/docs/chapters.html
@@ -37,7 +37,11 @@
       });
 
       const playerSourceConf = cloudinary.videoPlayer('player-config', {
-        cloud_name: 'demo'
+        cloud_name: 'demo',
+        controlBar: {
+          pictureInPictureToggle: false,
+          chaptersButton: true
+        },
       });
 
       playerSourceConf.source('snow_horses', {
@@ -123,7 +127,11 @@ <h3 class="mt-4">Example Code:</h3>
         });
 
         const playerSourceConf = cloudinary.videoPlayer('player-config', {
-          cloud_name: 'demo'
+          cloud_name: 'demo',
+          controlBar: {
+            pictureInPictureToggle: false,
+            chaptersButton: true
+          },
         });
 
         playerSourceConf.source('snow_horses', {

diff --git a/src/plugins/chapters/index.js b/src/plugins/chapters/index.js
@@ -87,7 +87,8 @@ const ChaptersPlugin = (function () {
       // Fetch chapters VTT from URL
       const chaptersTrack = {
         kind: 'chapters',
-        src: this.options.url
+        src: this.options.url,
+        default: true
       };
       const textTrack = this.player.addRemoteTextTrack(chaptersTrack);
       textTrack.addEventListener('load', () => {
@@ -96,18 +97,22 @@ const ChaptersPlugin = (function () {
       });
     } else {
       // Setup chapters from options
-      const textTrack = this.player.addTextTrack('chapters');
+      const textTrack = this.player.addRemoteTextTrack({
+        kind: 'chapters',
+        default: true
+      });
       const end = this.player.duration();
       Object.entries(this.options).forEach((entry, index, arr) => {
         const cue = new VTTCue(
           parseFloat(entry[0]),
           parseFloat(arr[index + 1] ? arr[index + 1][0] : end),
           entry[1]
         );
-        textTrack.addCue(cue);
+        textTrack.track.addCue(cue);
       });
-      this.chaptersTrack = textTrack;
+      this.chaptersTrack = textTrack.track;
       this.setupChaptersDisplays();
+      this.player.controlBar.chaptersButton.update();
     }
   };