fix video-dev#2400 issue - add configuration for browsers with bug on…

… addCue method add new configuration forceTextTrackCue to enable captions on problematic OS such as LG SDK 2, which has bug on their addCue method with different structure it won't add caption at all.
Yuvalke · Oct 13, 2019 · ece8713 · ece8713
1 parent 5ec8093
commit ece8713
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 6 deletions.
diff --git a/docs/API.md b/docs/API.md
@@ -58,6 +58,7 @@
   - [`abrController`](#abrcontroller)
   - [`timelineController`](#timelinecontroller)
   - [`enableWebVTT`](#enablewebvtt)
+  - [`forceTextTrackCue`](#forceTextTrackCue)
   - [`enableCEA708Captions`](#enablecea708captions)
   - [`captionsTextTrack1Label`](#captionstexttrack1label)
   - [`captionsTextTrack1LanguageCode`](#captionstexttrack1languagecode)
@@ -342,6 +343,7 @@ Configuration parameters could be provided to hls.js upon instantiation of `Hls`
       fpsController: FPSController,
       timelineController: TimelineController,
       enableWebVTT: true,
+      forceTextTrackCue: false,
       enableCEA708Captions: true,
       stretchShortVideoTrack: false,
       maxAudioFramesDrift: 1,
@@ -831,6 +833,14 @@ whether or not to enable WebVTT captions on HLS
 
 parameter should be a boolean
 
+### `forceTextTrackCue`
+
+(default: `false`)
+
+force use on text track cue for specific OS with bug on addCue method
+
+parameter should be a boolean
+
 ### `enableCEA708Captions`
 
 (default: `true`)

diff --git a/src/config.ts b/src/config.ts
@@ -114,6 +114,7 @@ type TimelineControllerConfig = {
   cueHandler: any, // TODO(typescript-cues): Type once file is done
   enableCEA708Captions: boolean,
   enableWebVTT: boolean,
+  forceTextTrackCue: boolean,
   captionsTextTrack1Label: string,
   captionsTextTrack1LanguageCode: string,
   captionsTextTrack2Label: string,
@@ -256,6 +257,7 @@ function timelineConfig (): TimelineControllerConfig {
     cueHandler: Cues, // used by timeline-controller
     enableCEA708Captions: true, // used by timeline-controller
     enableWebVTT: true, // used by timeline-controller
+    forceTextTrackCue: false, // used by timeline-controller
     captionsTextTrack1Label: 'English', // used by timeline-controller
     captionsTextTrack1LanguageCode: 'en', // used by timeline-controller
     captionsTextTrack2Label: 'Spanish', // used by timeline-controller

diff --git a/src/controller/timeline-controller.js b/src/controller/timeline-controller.js
@@ -290,16 +290,23 @@ class TimelineController extends EventHandler {
       }
       // Add cues and trigger event with success true.
       cues.forEach(cue => {
+        const addTextTrackCue = (track, cue) => {
+          const textTrackCue = new window.TextTrackCue(cue.startTime, cue.endTime, cue.text);
+          textTrackCue.id = cue.id;
+          track.addCue(textTrackCue);
+        };
         // Sometimes there are cue overlaps on segmented vtts so the same
         // cue can appear more than once in different vtt files.
         // This avoid showing duplicated cues with same timecode and text.
         if (!currentTrack.cues.getCueById(cue.id)) {
-          try {
-            currentTrack.addCue(cue);
-          } catch (err) {
-            const textTrackCue = new window.TextTrackCue(cue.startTime, cue.endTime, cue.text);
-            textTrackCue.id = cue.id;
-            currentTrack.addCue(textTrackCue);
+          if (hls.config.forceTextTrackCue) {
+            addTextTrackCue(currentTrack, cue);
+          } else {
+            try {
+              currentTrack.addCue(cue);
+            } catch (err) {
+              addTextTrackCue(currentTrack, cue);
+            }
           }
         }
       }