muted 属性是浏览器允许 autoplay 的必要条件，必须作为布尔属性直接写在 HTML 标签中，且需与 autoplay 同时存在；动态设置、blob URL 未就绪、缺少 playsinline 或服务端缺失 Accept-Ranges 均会导致失败。
muted 属性本身不能“实现”自动播放，它只是现代浏览器放行 autoplay 的必要通行证——没它，autoplay 在 Chrome、Safari、Edge 等主流环境基本等于摆设。
为什么只加 muted 还是播不了
浏览器检查的是元素初始状态，不是运行时状态。常见失败场景包括：
-
muted是用 JS 动态设置的（比如video.muted = true），哪怕在DOMContentLoaded里执行，也大概率被拒绝 -
src指向 blob URL 或尚未 resolve 的动态地址，play()调用时元数据都还没加载，浏览器无法确认是否真静音 - 服务端响应头缺失
Accept-Ranges: bytes，部分浏览器（尤其是 Safari）会拒绝对该视频启用静音自动播放 - 视频嵌在
<iframe>里，但父页面没加allow="autoplay"
muted 必须写死在 HTML 里才有效
正确写法只有一个：把 muted 当作布尔属性直接写进标签，和 autoplay 同时存在。
<video autoplay muted playsinline preload="metadata" poster="placeholder.jpg"> <source src="bg.mp4" type="video/mp4"> </video>
注意以下几点：
立即学习“前端免费学习笔记（深入）”；
- 不要写
muted="true"或muted="muted"（XHTML 除外）；存在即生效 - 不要写
muted="false"——这会让属性失效，等价于没写 -
playsinline在 iOS 上不是可选，是刚需；否则即使静音，也可能被强制全屏并中断播放 -
preload="metadata"推荐加上，能帮浏览器更快确认音轨状态；别用preload="auto"，它可能预加载音频流，破坏静音前提
Vue/React 中怎么传 muted 才不翻车
框架里容易踩的坑是：用 state 或 props 控制 muted，结果组件挂载后才更新属性——这和 JS 动态设置一样，浏览器不认。
正确做法：
- Vue：用
v-bind:muted="true"或直接写muted（非响应式绑定），确保 SSR 或首次渲染时 DOM 已带该属性 - React：用
muted字面量属性，而不是muted={isMuted}（除非isMuted初始值就是true且永不改变） - 若必须动态控制，先确保静音播放已成功，再在用户交互（如点击按钮）后调
video.muted = false；此时浏览器已放行，后续操作自由
移动端特别要注意的兼容点
iOS Safari 对 muted 的校验最严，光有属性还不够：
- 必须同时声明
playsinline和webkit-playsinline（后者对旧版微信 WebView 仍有用） - 某些安卓 WebView 会忽略
muted，如果发现静音自动播放失败，优先检查是否用了blob:URL 且未等待canplaythrough就调play() -
volume = 0完全不能替代muted；浏览器策略只认这个明确的布尔信号，volume是音量调节，不是播放授权
真正容易被忽略的是：muted 的核心作用从来不是“让声音消失”，而是“告诉浏览器：我接受静音，现在请批准播放”。哪怕你 100ms 后就 video.muted = false，也得靠它先把 play() 的 Promise resolve 成功。
