ReactPlayer字幕不显示求助：配置轨道后Chrome中仍无法加载

针对你遇到的ReactPlayer字幕无法显示、请求被blocked:origin拦截的问题，结合你的配置和使用版本，我整理了几个关键排查点和解决方案：

1. 修正crossOrigin属性的有效值 #

你当前配置的crossOrigin: 'true'是无效的——原生video元素的crossOrigin属性仅接受'anonymous'或'use-credentials'两个字符串值，浏览器会忽略'true'这类错误取值，导致跨域问题依然存在。

建议根据你的场景修改：

• 如果字幕资源不需要携带Cookie等凭证，使用'anonymous'
• 如果需要凭证（比如字幕放在需要登录的域名下），使用'use-credentials'

2. 确认字幕文件的路径与格式 #

• 检查字幕路径是否正确：确保subs/mySubtitle指向的文件存在，建议加上明确的文件后缀（比如.vtt或.srt），浏览器需要识别格式才能解析字幕。
• 优先使用WebVTT格式（.vtt）：这是浏览器对原生track元素支持最好的字幕格式，SRT格式部分浏览器需要额外处理，可能存在兼容性问题。

3. 考虑ReactPlayer版本的兼容性 #

你使用的react-player@0.25.3是比较老旧的版本，这个版本的track配置可能存在已知bug。由于你的React版本是v16.2.0，可以升级到兼容的ReactPlayer 1.x分支（比如v1.15.2），该分支修复了不少字幕相关的问题，同时兼容React 16.x。

升级命令：

npm install react-player@1.15.2

4. 验证服务器CORS配置 #

如果视频和字幕资源来自不同域名/端口，需要确保字幕所在服务器配置了正确的CORS响应头：

• 允许你的页面域名访问：添加Access-Control-Allow-Origin: 你的页面域名（或*允许所有域名）
• 如果使用use-credentials，还需要添加Access-Control-Allow-Credentials: true

修改后的示例代码 #

<ReactPlayer 
  url='video/myVideo' 
  className="myClass" 
  config={{ 
    file: { 
      attributes: { 
        crossOrigin: 'anonymous' // 修正为有效值
      }, 
      tracks: [ 
        {
          kind: 'subtitles', 
          src: 'subs/mySubtitle.vtt', // 补充文件后缀
          srcLang: 'en', 
          default: true
        } 
      ] 
    } 
  }} 
/>

测试验证步骤 #

修改配置后重启项目，打开Chrome开发者工具：

1. 查看网络面板，确认字幕请求的状态码为200，不再出现跨域拦截
2. 查看元素面板，检查video标签下是否生成了正确的<track>元素，属性与配置一致

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