HTML/CSS 移动端video的autoplay自动播放偶发失效问题求助

1. 修正video标签属性写法 #

你当前的属性存在冗余和不规范问题，布尔属性不需要额外赋值，且defaultmuted优先级低于muted，部分移动端浏览器对属性赋值写法识别不稳定，修正后的标签参考如下：

<video class="bg-video" src="video/bye.mp4"
  autoplay loop muted playsinline poster="images/bg-2.jpg"> </video>

直接保留muted替代defaultmuted，确保浏览器可以稳定识别视频的静音状态。

2. 排查资源加载时序问题 #

偶发失效大概率是资源加载时序导致：首次访问时视频资源未完成预加载，浏览器执行自动播放判断时无法确认视频满足播放条件，刷新后资源命中本地缓存，加载速度提升后就可以正常播放。
解决方案是通过JS手动触发播放，监听视频加载完成事件后主动调用播放方法，同时捕获播放异常：

const video = document.querySelector('.bg-video');
// 确保DOM元素加载完成后执行逻辑
document.addEventListener('DOMContentLoaded', () => {
  // 强制设置静音，避免部分浏览器识别不到HTML属性
  video.muted = true;
  const playPromise = video.play();
  if (playPromise !== undefined) {
    playPromise.catch(err => {
      // 首次播放失败时，等待视频完全可播放后再次尝试
      video.addEventListener('canplaythrough', () => {
        video.play();
      }, { once: true });
    });
  }
});

3. 排查移动端浏览器特殊限制 #

部分移动端浏览器在以下场景会限制自动播放，可逐一验证：

• 设备处于低电量/省电模式时，部分厂商会禁用视频自动播放以降低功耗
• 域名首次被用户访问时，部分浏览器会设置临时的自动播放限制，第二次访问（刷新后）就会放行
• 视频编码不符合移动端要求：确认你的MP4文件采用H.264视频编码、AAC音频编码，码率不要过高，避免浏览器解码失败导致播放中断

4. 兜底兼容方案 #

如果以上排查都无法解决极端场景的失效问题，可以在页面上添加一个轻量的用户交互触发点（比如全屏引导按钮），用户点击后强制触发播放，用户交互触发的播放不受任何浏览器自动播放策略限制，可以保证100%生效。

内容的提问来源于stack exchange，提问作者J.DD