JavaScript实现HTML5视频联动自定义静音按钮功能

该需求完全可以落地，本质是把全页面视频的静音状态做全局唯一绑定，不存在单视频独立的静音规则：当任意一个视频对应的静音按钮被点击时，不需要逐个判断每个视频的当前状态，只要统一给所有视频设置相同的目标静音值，再同步更新所有按钮的显示状态即可。

• 先给页面内所有需要纳入同步规则的视频元素加统一类名，比如class="sync-video"，给对应的自定义静音按钮加统一类名比如class="sync-mute-btn"，方便统一选取，避免和页面其他功能元素混淆。
• 给所有静音按钮绑定统一的点击回调：点击事件触发时，先计算本次要切换的目标静音状态——通常可以取当前第一个视频的muted属性值，取反后作为全页面统一的目标值。
• 遍历选取到的所有视频元素，直接把计算出的目标静音值赋值给每个视频的原生muted属性，这里注意不要只修改HTML标签上的muted属性，原生视频的播放音量状态是由JS层的属性控制的，只改DOM属性不会改变实际的音频输出状态。
• 遍历所有对应的静音按钮，同步更新按钮的UI反馈，比如切换静音图标、修改按钮上的提示文字，让用户能清晰感知当前全局的静音状态。

// 统一绑定所有同步静音按钮的点击事件
document.querySelectorAll('.sync-mute-btn').forEach(button => {
  button.addEventListener('click', () => {
    // 选取所有纳入同步规则的视频
    const videoList = document.querySelectorAll('.sync-video');
    // 计算本次要切换的目标静音值：基于当前状态取反
    const targetMutedState = !videoList[0].muted;
    // 给所有视频同步设置静音状态
    videoList.forEach(video => {
      video.muted = targetMutedState;
    })
    // 同步更新所有按钮的UI显示
    document.querySelectorAll('.sync-mute-btn').forEach(btn => {
      btn.textContent = targetMutedState ? '取消全量静音' : '开启全量静音';
    })
  })
})

• 如果页面存在动态加载的视频或按钮（比如无限滚动、弹窗动态插入的视频），需要把直接绑定的点击事件改成事件委托模式，挂在父级容器上监听点击，避免新增元素没有绑定响应逻辑。
• 不要在视频的volumechange事件里反过来重复触发按钮状态更新，不然容易形成逻辑循环——所有状态变更的入口统一收敛在按钮点击回调里，就可以避免这个问题。
• 要注意浏览器自动播放策略的兼容：如果视频设置了自动播放，初始状态最好默认设置为muted = true，不然部分浏览器会拦截自动播放逻辑。

内容的提问来源于stack exchange，提问作者bdr