HTML video标签在Safari无法播放，Chrome正常，求排查方案

核心问题分析 #

你的视频源格式不兼容Safari：

• Safari（桌面/移动端）不支持WebM和OGG格式，仅原生兼容MP4（H.264视频编码 + AAC音频编码）文件。
• 你的WebM路径存在错误：/css/images/hero-video-webm缺少.webm后缀，浏览器无法识别文件类型。

修复方案 #

1. 添加MP4格式视频源：将MP4的<source>放在最前面（浏览器会优先加载第一个支持的格式），这是Safari播放视频的必要条件。
2. 修正WebM文件路径：补充.webm后缀，确保文件能被正确加载。
3. 优化属性配置：保留playsinline（移动端Safari需要它实现页面内播放，而非强制全屏），muted和loop按需保留；preload建议指定具体值（如preload="metadata"），避免跨浏览器行为差异。

修改后的代码 #

<video controls muted playsinline loop preload="metadata">
  <source src="/css/images/hero-video.mp4" type="video/mp4">
  <source src="/css/images/hero-video.webm" type="video/webm">
  <source src="http://techslides.com/demos/sample-videos/small.ogv" type="video/ogg">
  Your browser does not support the video tag.
</video>

额外验证要点 #

• 确认MP4视频编码为H.264（Baseline/Main/High profile） + AAC-LC音频，这是Safari的标准兼容编码。
• 检查服务器是否返回正确的MIME类型：MP4对应video/mp4，WebM对应video/webm，OGG对应video/ogg，错误的MIME类型也会导致播放失败。

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