加 muted 属性是让 html 自动播放不被浏览器拦截的最有效手段，因主流浏览器自2017年起禁止用户无交互时有声视频自动播放，而静音视频被视为低干扰允许播放，且需在html中声明muted并早于loadeddata事件调用play()。
加 muted 属性是让 HTML <video></video> 自动播放不被浏览器拦截的最有效手段，没有之一。
为什么浏览器会拦截自动播放
主流浏览器（Chrome、Firefox、Safari、Edge）从 2017 年起陆续实施自动播放策略：有声视频（muted=false）在用户无交互前调用 play() 会被静默拒绝，控制台常报 DOMException: play() failed because the user didn't interact with the document first。而静音视频（muted 存在）被视为“低干扰”，允许自动播放。
-
muted是布尔属性，只要写上就等价于muted="true"，无需赋值 - 即使后续用 JS 设置
video.muted = false，只要初始加载时带muted，播放就能触发 - 不加
muted却想靠volume=0绕过？不行——volume=0不等于静音，浏览器仍判定为“有声”
怎么写才真正生效
必须同时满足两个条件：HTML 层面声明 muted，且 JS 调用 play() 不晚于 loadeddata 或 canplay 事件。
- 正确写法：
<video muted autoplay><source src="bg.mp4"></source></video> - 错误写法：
<video autoplay></video>（缺muted），或<video muted="false"></video>（布尔属性不接受字符串值） - XHTML 模式下需写成
muted="muted"，否则解析失败 - 动态插入的
<video></video>元素，必须在append前就设置好muted属性，不能先插入再el.setAttribute('muted', '')
静音后怎么让用户开声音
用户点击音量按钮或调用 video.muted = false 时，浏览器不会再次拦截——只要播放已开始，后续静音/取消静音都自由。
- 监听
volumechange事件比监听click更可靠，因为用户可能用键盘快捷键或系统音量控件操作 - 别只依赖
video.muted判断状态，还要检查video.volume > 0，某些旧版 Safari 在volume=0时muted可能不翻转 - 自定义静音按钮记得加
aria-pressed，例如：<button aria-pressed="true">?</button>
真正容易被忽略的是：移动端 Safari 对 muted 的处理更严格——即使写了 muted，如果视频未设置 playsinline，仍可能因全屏策略导致自动播放失败。所以背景视频务必带上 playsinline 和 webkit-playsinline。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
