一、video 标签 muted 静音状态业务背景
网页播放器业务，很多功能和 muted 静音状态强相关：浏览器自动播放限制、画中画、AirPlay 投屏、截图、录屏、部分解码行为。很多新手只把 muted 当成控制音量大小，不知道静音状态会连锁影响一堆浏览器能力。
同一个 M3U8 流，仅仅是 muted=true 和 false 切换，就会出现：自动播放生效 / 失效、投屏唤起失败、部分浏览器解码行为变化。很多 BUG 只在静音状态下复现，正常有声播放一切正常。
很多业务测试只测正常有声播放，很少完整覆盖 muted 静音场景，上线后收到用户反馈很难复现。调试 muted 静音状态带来播放异常，我会使用 m3u8live.cn，分别切换静音、有声两种状态，复现对比播放、投屏行为。
二、muted 静音高频踩坑现象
坑 1：误以为只要设置 muted 就可以 100% 自动播放
Chrome 支持 muted 静音自动播放，但是 iOS Safari 对自动播放限制更加严苛。即便 muted=true，很多场景依旧拦截自动播放，必须用户手势触发 play。
坑 2：muted 静音状态下，AirPlay 投屏唤起失败
iOS Safari，如果 video 处于 muted=true 静音，调用 AirPlay 投屏接口会被浏览器拦截，弹窗弹不出来。想要唤起投屏，需要先解除静音状态。
坑 3：静音状态做截图、canvas 捕获画面偶现黑屏
部分浏览器，muted 状态下，video 媒体画布渲染存在限制，canvas 截取画面得到黑屏；取消静音之后截图恢复正常。
坑 4：业务切换视频源，muted 状态没有继承或者重置
切换 M3U8 源之后，旧播放器是静音，新播放器没有同步 muted 状态；用户本来开启静音，切换视频突然出声音，产生噪音投诉。
坑 5：UI 静音按钮只修改 CSS 图标，没有真正修改 video.muted 属性
页面按钮图标变成打叉静音，但是 JS 没有修改 video.muted，媒体实际还是有声，UI 状态和底层媒体状态不一致。
三、业务开发实操要点
四、排查简单步骤
第一步，待测 M3U8 粘贴网页调试工具，分别 muted=true、false 两种状态，复现自动播放、投屏、截图等业务功能。 第二步，切换视频源，观察静音状态是否正确继承，不会突然播放声音。 第三步，核对 UI 按钮操作，确认修改了 video.muted，不是只改页面显示图标。
五、总结
video 标签 muted 不仅仅是控制音量静音，还会影响浏览器自动播放策略、AirPlay 投屏、canvas 画布截图等能力。Chrome 和 Safari 表现不一致。业务测试除了正常有声播放，必须覆盖静音场景。切换视频源需要同步继承静音状态，UI 按钮要真正操作 muted 属性，不能只改界面图标。借助网页调试工具，切换静音、有声两种状态，复现对比各类业务功能，规避静音状态下的隐形 BUG。
