video.muted 属性必须直接赋值操作，不能仅靠css模拟；正确做法是每次点击执行 video.muted = !video.muted，并同步切换图标类、监听 volumechange 事件更新ui，同时用 localstorage 持久化 muted 和 last-volume 状态。
video.muted 属性必须直接操作，不能只靠 CSS 模拟
静音功能不是视觉效果，而是真实影响音频输出的 DOM 行为。只改按钮图标或加个 is-muted 类，video 依然会出声——尤其在 Safari 和 iOS WebView 中，不设 muted = true 就等于没静音。
正确做法是每次点击都赋值：video.muted = !video.muted。这个操作本身不改变 volume 值，只是开关输出通路。
- 设
muted = true后，volume仍保持原值（比如还是 0.8） - 取消静音时，直接设
muted = false即可恢复，无需重设volume - 不要用
setAttribute('muted', '')，它不可靠；必须走属性赋值
图标切换别用 classList.toggle() 单类名
常见错误：按钮初始含 fa-volume-up，点击时只 classList.toggle('fa-volume-up')，再 classList.toggle('fa-volume-off') —— 这会导致两个类同时存在或同时丢失，图标闪烁甚至消失。
真正稳定的做法是让两个图标类互斥：
- 每次点击都执行：
icon.classList.toggle('fa-volume-up')和icon.classList.toggle('fa-volume-off') - 这样能保证任意时刻只有一个音量图标生效
- 如果用的是 SVG 图标或自定义 class，逻辑一样：确保旧状态类被移除、新状态类被添加
必须监听 volumechange 事件同步 UI
用户可能绕过你的按钮，直接拖动浏览器原生音量滑块。这时 video.muted 可能被浏览器自动设为 true（比如音量拖到 0），但你的按钮图标还显示“有声”。
解决办法是监听 volumechange：
- 绑定：
video.addEventListener('volumechange', () => { updateMuteButtonUI() }) -
updateMuteButtonUI()里根据video.muted切换图标和文字 - 注意：该事件在 Safari 和部分安卓 WebView 中触发较迟，建议加
requestAnimationFrame做兜底
localStorage 持久化静音状态要分两步存
用户下次打开页面时，希望静音状态延续。但不能只存 muted 值——因为 muted = true 时，volume 值仍是上次的（比如 0.7），恢复时若只设 muted = false，音量会突兀跳回 0.7。
推荐方案：
- 存两个键：
localStorage.setItem('video-muted', JSON.stringify(video.muted)) - 同时存：
localStorage.setItem('video-last-volume', video.volume) - 初始化时先读
muted，再读last-volume；取消静音时主动恢复volume
容易被忽略的是：iOS Safari 在页面后台时可能丢掉 volumechange 事件，导致 localStorage 里的 last-volume 滞后。所以首次播放前最好再校验一次 video.volume。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
