CODEWITHSUNDEEP
reactjstypescriptreact-playersrt
dcmswim
dcmswim

Reputation: 140

react-player video captions with .srt file

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

Upvotes: 0

Views: 2180

Answers (2)

Vishal Sharma
Vishal Sharma

Reputation: 101

I think the browser has better support for .vtt files. I was also facing issue for adding subtitle to an .mp4 video (taken from another free 3rd party api) using ReactPlayer. I tried lot of different configurations but it was not working with .srt file.

You can just add WEBVTT on the top of the file and change the extension to .vtt, it should work.

Sample srt file

1
00:00:00.000 --> 00:00:05.000
<span style="font-size: 24px; color: #000000;">Welcome to the OpenAI Subtitle Example</span>

2
00:00:05.500 --> 00:00:10.000
<span style="font-size: 24px; color: #000000;">This is a sample WebVTT file for demonstration purposes</span>

Sample VTT File format

WEBVTT

1
00:00:00.000 --> 00:00:05.000
<span style="font-size: 24px; color: #000000;">Welcome to the OpenAI Subtitle Example</span>

2
00:00:05.500 --> 00:00:10.000
<span style="font-size: 24px; color: #000000;">This is a sample WebVTT file for demonstration purposes</span>

Also you have to first import the .vtt like below and give that to the configuration

import sampleSubtitleVttFormat from './sample-subtitle.vtt';


const videoConfig = {
    file: {
      tracks: [
        {
          kind: "subtitles",
          src: sampleSubtitleVttFormat,
          srcLang: "en",
          label: "English",
          default: true,
        },
      ],
    },
  };

Upvotes: 0

Datist
Datist

Reputation: 1

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

Upvotes: 0

Related Questions