静音必须用无值muted属性写在HTML中，JS动态设置无效；取消静音只能在用户交互事件中执行video.muted = false，且需紧跟video.play()并捕获错误。
静音必须用无值 muted 属性写在 HTML 里，JS 动态设置一律无效；取消静音只能在用户点击等交互中执行 video.muted = false。
为什么 muted="true" 或 :muted="true" 不起作用
浏览器只识别无值布尔属性——muted 出现在标签里就生效；一旦带等号（如 muted="true"、muted=""、muted="muted"），它就变成普通字符串属性，被完全忽略。Vue/React 模板里用 v-bind:muted="true" 或 :muted="true" 渲染出的正是这种带值形式，静音必然失效。
常见翻车点：
- 服务端渲染或静态 HTML 最稳妥，直接写
<video muted autoplay> - JS 动态创建时，必须在
appendChild()前调用el.setAttribute('muted', '')或el.muted = true - iOS Safari 要求
muted必须在 HTML 解析阶段存在，否则autoplay直接跳过
autoplay 和 muted 必须同时出现在初始 HTML 中
现代浏览器把 autoplay 当作策略触发器，只在解析 HTML 阶段检查是否满足“静音前提”。JS 后设 video.muted = true 或 video.setAttribute('muted', '') 都太晚，play() 会被拒绝，控制台报错：DOMException: play() failed because the user didn't interact with the document first。
正确写法只有一种：
<video autoplay muted> <source src="demo.mp4" type="video/mp4"> </video>
错误写法包括：
-
<video autoplay></video>+ JS 设置muted <video autoplay muted="true"></video>-
<video autoplay></video>在DOMContentLoaded里才设muted
怎么真正取消静音：别用 removeAttribute("muted")
muted 是 IDL 属性（JavaScript 可写属性），不是纯 HTML 属性。removeAttribute("muted") 只删 DOM 属性，不影响运行时状态；必须用赋值操作：video.muted = false 才会同步音频通道。
解静音还必须满足两个硬性条件：
- 只能在
click、touchstart、keydown等真实用户交互事件回调里执行 -
video.play()要紧跟着video.muted = false，且必须.catch()捕获失败（比如因手势缺失） - 不要碰
defaultMuted——它只影响“首次加载未播放”时的初始值，对已加载/已播放过的媒体完全无效；Firefox 甚至不支持
volume 和 muted 的关系与平台差异
video.muted = true 会覆盖 volume 设置，且不受系统音量影响，是唯一可靠的一键静音方式。而 volume = 0 并不等于静音——某些系统仍可能输出极低音频，iOS Safari 更是直接禁用 volume 设置（始终返回 1，无法修改）。
所以实际项目中：
- 要确保一上来就静音 → HTML 里写死
muted - 要运行时切换静音 → 只用
video.muted = true/false - 不要混用：设了
video.muted = false后再改defaultMuted，毫无意义
最易被忽略的是：移动端（尤其 iOS）对“用户手势”的认定极其严格——setTimeout 里的点击回调、非冒泡事件、或通过 dispatchEvent 模拟的点击，都不算真实手势。真要兼容，得从事件源头抓起。
