Adding subtitles in react native video

user_7364284 0
Viewed 6873

I went through the react-native props and come to know they added selectedTextTrack for subtitle support. But, how exactly it can be added I'm unable to write code. Can I add a file(.SRT) as input for a subtitle?

<Video
  source={{uri: ''}}
  resizeMode={this.state.resizeMode}
  style={mediaPlayerStyle.player}
  rate={this.state.rate}
  volume={this.state.volume}
  paused={this.state.paused}
  onLoad={this.onLoad}
  onProgress={this.onProgress}
  onEnd={this.onEnd}
  repeat={true}
  selectedTextTrack={{
    type: 'index',
    value: 0
  }}
  textTracks={[
    {
      index: 0,
      title: "English CC",
      language: "en",
      type: TextTrackType.VTT, // "text/vtt"
      uri: "https://bitdash-a.akamaihd.net/content/sintel/subtitles/subtitles_en.vtt"
    },
    {
      index: 1,
      title: "Spanish Subtitles",
      language: "es",
      type: TextTrackType.SRT, // "application/x-subrip"
      uri: "https://durian.blender.org/wp-content/content/subtitles/sintel_es.srt"
    }
  ]}
/>

So basically i want to add subtitles for one video in various languages, If it is .srt file that would be a great help

react-native-ios react-native
1 Answers

use react-native-video-controls that renders subtitles on top of the video using JavaScript, which you might try.

In order to use subtitles you should follow the below instructions : First if your subtitle format is srt you should convert it to JSON(use websites like : http://multiverso.me/srtToJSON/) Then when you got the array of JSONs, you can pass this array to VideoPlayer as below :

<VideoPlayer subtitle={this.props.subtitle}/>

The subtitle prop expects the JSON to have the following key-value format:

[{
   "startTime": "00:00:04,123", //hh:mm:ss,SSS
   "endTime": "00:00:05,001",
   "text": "When you convert your subtitle file, you might need to modify your JSON"
},
{
   "startTime": "00:00:08,008",
   "endTime": "00:00:09,876",
   "text": "Before passing it to the VidePlayer component"
}]
user_116481450
Related