现代浏览器默认禁止无用户交互的有声自动播放，需同时设置autoplay、muted、playsinline三属性才能兼容生效；javascript调用play()须在用户交互后且readystate≥2时执行并捕获错误。
video 标签加 autoplay 属性为什么经常不生效
现代浏览器（Chrome、Firefox、Safari、Edge）默认禁止无用户交互触发的自动播放，尤其是带声音的视频。单纯写 <video autoplay></video> 很可能被静音拦截或直接暂停——这不是你的代码写错了，而是浏览器策略。
关键限制点：有音频轨道 + 未静音 + 无用户手势（如点击） 时，autoplay 大概率失败。
- Chrome 要求视频满足
muted+autoplay才允许启动 - Safari 对
autoplay更严格，甚至要求playsinline（防止全屏跳转） - 移动端 iOS Safari 默认禁用所有自动播放，除非明确静音且内联
必须同时设置的三个属性：autoplay、muted、playsinline
这是目前兼容性最广的最小可行组合。缺一不可，尤其 muted 不是可选，是强制条件。
<video autoplay muted playsinline><source src="video.mp4" type="video/mp4"></source></video>
说明：
-
autoplay：声明意图，但不保证执行 -
muted：绕过“有声自动播放”策略，浏览器才放行 -
playsinline：iOS/Safari 必需，否则视频会强制跳转全屏，导致播放中断
用 JavaScript 主动调用 play() 的时机和陷阱
如果必须在 DOM 加载完成后触发（比如等封面图加载完再播），不能在 DOMContentLoaded 或 window.onload 里直接调 video.play() —— 此时用户还没任何交互，多数浏览器仍拒绝。
更稳妥的做法是：等用户首次交互（哪怕只是滚动、点击空白处）后，再调用 play()。例如：
let hasInteracted = false;
document.addEventListener('click', () => { hasInteracted = true; }, { once: true });
document.addEventListener('scroll', () => { hasInteracted = true; }, { once: true });
// 后续某个时机（如页面就绪后 500ms）
setTimeout(() => {
if (hasInteracted && video.readyState >= 2) {
video.play().catch(e => console.log('自动播放被拒:', e));
}
}, 500);
注意点：
-
video.play()返回 Promise，必须catch错误，否则静默失败 -
readyState >= 2表示至少已有第一帧可播，避免play()报InvalidStateError - 不要依赖
load事件，它只表示资源加载完成，不保证解码就绪
服务端或构建时的隐性影响：MIME 类型和视频编码
即使前端写对了，视频仍不播？检查响应头和编码格式：
- 确保服务器返回正确的
Content-Type: video/mp4（不是application/octet-stream） - 推荐用 H.264 + AAC 编码，MP4 容器；避免 VP9/WebM 在旧版 Safari 上不支持
- 使用
ffmpeg检查并重编码：ffmpeg -i input.mov -c:v libx264 -c:a aac -movflags +faststart output.mp4（+faststart让 moov box 提前，利于首帧快速加载）
这些细节不会报错，但会导致 readyState 停在 0 或 1，play() 直接 reject。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
