移动端背景视频无法显示？求助有效解决方案

先看你代码里的几个明显问题，再给你针对性的修复方案：

• 修正autoplay属性写法：HTML里autoplay是布尔属性，只要标签里存在这个属性就会生效，你写的autoplay="on load"是错误格式，浏览器无法识别，这会导致移动端自动播放逻辑失效，直接改成autoplay即可。

• 补充MP4格式视频源：你只提供了WebM格式，虽然部分移动端浏览器支持，但MP4（H.264编码）是所有移动端浏览器兼容性最好的格式，必须添加这个源，让浏览器自动选择支持的格式。

• 去掉首屏视频的lazy loading：如果这是首屏的hero视频，loading="lazy"会延迟视频加载，移动端可能因为视频加载时机的判断逻辑而不显示，直接去掉这个属性更稳妥。

• 检查视频编码规范：确保MP4视频用H.264 Baseline（基线）编码，音频用AAC-LC编码，过高的编码级别会导致部分中低端移动设备无法解码。

• 验证CSS样式：确认.hero__video的CSS没有设置display:none、visibility:hidden，同时要设置响应式尺寸，比如：

.hero__video {
  width: 100%;
  height: auto;
  object-fit: cover; /* 保持视频比例填充满容器 */
}

修正后的代码示例：

<video class="hero__video" autoplay muted loop poster="65bf2fb45c0e8d3579f14cd9da76a2b0.jpg">
  <source src="video-banner.mp4" type="video/mp4">
  <source src="video-banner.webm" type="video/webm">
</video>

另外，移动端浏览器对自动播放的核心要求是必须静音，你已经加了muted，这个是对的，muted或muted="muted"两种写法都有效，前者更简洁。

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