HTML5音视频自动播放需用户手势触发，主流浏览器禁止无感启动；推荐静音预加载+首次点击开声，iOS需额外“静默激活”音频元素，避免display:none、scroll/mousemove触发等无效做法。
HTML5 中的自动播放策略本身不允许“无感触发”——所有主流浏览器（Chrome、Safari、Firefox、Edge）都强制要求：带声音的音视频必须由明确的用户手势（如点击、触摸、按键）启动，且该手势必须直接关联到 play() 调用。所谓“无感”，其实是通过合理设计交互流程，让用户操作自然、轻量、不打断体验，从而在视觉和操作上接近“自动”。关键不是绕过限制，而是合规地利用它。
静音预加载 + 首次点击即开声
这是最常用也最稳妥的路径。页面加载时就让视频/音频静音自动播放（或至少完成元数据加载），等用户第一次点击（任意可点击区域），立即取消静音并继续播放。
- HTML 中写：
<video src="demo.mp4" autoplay muted playsinline webkit-playsinline controls></video> - JS 监听首次点击（全局一次即可）：
document.body.addEventListener('click', handleFirstPlay, { once: true }); - 在
handleFirstPlay中检查video.readyState >= 2，然后执行：video.muted = false; video.play().catch(e => console.warn("开声失败", e)); - 注意：muted 切换和 play() 必须在同一事件回调中紧邻调用，不能拆开，也不能放进 setTimeout 或 Promise.then
iOS 设备需额外“静默激活”音频元素
iOS Safari 对 <audio></audio> 更严格，即使加了 muted 和 autoplay，首次播放也可能失败。解决方案是在用户首次交互时，对每个音频元素做一次“触发-暂停”操作：
- 在 click/touchstart 回调里，遍历所有 audio 元素，逐一调用：
audio.play().then(() => audio.pause()); - 这个动作不会发出声音（因立即暂停），但能让 iOS 认为该元素已被用户“授权”，后续任意时刻调用
audio.play()都会成功 - 适合背景音乐、提示音等需要后期动态触发的场景
避免常见失效陷阱
很多“看似合理”的写法实际无效，容易白忙一场：
立即学习“前端免费学习笔记（深入）”；
- 只写
autoplay不加muted：所有现代浏览器都会忽略，视频卡在首帧，控制台可能无报错 - 用
video.muted = trueJS 动态设置再调用play()：Safari 多数版本不认，必须是 HTML 属性muted - 视频被
display: none或visibility: hidden隐藏：即使属性齐全也无法 autoplay - 监听
scroll或mousemove触发播放：这些不算有效用户手势，Chrome/Safari 一律拒绝 - 微信 Android（X5 内核）等 WebView：策略更严，建议默认隐藏 controls，用自定义按钮引导点击
判断是否真正播起来，别只看控制台
播放是否成功，不能只依赖 .catch()——有些失败是静默的。可靠判断方式是：
- 调用
play()后立即检查：!video.paused && video.readyState >= 2 - 或者监听
playing事件（比play更准，表示已开始解码渲染） - 若失败，及时显示一个轻量提示，比如底部浮动文字：“点一下开启声音”，而不是让用户干等
