react-player video captions with .srt file

Question

I have a React/Typescript project with Next js

There is a modal feature that uses 'react-player' to show a video. I've got the video and modal working, but I want to add captions with a .srt file.

Here are the relevant snippets:

From the video player component (simplified for demonstration):

const videoConfig = {
    file: {
      tracks: [
        {
          kind: "subtitles",
          src: "./videos/test_captions.srt",
          srcLang: "en",
          label: "English",
          default: true,
        },
      ],
    },
  };

...
//component markup for styling, ReactPlayer is wrapped in a container
<ReactPlayer
    url={videoUrl}
    controls={true}
    width="100%"
    height="100%"
    playing={true}
    muted={true} //temporary fix since videos with audio don't autoplay on most browsers
    config={videoConfig}
/>

This is the srt file, which is located in public/videos (am just using this for testing):

1
00:00:01,000 --> 00:00:03,000
Hello world, this is a test.

2
00:00:04,000 --> 00:00:06,000
If you can read these captions...

3
00:00:07,000 --> 00:00:09,000
Then the SRT file works!

I've tried several browsers, but no luck. What am I doing wrong here? In dev tools under the Network tab I can see the srt file referenced, and it gives a status code of 200. So it's finding the correct file, but no subtitles are appearing over the video.

Edited to add: In the network tab, the srt file appears 3 times. There are 2 instances shown with a status code 200, and 1 with a status code of 307 Internal Redirect

Answer 1

try add config "attributes: { crossOrigin: 'true' }", OR "attributes: { crossOrigin: 'anonymous' }', inside config "file"