index.html如何设置自动播放视频？

现代浏览器默认禁止有声视频自动播放，必须同时添加 muted、autoplay、playsinline 和 loop 属性，并在用户交互后调用 play()，配合 visibilitychange 事件续播。

video 标签加 autoplay 属性不生效？先看浏览器策略

现代浏览器（Chrome、Edge、Safari、Firefox）默认禁止有声音的视频自动播放，哪怕写了 autoplay 也大概率静音失败或直接暂停。这不是代码写错了，是策略限制——只有满足「无音频」或「用户已与页面交互过」才可能触发。

实操建议：

立即学习“前端免费学习笔记（深入）”；

• 必须同时加 mute 和 autoplay：<video autoplay muted loop></video>
• 如果视频本身带音频轨道但你没加 muted，Chrome 会静音并暂停播放，控制台可能报 DOMException: play() failed because the user didn't interact with the document first
• Safari 还额外要求 playsinline（尤其 iOS），否则可能全屏跳转后卡住

用 JavaScript 调用 play() 时为什么报错？

直接在 DOMContentLoaded 或 load 里调 video.play() 会失败，因为此时用户还没触发任何手势（click/touchstart）。浏览器把「自动播放权限」和「用户激活状态」绑定。

实操建议：

立即学习“前端免费学习笔记（深入）”；

• 把 play() 绑在用户第一次点击/触摸事件里，比如给一个按钮加 onclick="document.querySelector('video').play()"
• 如果想“伪自动”（比如页面加载完 1 秒后尝试），仍需确保此前已有用户交互；否则 Promise 会 reject，错误信息类似 Uncaught (in promise) DOMException: play() failed
• 务必 catch 错误：

  video.play().catch(e => console.warn('Autoplay prevented:', e))

如何让视频真正“静音自动播”，且兼容移动端？

移动端限制更严，iOS Safari 尤其敏感。只靠属性不够，得组合处理。

实操建议：

立即学习“前端免费学习笔记（深入）”；

• HTML 中必须包含：autoplay、muted、playsinline、loop（loop 可提升成功率）
• JS 补充兜底（防部分安卓 WebView）：

  const v = document.querySelector('video');v.muted = true;v.play().catch(() => v.load()); // load() 触发重新加载+准备播放

• 避免设置 volume=0 替代 muted —— volume 可被用户调回，而 muted 是硬性静音开关，浏览器认这个

后台标签页切换回来时视频停了，怎么续播？

Chrome 等浏览器在标签页不可见时会 suspend 视频，切回来不会自动恢复。这不是 bug，是节电策略。

实操建议：

立即学习“前端免费学习笔记（深入）”；

• 监听 visibilitychange 事件：

  document.addEventListener('visibilitychange', () => {  if (!document.hidden && video.paused) video.play();});

• 注意：再次调 play() 仍可能被拒，所以最好配合 muted + 用户已激活的状态（比如之前点过页面）
• 不要在 pageshow 里无条件 play —— 它在前进/后退时也会触发，但此时用户未必希望视频重播

自动播放的核心不是“加个属性就行”，而是理解浏览器对媒体行为的权限分级：muted 是通行证，用户交互是钥匙，visibilitychange 是补丁。漏掉任意一环，都可能在某个设备或版本上突然失效。