autoplay不生效是因浏览器策略拦截，必须同时设置HTML属性autoplay、muted和playsinline（iOS还需webkit-playsinline），三者缺一不可，且须一次性写死在标签中。
autoplay不生效不是代码写错了，是浏览器策略在拦截
现代浏览器（Chrome、Safari、Edge、Firefox）默认禁止有声自动播放，autoplay只是个提示，不是指令。你看到黑屏、控制栏不出现、控制台没报错但没反应——大概率就是被静音策略拦了。它不报错，也不提醒，就默默停在那里。
常见错误包括：video标签只写了autoplay，没加muted；或者用 JS 动态插入后才设muted；又或者 iOS 上缺playsinline，导致点一下才播、还强跳全屏。
必须同时写死三个 HTML 属性：autoplay、muted、playsinline
这三个属性得一次性写在标签里，顺序无关，但缺一不可：
-
autoplay：声明“我想播” -
muted：告诉浏览器“我接受静音”，这是绕过策略的钥匙（写muted或muted=""都行，别写muted="true"） -
playsinline：iOS Safari 必须项，否则视频会跳出当前页面全屏，打断自动流程；老版本 iOS 还要加webkit-playsinline
最简可靠写法：
立即学习“前端免费学习笔记（深入）”；
<video autoplay muted playsinline webkit-playsinline> <source src="demo.mp4" type="video/mp4"> </video>
别依赖controls或preload来救场——它们不影响 autoplay 是否触发，preload="metadata"倒是推荐，省流量又够用。
动态切换 video.src 后 autoplay 失效，怎么补救
Vue/React 里用:src更新地址，autoplay不会重新触发——这是规范行为，不是框架 bug。
两个靠谱办法：
- 用
:key强制重建 DOM 元素，比如<video :key="srcUrl" ...>，让浏览器重走 autoplay 流程 - 监听
loadedmetadata事件再调play()，但仅对静音视频有效，且必须确保muted已在 HTML 层设置好
别在DOMContentLoaded里直接play()，99% 失败；也别在scroll或mousemove里反复调，浏览器会把它当骚扰处理。
想让用户点一下就开声音？时机和顺序不能错
静音自动播只是起点。用户点控件或按钮时，你得在同一个事件回调里完成两件事：
- 先调一次
video.play()（Safari 要求这个“激活”动作） - 再设
video.muted = false
中间不能穿插异步操作，比如setTimeout延后设muted，Safari 17+ 会中断正在播放的视频。还要.catch()捕获失败，因为部分用户可能禁了媒体权限。
微信 iOS WebView 是个例外：它几乎无视muted+autoplay组合，必须走touchstart + play()，而且只认第一次触摸。
真正容易被忽略的是：服务端返回的视频响应头必须是Content-Type: video/mp4，且不能带Content-Disposition: attachment；否则浏览器连解码都不干，更别说播了。
