现代浏览器默认屏蔽非静音、无用户交互的自动播放，需同时满足muted、playsinline（iOS）、正确type与编码等条件，并在用户交互事件中调用play()且捕获异常。
加了 autoplay 还不播？不是代码写错了，是浏览器直接跳过它——现代 Chrome、Safari、Edge 默认屏蔽所有非静音、无用户交互的自动播放请求。
为什么 autoplay 属性基本失效
浏览器看到 autoplay 后不会报错，也不会触发 play()，只是安静地忽略。常见表现包括：视频卡在第一帧、video.paused 始终为 true、readyState 停在 0 或 1。
-
autoplay仅对和有效，写在其他标签上完全没用 - Chrome 66+ 要求必须同时带
muted，否则连静音自动播放都不放行 - iOS Safari 根本不认
autoplay属性，哪怕加了muted也无效，必须靠 JS 的play()调用 - 如果
初始是display: none或父容器visibility: hidden，即使属性全对也会失败
muted 必须写在 HTML 里，不能靠 JS 动态设置
浏览器检查的是元素初始状态，不是运行时状态。JS 在 DOMContentLoaded 里执行 video.muted = true 再调 play()，99% 失败。
- 正确写法：
- Vue/React 中也要确保
muted是初始 prop 或 attribute，而不是挂载后通过 state 更新 - 用
volume = 0无法绕过限制，浏览器只认muted属性是否为true - 如果
src是 blob URL 或动态生成，但还没 resolve 完就调play()，也会失败——元数据都还没加载，浏览器无法确认是否真静音
iOS Safari 必须加 playsinline，否则强制全屏
iOS 对自动播放限制最严，漏掉任一条件就等于白写。
-
playsinline是必需属性，不加就会全屏弹出；部分旧版 iOS（10–12）还需额外加webkit-playsinline -
type属性必须与实际文件格式严格匹配：.mp4 文件必须写type="video/mp4"，误标为video/webm会导致 Safari 直接跳过该 - 视频编码必须兼容 iOS：H.264（AVC）编码 + AAC 音频，容器为 MP4；可用 FFmpeg 检查或转码：
ffmpeg -i input.mp4 -c:v libx264 -profile:v baseline -level 3.0 -c:a aac -b:a 128k output_ios.mp4 - 服务端响应头必须含
Accept-Ranges: bytes，否则部分浏览器拒绝静音自动播放
JS 调用 play() 的正确时机和兜底方式
真正触发播放靠的是 JS 的 play() 方法，但它极易失败。关键不是“怎么调”，而是“什么时候调、怎么兜底”。
- 必须在用户真实交互事件（
click、touchstart）的回调中同步执行，不能包在setTimeout、Promise.then或异步加载钩子里 - 推荐监听一次
click后调用，并用{ once: true }防止重复绑定：document.addEventListener('click', () => { v.play().catch(e => console.warn("Play failed:", e)); }, { once: true }); - 调用前建议检查
video.readyState >= 2（至少已加载元数据），否则可能静默失败 - 务必用
.catch()捕获异常，常见错误信息是"The request is not allowed by the user agent" - 避免在
scroll或mousemove里反复调play()，会触发浏览器保护机制
最容易被忽略的是：即使所有属性都写对、JS 调用时机也正确，首次访问页面时若视频响应头含 Content-Disposition: attachment，依然会失败——服务器必须返回 Content-Type: video/mp4 且不含下载头。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
