feat: add api for switching subtitles

See example.html for how to do so. Interface may change when this plugin gets streamlined for videojs 6. Resolves #10 Resolves #17 Refs #12
SunnyLi · May 30, 2017 · 4548378 · 4548378
1 parent b8064f6
commit 4548378
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 21 deletions.
diff --git a/README.md b/README.md
@@ -25,7 +25,7 @@ Just specify version to be within:
 ```
 "videojs-ass": ">=0.3.0 < 0.5.0"
 ```
-for bower or npm whichever you perfer using.
+for bower or npm whichever you prefer using.
 
 
 ## Usage

diff --git a/example.html b/example.html
@@ -32,13 +32,28 @@
         nativeControlsForTouch: false,
         width: 640,
         height: 360,
-        plugins: {
-          ass: {
-            'src': ["subs/os.ass"]
-          }
-        },
+        // fluid: true,
+        // plugins: {
+        //   ass: {
+        //     'src': ["subs/os.ass"],
+        //     videoWidth: 640,
+        //     videoHeight: 360,
+        //     // enableSvg: false
+        //   }
+        // },
         playbackRates: [0.5, 1, 1.5, 2]
       });
+
+      var vjs = videojs('player');
+      // initialize the plugin this way to access internal methods
+      var vjs_ass = vjs.ass({
+        'src': ["subs/os.ass"],
+        videoWidth: 640,
+        videoHeight: 360,
+        // enableSvg: false
+      })
+      // you will then be able to use the following js to switch subtitle
+      // vjs_ass.loadNewSubtitle('URL HERE')
     </script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "videojs-ass",
-  "version": "0.6.3",
+  "version": "0.7.0",
   "author": "Sunny Li",
   "description": "ASS/SSA subtitle overlay for videojs",
   "repository": {

diff --git a/src/videojs.ass.js b/src/videojs.ass.js
@@ -6,12 +6,15 @@
   'use strict';
 
   var vjs_ass = function (options) {
-    var overlay = document.createElement('div'),
-      clock = null,
+    var cur_id = 0,
+      id_count = 0,
+      overlay = document.createElement('div'),
+      clocks = [],
       clockRate = options.rate || 1,
       delay = options.delay || 0,
       player = this,
-      renderer = null,
+      renderers = [],
+      rendererSettings = null,
       AssButton = null,
       AssButtonInstance = null,
       OverlayComponent = null,
@@ -32,28 +35,28 @@
       }
     }
 
-    player.addChild(OverlayComponent);
+    player.addChild(OverlayComponent, {}, 3);
 
     function getCurrentTime() {
       return player.currentTime() - delay;
     }
 
-    clock = new libjass.renderers.AutoClock(getCurrentTime, 500);
+    clocks[cur_id] = new libjass.renderers.AutoClock(getCurrentTime, 500);
 
     player.on('play', function () {
-      clock.play();
+      clocks[cur_id].play();
     });
 
     player.on('pause', function () {
-      clock.pause();
+      clocks[cur_id].pause();
     });
 
     player.on('seeking', function () {
-      clock.seeking();
+      clocks[cur_id].seeking();
     });
 
     function updateClockRate() {
-      clock.setRate(player.playbackRate() * clockRate);
+      clocks[cur_id].setRate(player.playbackRate() * clockRate);
     }
 
     updateClockRate();
@@ -73,23 +76,25 @@
           subsWrapperLeft = (videoOffsetWidth - subsWrapperWidth) / 2,
           subsWrapperTop = (videoOffsetHeight - subsWrapperHeight) / 2;
 
-        renderer.resize(subsWrapperWidth, subsWrapperHeight, subsWrapperLeft, subsWrapperTop);
+        renderers[cur_id].resize(subsWrapperWidth, subsWrapperHeight, subsWrapperLeft, subsWrapperTop);
       }, 100);
     }
 
-      window.addEventListener('resize', updateDisplayArea);
+    window.addEventListener('resize', updateDisplayArea);
     player.on('loadedmetadata', updateDisplayArea);
     player.on('resize', updateDisplayArea);
     player.on('fullscreenchange', updateDisplayArea);
 
     player.on('dispose', function () {
-      clock.disable();
+      for (var i = 0; i < clocks.length; i++) {
+        clocks[i].disable();
+      }
       window.removeEventListener('resize', updateDisplayArea);
     });
 
+    rendererSettings = new libjass.renderers.RendererSettings();
     libjass.ASS.fromUrl(options.src, libjass.Format.ASS).then(
       function (ass) {
-        var rendererSettings = new libjass.renderers.RendererSettings();
         if (options.hasOwnProperty('enableSvg')) {
           rendererSettings.enableSvg = options.enableSvg;
         }
@@ -100,10 +105,29 @@
             .makeFontMapFromStyleElement(document.getElementById(options.fontMapById));
         }
 
-        renderer = new libjass.renderers.WebRenderer(ass, clock, overlay, rendererSettings);
+        renderers[cur_id] = new libjass.renderers.WebRenderer(ass, clocks[cur_id], overlay, rendererSettings);
       }
     );
 
+    /*
+      Experimental API use at your own risk!!
+    */
+    function loadNewSubtitle(url) {
+      renderers[cur_id]._removeAllSubs();
+      renderers[cur_id]._preRenderedSubs.clear();
+      renderers[cur_id].clock.disable();
+
+      libjass.ASS.fromUrl(url, libjass.Format.ASS).then(
+        function (ass) {
+          cur_id = ++id_count;
+          clocks[cur_id] = new libjass.renderers.AutoClock(getCurrentTime, 500);
+          renderers[cur_id] = new libjass.renderers.WebRenderer(ass, clocks[cur_id], overlay, rendererSettings);
+          updateDisplayArea();
+          clocks[cur_id].play();
+        }
+      );
+    };
+
     // Visibility Toggle Button
     if (!options.hasOwnProperty('button') || options.button) {
       VjsButton = videojs.getComponent('Button');
@@ -136,6 +160,10 @@
         );
       });
     }
+
+    return {
+      loadNewSubtitle: loadNewSubtitle
+    };
   };
 
   videojs.plugin('ass', vjs_ass);