Question

我看了一下本地的响应道具，发现他们添加了 selectedTextTrack 来支持字幕。但是，如何精确地添加它我无法编写代码。我可以添加文件（.SRT）作为字幕的输入吗？

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

所以基本上我想根据各种视频的点击来添加，如果我可以添加.srt文件，那将是很大的帮助

Answer 1

使用react-native-video-controls控件，您可以尝试使用JavaScript在视频顶部显示字幕。

要使用字幕，请遵循以下说明：首先，如果字幕格式为srt，则应将其转换为JSON（使用类似http://multiverso.me/srtToJSON/的网站），然后在获取JSON数组时，可以将该数组传递给VideoPlayer，如下所示：

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

字幕道具希望JSON具有以下键值格式：

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

在React Native Video中添加字幕

1 个答案: