Shaka-player视频在MacOS Safari无法播放，Chrome播放正常

核心排查点 #

• 视频编码兼容性：Safari仅支持标准H.264（Baseline/Main/High Profile）视频编码 + AAC-LC音频编码的MP4文件，Chrome支持的VP9等编码在Safari中无法播放。
  用ffmpeg快速检测编码：

  ffmpeg -i 你的视频文件.mp4
  

  查看输出里的Video:和Audio:字段，确认编码符合要求。
• 服务器响应头问题：Safari要求视频请求必须返回Accept-Ranges: bytes（支持范围请求）和正确的Content-Type: video/mp4头，缺少的话会直接拒绝加载。
• 容器格式问题：确保视频是标准MP4容器，不要是MKV、FLV等改后缀伪装的文件。
• Safari专属属性配置：
  • 代码中已添加playsInline，这个是正确的，避免自动全屏导致的播放异常；
  • 建议将预加载设置为preload="metadata"，而非auto，Safari在部分场景下会拦截auto预加载。

代码调试步骤 #

先简化代码排除逻辑干扰，测试基础播放：

<video controls playsInline preload="metadata">
  <source src={videoUrl} type="video/mp4" />
  您的浏览器不支持视频播放。
</video>

如果简化后能播放，再逐步加回onTimeUpdate等事件监听，定位是否是逻辑代码导致的播放阻塞。

快速验证方法 #

1. 直接用Safari打开本地视频文件，若能播放则问题出在服务器或网络层；若不能播放，说明视频本身编码/容器不兼容。
2. 打开Safari开发者工具（快捷键CMD+OPT+I），切换到「网络」标签，查看视频请求的状态码和响应头，排查是否存在4xx/5xx错误或响应头缺失。

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