iOS设备使用react-player无法播放DigitalOcean Spaces存储的视频

解决方案 #

1. 检查并修正视频的Content-Type配置 #

iOS Safari/Chrome对视频资源的MIME类型校验非常严格，若DigitalOcean Spaces返回的视频Content-Type为application/octet-stream这类非视频类型，会直接无法识别播放。

• 可通过curl -I 你的视频链接命令查看返回头的Content-Type字段，iPhone拍摄的MP4文件需设置为video/mp4，MOV文件需设置为video/quicktime
• 分片上传时需在完成合并的步骤手动指定Content-Type元数据，不要使用存储服务默认的二进制类型

2. 验证Range请求支持 #

iOS浏览器要求视频资源必须支持分段请求（Range请求），返回206 Partial Content状态码才能正常播放：

• 执行curl --range 0-100 你的视频链接，查看返回状态码是否为206
• DigitalOcean Spaces默认支持Range请求，若返回异常检查是否有自定义的响应头配置限制了分段请求

3. 调整ReactPlayer配置 #

强制指定HTML5原生播放器的兼容属性：

<ReactPlayer
  url="https://appname.nyc3.digitaloceanspaces.com/username/folder_id/file_id"
  playsInline
  controls
  loop
  height="100%"
  width="100%"
  // 新增以下配置适配iOS
  config={{
    file: {
      forceVideo: true,
      attributes: {
        playsInline: true
      }
    }
  }}
/>

若需要开启自动播放，需额外添加muted: true属性，iOS限制未静音的视频不允许自动触发播放。

4. 优化视频文件结构 #

iPhone原生相机拍摄的视频默认将索引信息（moov原子）放在文件末尾，浏览器需要下载完整文件才能读取索引开始播放，iOS浏览器不会等待全量下载会直接判定为无法播放：

• 上传前使用ffmpeg处理视频，将moov原子移到文件开头：
  ffmpeg -i 原视频路径 -movflags faststart 输出视频路径
• 处理后的视频再上传到DigitalOcean Spaces即可解决索引读取问题

5. 检查Content-Disposition配置 #

确认存储对象的Content-Disposition元数据设置为inline，若设置为attachment会导致浏览器直接触发下载而非播放。

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