在Next.js中使用react-player，Safari无法播放MKV/AVI的解决办法咨询

核心原因 #

Safari原生<video>元素不支持MKV、AVI这类容器格式，react-player依赖浏览器原生播放能力，所以直接播放会失败；Chrome能支持是因为它对这些格式有额外的解码适配。

可行解决办法 #

1. 转码视频为Safari兼容格式 #

这是最直接的方案，把MKV/AVI转成MP4（H.264编码）或MOV格式，这两种是Safari原生支持的标准格式。

• 用FFmpeg批量转码的命令示例：

  # MKV转MP4
  ffmpeg -i input.mkv -c:v libx264 -c:a aac output.mp4
  # AVI转MP4
  ffmpeg -i input.avi -c:v libx264 -c:a aac output.mp4
  

• 如果是用户动态上传的视频，可在后端添加转码逻辑，上传完成后自动转成兼容格式再存储。

2. 实时流媒体转码 #

如果没法提前转码所有视频，可以搭建实时转码服务，在请求视频时动态将MKV/AVI转成Safari支持的HLS格式：

• 用FFmpeg搭配Nginx搭建简单的流媒体服务，将原视频流转码后输出为HLS流。
• 在react-player中配置HLS播放支持，需要启用hls.js插件，示例代码：

  import ReactPlayer from 'react-player'
  
  function VideoPlayer({ url }) {
    const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
    const playerConfig = isSafari ? { hls: { enabled: true } } : {};
  
    return <ReactPlayer url={url} config={playerConfig} controls />
  }
  

3. 尝试无损封装转换 #

部分MKV/AVI可能本身用了Safari支持的编码（比如视频H.264、音频AAC），只是容器不兼容，这种情况可以直接修改容器而不用转码，速度更快：

• FFmpeg命令示例：

  ffmpeg -i input.mkv -c copy output.mp4
  

4. 提供格式降级选项 #

在前端检测浏览器类型，如果是Safari，提示用户下载兼容格式的视频，或者同时提供原格式和兼容格式的播放/下载选项，让用户自行选择。

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