Safari浏览器中HTML5视频无法播放问题求助

Safari完全支持HTML5 <video>标签，你的问题并非浏览器不支持，而是视频编码、服务器配置或文件本身存在兼容性问题，以下是具体排查和解决步骤：

1. 严格检查视频编码参数 #

Safari对H.264视频的参数有硬性要求，不符合的话会无法加载：

• 视频编码必须是Baseline或Main Profile，Level不超过4.1（High Profile在部分Safari版本中可能不兼容）
• 音频编码必须是AAC-LC（不能用MP3等其他音频编码）
• 用FFmpeg命令快速检查视频参数：

  ffmpeg -i myvideo.mp4
  

  查看输出中Stream #0:0（视频流）和Stream #0:1（音频流）的编码信息，确认符合要求。

2. 重新编码视频（最稳妥的解决方式） #

如果参数不符合，用FFmpeg重新编码成Safari兼容的格式，示例命令：

ffmpeg -i input.mp4 -c:v libx264 -profile:v main -level 4.1 -c:a aac -b:a 128k output.mp4

如果用QuickTime导出，选择「iPhone/iPad」或「Mac」预设，不要自定义编码参数，避免踩坑。

3. 配置服务器正确的MIME类型 #

很多服务器默认会把.mp4文件的Content-Type设为application/octet-stream，Safari会拒绝加载，需要修改配置：

• Nginx：在站点配置中添加：

  location ~* \.mp4$ {
    types {
      video/mp4 mp4;
    }
  }
  

• Apache：在.htaccess文件中添加：

  AddType video/mp4 .mp4
  

4. 检查视频文件完整性与布局 #

• 用VLC或QuickTime打开视频，确认文件本身没有损坏
• 在<video>标签中显式添加width和height属性，避免Safari布局异常导致的加载问题：

  <video controls playsinline width="640" height="360">
    <source src="myvideo.mp4" type="video/mp4">
  </video>
  

5. 捕获错误信息定位问题 #

添加错误监听脚本，查看浏览器控制台的具体错误，帮助定位根因：

<video controls playsinline>
  <source src="myvideo.mp4" type="video/mp4">
</video>
<script>
  document.querySelector('video').addEventListener('error', (e) => {
    console.error('视频加载错误:', e.target.error);
  });
</script>

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