Adding subtitles in react native video - react-native

Question

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

Answer 1

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"
}]