浏览器静音策略要求 video.play() 必须由用户手势同步触发，禁止异步调用；需设置 preload="metadata"、playsinline 等属性，并避免防抖/节流封装播放逻辑。
点击按钮触发 play() 方法失败
直接调用 video.play() 被浏览器静音策略拦截，是 90% 的新手卡点。现代浏览器（Chrome、Edge、Firefox）要求播放操作必须由用户手势（如 click、touchstart）同步触发，且不能在异步回调（如 setTimeout、Promise.then）里调用。
实操建议：
- 确保
button的onclick或事件监听器中**直接调用**video.play()，中间不经过任何异步跳转 - 视频元素需提前加载元数据：
<video preload="metadata"></video>，否则play()可能抛出DOMException: The element has no supported sources - 若视频含音频轨道，首次播放前用户必须与页面有交互（哪怕只是点击空白处），否则会静音且无法解除
autoplay 属性为何不起作用
autoplay 在多数桌面浏览器默认失效，不是 bug，是策略——它只在满足「无声音」或「用户已允许自动播放」时才生效。强行加 autoplay muted 是常见解法，但仅适用于不需要音频的场景。
实操建议：
- 需要带声播放？放弃
autoplay，老老实实用按钮触发 - 加
muted后可启用autoplay，但注意：iOS Safari 仍可能忽略，需额外监听canplay后手动play() - 不要依赖
autoplay做关键逻辑（如初始化 UI），它不可靠
按钮点击后黑屏或报错 NotAllowedError
错误信息 DOMException: play() failed because the user didn't interact with the document first 表明播放请求未绑定到有效用户手势上下文。常见于 Vue/React 等框架中事件被封装、或使用了防抖/节流函数。
实操建议：
- 检查是否用了
debounce或throttle包裹播放逻辑——它们会把同步手势变成异步调用，直接废掉 - React 中避免在
useEffect或setState回调里调用play() - Vue 中不要在
@click.native.capture之外的钩子（如mounted）里尝试播放 - 调试时在按钮点击 handler 开头加
console.log('click triggered')，确认执行路径没被重定向
移动端 iOS Safari 的特殊处理
iOS Safari 对 play() 的限制更严：即使用户点击了，如果视频未预加载、或未设置 playsinline，仍可能黑屏或跳全屏。
实操建议：
- 必加属性：
playsinline（防止强制全屏）、webkit-playsinline（兼容旧版 iOS） - 预加载建议设为
preload="auto"，尤其当视频较小（ - 首次播放失败后，不要重试——iOS 不允许二次静默调用，应提示用户“请再点一次”
- 测试务必真机进行，模拟器行为与真实设备差异极大
最易被忽略的是：按钮和 <video></video> 必须在同一 document 上下文，iframe 或 shadow DOM 里没用户手势授权，play() 必然失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
