ReactPlayer无法播放本地API流视频，原生<video>标签却正常

问题现象 #

• 原生<video>标签可正常播放API流式视频：

  <video controls src='http://localhost:3001/api/video/my_video' /> // 正常播放
  

• 使用ReactPlayer组件播放同一资源失败：

  <ReactPlayer url="http://localhost:3001/api/video/my_video" controls /> // 播放失败
  

播放效果对比 #

原生video标签播放效果：

ReactPlayer播放效果：

解决方法 #

1. 手动指定视频类型与播放状态 #

ReactPlayer自动检测视频类型可能失效，手动指定type匹配视频MIME格式，并开启playing触发播放：

<ReactPlayer
  url="http://localhost:3001/api/video/my_video"
  controls
  playing
  type="video/mp4" // 根据实际视频格式调整，如video/webm、video/ogg
/>

2. 检查API响应头配置 #

确保API返回的响应头符合要求：

• Content-Type需匹配视频实际格式（如video/mp4）
• 跨域场景需设置Access-Control-Allow-Origin为前端域名或*
• 支持Range请求需添加Accept-Ranges: bytes

3. 强制使用HTML5播放器 #

通过config参数强制ReactPlayer使用原生HTML5播放器，对齐原生<video>的兼容性：

<ReactPlayer
  url="http://localhost:3001/api/video/my_video"
  controls
  config={{
    file: {
      forceVideo: true,
      attributes: { controls: true }
    }
  }}
/>

4. 验证视频编码兼容性 #

确认视频的编码（如H.264）和容器格式（如MP4）在ReactPlayer支持范围内，部分小众格式可能仅原生<video>兼容。

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