fix(video-js): add captions after player is ready

ubilabs · Jul 2, 2024 · a9b0802 · a9b0802
1 parent 61d08a2
commit a9b0802
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 10 deletions.
diff --git a/src/scripts/components/stories/video-js/video-js.module.styl b/src/scripts/components/stories/video-js/video-js.module.styl
@@ -4,7 +4,7 @@
   height: 100%
 
 :global(.vjs_video_3-dimensions.vjs-fluid)
-  padding-top: 0
+  padding-top: 0 !important
 
 :global(.vjs-text-track-cue)
   display: flex

diff --git a/src/scripts/components/stories/video-js/video-js.tsx b/src/scripts/components/stories/video-js/video-js.tsx
@@ -53,14 +53,6 @@ const VideoJS: FunctionComponent<Props> = ({
         src: videoUrl,
         type: 'video/mp4'
       }
-    ],
-    tracks: [
-      {
-        srclang: language,
-        kind: 'captions',
-        src: getCaptionUrl(),
-        default: true
-      }
     ]
   };
 
@@ -77,6 +69,17 @@ const VideoJS: FunctionComponent<Props> = ({
   // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#attr-media
   // takes the provided video file name and selects a resolution based on media queries
   const handlePlayerReady = (player: VideoJsPlayer) => {
+    // Caption needs to be added after player is ready
+    player?.addRemoteTextTrack(
+      {
+        kind: 'captions',
+        src: getCaptionUrl(),
+        srclang: language,
+        label: language
+      },
+      true
+    );
+
     playerRef.current = player;
 
     const mobile = window.matchMedia('(max-width: 480px)');
@@ -129,7 +132,7 @@ const VideoJS: FunctionComponent<Props> = ({
         ref={videoRef}
         className="video-js vjs-big-play-centered"
         style={{height: '100%'}}
-        onPlay={event => onPlay((event.target as unknown) as VideoJsPlayer)}
+        onPlay={event => onPlay(event.target as unknown as VideoJsPlayer)}
       />
     </div>
   );