controls仅控制ui控件显示，不影响静音等行为；muted属性必须在html中声明且为布尔属性才能使autoplay生效；静音状态变更需监听volumechange事件而非onmute。
controls 属性只控制 UI，不控制行为
加了 controls 只是让浏览器渲染默认播放控件（播放/暂停、进度条、音量滑块、全屏按钮等），它本身不会影响静音、自动播放或音轨行为。你看到的“音量按钮”点击后是否真静音，取决于 muted 属性和后续 JS 操作是否到位。
常见错误现象：
– 控件里点了静音图标，但视频仍有声音
– 静音图标状态没更新（显示“有声”，实际已静音）
– 移动端 Safari 点击音量按钮无响应
原因通常是：
– muted 属性没在 HTML 中声明，仅靠 JS 后设（移动端尤其敏感）
– 视频还没加载完成（loadedmetadata 未触发）就调用 video.muted = true
– 用了 setAttribute('muted', '') 而非直接赋值 video.muted = true
muted 属性必须写在 HTML 里才能绕过自动播放限制
现代浏览器（Chrome、Firefox、Safari、Edge）全部要求：带声音的视频必须用户交互后才能 play()；而静音视频可直接 autoplay。这个“可 autoplay”的前提是 muted 是 HTML 布尔属性，且在元素插入 DOM 前就存在。
正确写法示例：
<video id="bgVideo" autoplay muted loop controls preload="metadata"><br><source src="hero.mp4" type="video/mp4"><br></source></video>
关键点：
– 不要写 muted="true" 或 muted="muted"，布尔属性写上即生效
– 不要动态插入 <video></video> 后再用 JS 补 muted，此时 autoplay 已失效
– preload="metadata" 能加快 loadedmetadata 触发，避免 JS 设置 muted 失效
静音状态变化必须监听 volumechange，不是 onmute
HTMLMediaElement 没有 onmute 或 onunmute 事件。所有音量、静音变更（包括用户点控件、JS 赋值、系统快捷键）都统一触发 volumechange。
典型同步场景：视频带独立背景音轨（<audio id="bgm"></audio>），需随主视频静音状态联动：
const video = document.getElementById('myvideo');
const bgm = document.getElementById('bgm');
video.addEventListener('volumechange', () => {
if (video.muted) {
bgm.pause();
} else if (!video.paused) {
bgm.play().catch(() => {}); // 避免因策略被拒报错
}
});
注意：
– 必须在 loadedmetadata 后绑定该监听，否则首次 volumechange 可能漏掉
– bgm.pause() 比 bgm.muted = true 更可靠：前者彻底停音频输出，后者仅关声道，某些编码下仍有底噪
– 移动端 iOS Safari 对 play() 调用更苛刻，建议加 catch 忽略拒绝错误
自定义静音按钮要手动同步图标与 muted 状态
如果你隐藏原生控件、自己画一个静音按钮（比如用 <button id="muteBtn"></button>），就不能只改 video.muted，还得同步更新按钮上的图标或文字。
最简实现：
const video = document.getElementById('myvideo');
const muteBtn = document.getElementById('muteBtn');
muteBtn.addEventListener('click', () => {
video.muted = !video.muted;
muteBtn.textContent = video.muted ? '?' : '?';
});
但这样有个坑：用户也可能通过键盘（M 键）或右键菜单静音，你的按钮状态就不同步了。所以得补监听：
video.addEventListener('volumechange', () => {<br> muteBtn.textContent = video.muted ? '?' : '?';<br>});
真正容易被忽略的是：很多开发者以为只要监听 click 就够了，结果测试时发现按 M 键静音后图标没变——因为没监听 volumechange。这个事件才是唯一覆盖所有静音入口的钩子。
