HTML5自动播放需静音前提+用户交互触发：必须写autoplay muted属性，移动端加playsinline和webkit-playsinline；有声播放须在click/touchstart中同步执行muted=false和play()，并监听playing事件确认成功。
HTML5 自动播放不是“写上 autoplay 就能播”，而是必须按浏览器策略分步适配。合规的关键不是绕过，而是顺应规则：先静音自动启播，再借用户真实交互开启声音。强行跳过限制不仅失败率高，还可能被标记为干扰行为。
静音是自动播放的硬性前提
所有主流浏览器（Chrome ≥66、Safari ≥11、Firefox、Edge）都要求视频必须静音才能触发自动播放。仅加 autoplay 属性无效，必须同时声明 muted 为 HTML 属性（不是 JS 动态赋值）：
-
✅ 可靠起点 -
❌ 静默失败，控制台无报错 -
video.muted = true⚠️ Safari 多数版本不识别，无法激活 autoplay
移动端必须加内联播放属性
iOS Safari 默认强制全屏，Android Chrome 也依赖内联属性保持布局稳定：
- 必须写
playsinline（标准属性） - 必须并存
webkit-playsinline（iOS 10–12 兼容必需） - 二者须直接写在
标签中，CSS 或 JS 补设无效 - 若视频初始被
display: none或visibility: hidden隐藏，即使属性齐全也会失败
有声播放只能由用户手势触发
想最终带声音播放？必须分两步走，且严格满足时序和上下文：
- 监听
click或touchstart（iOS Safari 对touchend支持不稳定） - 在同一个事件回调里紧邻执行：
video.muted = false和video.play() - 不能包裹在
setTimeout、Promise.then或异步加载钩子中 - 调用前建议检查
video.readyState >= 2，避免因元数据未加载而失败 - 务必捕获
.play().catch(e => console.warn("播放被拒", e))，用于降级提示
如何判断是否真成功播放
别只看控制台——很多失败是静默的。可靠判断方式：
- 调用
play()后立即检查：!video.paused && video.readyState >= 2 - 监听
playing事件比监听play更准，它表示真正开始渲染帧 - 若失败，及时显示“点击播放”按钮或轻量提示，别让用户干等
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
