JavaScript视频静音按钮失效排查及单按钮切换方案咨询

原有代码失效原因 #

• 标签语法错误：<video id="vid"autoplay muted loop>中id="vid"与autoplay属性之间缺少空格，浏览器解析时会识别异常，导致JS无法通过getElementById("vid")选中目标视频元素，功能无法触发
• 双按钮逻辑冗余，可合并为单个按钮实现状态切换，交互更简洁。

单按钮静音/取消静音完整实现代码 #

<!DOCTYPE html>
<html>
<body>
  <div>
    <!-- 修复属性空格问题，src替换为实际视频地址即可 -->
    <video id="vid" autoplay muted loop src="替换为你的视频文件地址"></video>
    <div class="controller">
      <button onclick="toggleMute()" type="button" id="muteBtn">Enable sound</button>
    </div>
  </div>

  <script>
    const video = document.getElementById("vid");
    const muteBtn = document.getElementById("muteBtn");

    function toggleMute() {
      // 对muted布尔值取反实现状态切换
      video.muted = !video.muted;
      // 同步更新按钮显示文本
      muteBtn.textContent = video.muted ? "Enable sound" : "Mute sound";
    }
  </script> 
</body>
</html>

实现逻辑说明：视频元素的muted属性本身为布尔类型，每次点击按钮时直接翻转该属性值即可完成静音/非静音的切换，同时同步修改按钮文案，保证按钮提示与实际播放状态一致。

如果需要保留最初的双按钮设计，仅需给id="vid"和autoplay属性之间补上空格，原有JS逻辑即可正常生效，无需额外修改。

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