必须在html初始解析时声明muted布尔属性，动态设置无效；ios需额外添加playsinline、确保元素可见且响应头合规；volume=0不等价于muted=true。
JS动态设置muted在Chrome/Safari/Firefox中根本无效
浏览器只在HTML解析阶段检查muted是否存在，用video.muted = true或audio.muted = true赋值，不会触发静音自动播放权限。这是策略硬限制，不是bug。常见现象是控制台没报错，但play()直接reject，抛出NotAllowedError或DOMException: play() failed because the user didn't interact with the document first。
实操建议：
- 必须在初始HTML中写
<video autoplay muted></video>或<audio autoplay muted></audio>——muted必须是无值布尔属性，不能是muted="true"、muted=""或muted="muted" - Vue/React里避免
:muted="true"或muted={true}，它们渲染成带值属性，浏览器不认 - 动态创建元素时，得在
appendChild()前调用el.setAttribute('muted', '')，而不是之后
muted设得太早或太晚都会失败
即使你绕过框架、直接操作DOM，muted设的时机不对，依然白搭。比如在DOMContentLoaded就设，此时媒体资源可能还没加载元数据，浏览器会忽略；等loadedmetadata再设，又已错过autoplay判定窗口。
实操建议：
- 监听
canplay或canplaythrough事件，在回调里立即设muted = true，再调play() - 不要用
preload="none"，它会让canplay延迟触发，增加失败概率 - 推荐
preload="metadata"：提前获取音轨信息，让浏览器更快确认“这确实是静音媒体”
iOS Safari对muted有额外三重校验
写了muted和autoplay，iOS Safari仍可能黑屏、跳全屏或静音失效。原因很具体：
-
playsinline缺失：HTML里必须显式写playsinline，对应JS属性是video.playsInline = true（注意首字母大写） - 元素不可见：被
opacity: 0、transform: scale(0)或visibility: hidden遮盖，部分iOS版本拒绝授予autoplay权限 - 响应头问题：跨域视频缺
Access-Control-Allow-Origin: *，或Content-Type不是video/mp4/audio/mpeg，网络面板里看状态码和响应头就能定位
volume = 0 ≠ muted = true，别混用
volume = 0只是把音量拉到最低，浏览器仍认为“它能发声”，不满足静音自动播放前提；muted = true才是向浏览器声明“我接受静音”，是唯一通行证。而且volume可被用户滑块调回，muted状态则受用户交互约束——取消静音必须发生在click/touchstart等真实手势回调里，否则play()照样失败。
容易踩的坑：
- 用
audio.volume = 0代替muted，结果autoplay被拦截 - 在非用户交互上下文中执行
audio.muted = false，然后play()，依然报错 - 误信
defaultMuted，它和autoplay权限完全无关，且Firefox根本不支持
muted从HTML解析那一刻起就存在，并且整个链路——src就绪、响应头合规、移动端playsinline、用户交互时机——全都卡在浏览器策略的允许区间内。漏掉任意一环，都只会表现为“什么都没报错，但就是不播”。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
