HTML视频在Safari浏览器无法播放，Chrome/Firefox可正常运行

我帮你梳理下Safari不播放视频的核心原因，以及对应的修复方案：

1. Safari的Autoplay限制是头号坑 #

Safari（不管是桌面端还是iOS端）对自动播放的规则比Chrome/Firefox严格太多，默认要求静音状态的视频才能触发自动播放，而且iOS上还得加playsinline属性，不然会强制全屏播放，导致看起来像是“无法播放”。

你原代码里正好缺了muted和playsinline这两个关键属性，这大概率是核心问题。

2. 视频编码格式必须符合Safari标准 #

Safari对MP4的编码有明确要求，不符合的话直接无法识别：

• 视频轨道必须是H.264编码（Baseline、Main或High Profile都可以）
• 音频轨道必须是AAC-LC格式

如果你的视频用了HEVC这类新编码，Safari就会直接忽略。可以用FFmpeg转码修复，给你个示例命令：

ffmpeg -i "web home page banner.mp4" -c:v libx264 -profile:v main -c:a aac -b:a 128k "banner-compatible.mp4"

3. Source标签的Media属性兼容性差 #

Safari对<source>标签上的media属性支持不稳定，经常出现不识别媒体查询的情况。建议改用JavaScript来根据屏幕尺寸切换视频源，替代原生media属性的逻辑：

function switchVideoSource() {
  const video = document.getElementById('v-control');
  const isMobile = window.innerWidth <= 480;
  if (isMobile) {
    video.src = 'assets/img/web home page banner.mp4';
    video.type = 'video/mp4';
  } else {
    video.src = 'video.webm'; // 也可以替换成对应尺寸的MP4源
    video.type = 'video/webm';
  }
}

// 页面加载时初始化
window.addEventListener('load', switchVideoSource);
// 窗口大小变化时更新
window.addEventListener('resize', switchVideoSource);

修复后的完整示例代码 #

<video id="v-control" width="100%" autoplay loop muted playsinline>
  <source src="assets/img/web home page banner.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
</video>

额外排查小技巧 #

• 先确认视频路径是否正确，Safari对相对路径的解析和Chrome有细微差异，用绝对路径测试下更稳妥
• 检查服务器是否返回了正确的MIME类型（MP4对应video/mp4，WebM对应video/webm），有些服务器配置不当会导致Safari无法识别视频类型

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