html5音视频默认静音播放必须显式添加布尔属性muted，仅写在html标签中有效，如；js动态设置无效，且需配合playsinline等属性适配移动端。
在 HTML5 中，让音视频默认静音播放，核心就一条：必须在 <audio></audio> 或 <video></video> 标签中**显式写出 muted 这个布尔属性**，不带等号、不带引号、不带值。这是浏览器自动播放策略的硬性门槛，不是可选项。
必须写对 muted 的 HTML 写法
muted 是布尔属性，生效唯一方式是“存在即生效”。正确写法只有一种：
<video muted autoplay src="bg.mp4"></video><audio muted src="bg.mp3"></audio>
以下全是无效写法（哪怕看起来像静音）：
-
muted="true"、muted="false"、muted=""—— 部分浏览器可能兼容muted=""，但不保证，且无法绕过 autoplay 限制 -
:muted="true"（Vue 模板）、muted={true}（React JSX）—— 渲染成带值属性，失去布尔语义 - 只写
autoplay不写muted—— 浏览器直接拦截，控制台可能报DOMException: play() failed because the user didn't interact...
为什么一定要写在 HTML 里，不能用 JS 补？
浏览器只在解析 HTML 元素时检查 muted 是否原生存在，以此决定是否授予“自动播放资格”。JS 后续设置毫无作用：
-
audio.muted = true只能改变运行时静音状态，不能恢复被拦截的 autoplay 权限 -
el.setAttribute('muted', '')如果是在元素插入 DOM 之后 才调用，已错过时机 - 动态创建元素时，必须在
appendChild()前完成el.muted = true和el.autoplay = true
移动端和 Safari 的额外要求
仅写 muted 在 iOS Safari 和部分安卓浏览器上仍可能失败，还需补充：
-
playsinline（HTML 属性）或webkit-playsinline—— 防止强制全屏 - 确保视频在可视区域内（避免
opacity: 0、transform: scale(0)等隐藏手段） - 服务端响应头需正确：
Content-Type匹配媒体类型，建议加Access-Control-Allow-Origin: *（跨域场景）
静音后如何让用户重新开声音
初始静音只是绕过限制，用户交互后可自由切换：
- 点击按钮执行
video.muted = false，再立刻调video.play()（iOS 要求在同一个事件回调内） - 监听
volumechange事件判断真实静音状态（比只读muted更可靠，因某些旧 Safari 在volume=0时不翻转muted） - 自定义按钮建议加
aria-pressed提升可访问性，例如：<button aria-pressed="true">?</button>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
