视频静音加载后点击按钮移除muted仍无声音，如何修复？

• DOM属性与JS属性不同步：视频的静音状态实际由JS属性video.muted（布尔值）控制，直接移除DOM上的muted属性，并不会自动同步更新这个JS属性，导致静音状态没真正解除。
• 操作顺序逻辑错误：原代码先执行video.play()再处理静音，此时浏览器已经以静音模式启动播放，后续移除属性无法触发声音恢复。

调整操作顺序，直接操作JS属性而非DOM属性，确保在播放前解除静音：

let videoButton = document.querySelector("#video_button");
let video = document.querySelector("video");

// 页面加载时主动设置视频静音，满足自动加载需求
video.muted = true;

videoButton.addEventListener("click", () => {
  // 先重置播放位置并解除静音
  video.currentTime = 0;
  video.muted = false;
  // 再启动播放
  video.play();
});

关键改动说明 #

• 用video.muted = false替代removeAttribute("muted")：直接控制浏览器用来判断静音状态的JS属性，确保状态同步。
• 调整操作顺序：先设置播放起点和解除静音，再调用play()，让视频一开始就以带声音的状态启动播放。
• 初始加载设置video.muted = true：确保页面加载时视频自动静音，满足需求（如果HTML标签已加muted属性，此步骤可省略，但保留更稳妥）。

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