video标签不自动播放的主因是浏览器默认禁止有声自动播放，必须同时设置autoplay和muted属性，且Safari等还需用户首次交互；此外需确保MIME类型正确、编码兼容（H.264+AAC）、无跨域问题及路径编码规范。
video 标签不自动播放的常见原因
浏览器默认禁止自动播放带声音的视频，这是最常被忽略的底层规则。哪怕 <video> 标签写得完全正确，只要没满足静音或用户交互前提，autoplay 就会静默失效。
-
autoplay必须搭配muted才能在大多数现代浏览器（Chrome、Edge、Safari）中生效 - Safari 对
autoplay要求更严：即使muted，首次访问页面也常需用户点击后才允许后续自动播放 - 部分安卓 WebView 或旧版 iOS 会忽略
autoplay，无论是否静音
HTML video 标签必须包含的属性组合
仅写 <video src="xxx.mp4"></video> 几乎一定不播。最小可用结构需明确控制行为：
- 必须有
src或<source>指向可访问的媒体文件（检查浏览器开发者工具 Network 面板是否 200） - 要自动播放，必须同时写
autoplay和muted—— 缺一不可 - 建议加上
playsinline（iOS Safari 必需），否则视频可能全屏打开再播放 - 加
controls可快速验证视频源是否有效：能手动点播放，说明路径和编码没问题
正确示例：
<video autoplay muted playsinline controls><br> <source src="demo.mp4" type="video/mp4"><br></video>
video 不播放但控制条显示的典型问题
画面黑、无声音、进度条不动，但能看到播放按钮和时间轴——这通常不是 HTML 写法错误，而是媒体层问题：
立即学习“前端免费学习笔记（深入）”；
- 服务器未正确配置 MIME 类型：MP4 文件需返回
video/mp4，Nginx/Apache 需单独配置 - 视频编码不兼容：H.264 + AAC 是最稳妥组合；用 HEVC（H.265）或 AV1 编码时，Chrome 或 Firefox 可能解码失败
- 跨域限制：若
src是外链，且服务端未设置Access-Control-Allow-Origin，video会加载失败（控制台报 CORS 错误） - 路径含中文或空格未编码：如
src="视频.mp4"应改为src="%E8%A7%86%E9%A2%91.mp4"
JavaScript 主动触发播放失败的处理方式
用 video.play() 报错 DOMException: play() failed because the user didn't interact with the document first，说明浏览器策略拦截。绕过方法有限且需谨慎：
- 只能在用户真实交互（click/touchstart）回调中调用
play()，不能延时或放 setTimeout 里 - 首次调用失败后，再次调用仍会失败，除非用户重新触发交互
- 可监听
canplay或loadedmetadata事件，但不能代替用户手势授权 - 静音视频（
muted=true）在部分场景下允许非交互调用play()，但不保证所有浏览器一致
真正稳定的做法是：把自动播放降级为“用户点击即播”，并在按钮上明确提示“点击播放”，而不是强行绕过策略。
