网页背景视频在移动端尤其是iPhone设备无法正常播放的问题咨询

核心排查点 #

• 检查属性放置位置：你当前代码将loop属性写在了<source>标签上，实际上loop、autoplay、muted、playsinline这类控制播放行为的属性，必须挂载在外层<video>标签上，<source>标签仅负责定义视频资源的地址、格式等基础信息。
• 检查视频编码规范：iPhone Safari仅兼容H.264编码的MP4文件，确认你的watch.mp4没有使用H.265/HEVC或其他非兼容编码，同时视频分辨率、码率不要超出移动端浏览器适配上限。
• 检查静音属性配置：iOS Safari出于流量和用户体验限制，禁止非静音视频自动播放，要实现背景自动播放必须给<video>添加muted属性。
• 检查行内播放属性配置：iPhone Safari默认点击视频会唤起全屏播放器，要实现页面内作为背景嵌入播放，必须添加playsinline属性。

修复后的可用代码示例 #

<video id="video" loop muted autoplay playsinline webkit-playsinline>
    <source id="vid" src="assets/img/watch.mp4" type="video/mp4">
</video>

其中webkit-playsinline是适配旧版本iOS Safari的兼容属性，添加后兼容覆盖范围更广。

兜底适配方案 #

• 给<video>标签添加poster属性配置视频封面图，作为极端场景下视频加载失败的兜底展示，避免页面出现空白区域。
• 可通过JS监听视频加载失败事件，触发时主动切换为背景图展示：

const video = document.getElementById('video');
video.addEventListener('error', () => {
  video.style.display = 'none';
  // 替换为你的背景图地址即可
  document.body.style.backgroundImage = 'url(assets/img/video-fallback.jpg)';
})

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