muted 属性是获取自动播放资格的必要条件，必须在 html 中声明而非 js 设置；ios 需配合 playsinline 才能内联播放；preload="metadata" 可提升静音自动播放成功率。
muted 属性不是“让视频静音”，而是告诉浏览器“这个视频默认不发声”，从而获得自动播放资格。没它，autoplay 在 Chrome、Safari、Edge 等主流浏览器里基本无效。
必须写在 HTML 里，不能靠 JS 后设
浏览器检查的是元素初始状态，不是运行时状态。
- ✅ 正确：
<video autoplay muted src="demo.mp4"></video> - ❌ 失败：
video.muted = true放在DOMContentLoaded或loadedmetadata事件里再调play() - ❌ 更错：
muted="false"或muted=""—— 这会让属性失效，等同于没写
playsinline 在 iOS 上不是可选，是刚需
iOS Safari 不加 playsinline，即使写了 muted 和 autoplay，也会强制全屏，且部分版本下静音状态被忽略，导致播放失败。
- HTML 中必须同时写：
<video autoplay muted playsinline></video> - JS 中对应属性是
video.playsInline = true（注意大小写） - 旧版微信内嵌 WebView 可能还要加
x5-video-player-type="h5-page"，但 2026 年已基本不用
preload="metadata" 提升成功率，别用 auto
浏览器需要知道视频是否真含音轨，才能确认“静音”是否成立。提前加载元数据能加快判定。
- 推荐：
preload="metadata"—— 只加载时长、宽高、音轨信息 - 避免：
preload="auto"—— 可能触发音频流预加载，破坏静音前提 - 如果
src是 blob URL 或动态生成，确保它已 resolve 完成再插入 DOM，否则play()会因元数据未就绪而失败
后续恢复声音必须绑定用户交互
想从静音切到有声，不能直接 video.muted = false; video.play()，必须发生在用户手势上下文里。
- 监听
click或touchstart（注意：mousemove不算有效手势） - 在回调中同步执行：
video.muted = false，再video.play().catch(...) - 哪怕只是点一下空白区域、滑动轮播图、甚至点击自定义音量按钮，都算有效交互
muted 的本质不是控制音量，是获取播放通行证——它允许你先跑通 play()，哪怕你下一毫秒就把它设回 false。最容易被忽略的点是：这个通行证只认初始 HTML 属性，不认 JS 补票。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
