React Native Video中iOS带textTracks的HLS视频无法播放问题

问题现象 #

• iOS：配置textTracks后HLS(.m3u8)视频无法加载，移除该配置后播放正常
• Android：视频可正常播放，但textTracks指定的字幕无法显示

解决方案 #

iOS端修复 #

iOS原生播放器加载外部字幕时容易和HLS流加载冲突，试试这几个方法：

1. 延迟加载字幕：等视频加载完成后再设置textTracks，避免资源竞争

   onLoad = () => {
     this.setState({ showTextTracks: true });
   };
   
   <Video
     // 保留原有其他属性
     textTracks={this.state.showTextTracks ? [
       {
         index: 0,
         title: "English CC",
         language: "en-us",
         type: TextTrackType.VTT,
         uri: 'https://d2tvoqe2tsxhc6.cloudfront.net/Video1-testsample64.vtt'
       }
     ] : []}
   />
   

2. 检查字幕文件：确认VTT文件是UTF-8编码，格式无语法错误
3. 改用内嵌字幕：如果能修改HLS流，把字幕内嵌到m3u8文件中，避免外部加载冲突

Android端修复 #

Android字幕不显示通常和配置或权限有关，调整以下几点：

1. 确认字幕可访问：检查Android设备能正常获取VTT文件（确保网络权限、服务器CORS配置正常）
2. 修改字幕类型为字符串：部分设备不支持枚举类型，直接用"text/vtt"代替TextTrackType.VTT

   textTracks={[
     {
       index: 0,
       title: "English CC",
       language: "en-us",
       type: "text/vtt",
       uri: 'https://d2tvoqe2tsxhc6.cloudfront.net/Video1-testsample64.vtt'
     }
   ]}
   

3. 修正selectedTextTrack配置：确保type和value对应字幕的实际字段

   selectedTextTrack={{
     type: "title", // 可选"language"
     value: "English CC" // 对应字幕的title或language值
   }}
   

4. 添加网络权限：在AndroidManifest.xml里加上网络权限

   <uses-permission android:name="android.permission.INTERNET" />
   

通用提醒 #

• 尽量用最新稳定版的react-native-video，旧版本可能有兼容bug
• 优先用真机测试，部分模拟器对字幕渲染支持不好

内容的提问来源于stack exchange，提问作者Apps Tek