在JavaScript中如何正确取消视频静音并恢复声音

通过移除muted属性无法恢复视频声音，必须显式设置video.muted = false，并在用户交互后调用play()——这是浏览器自动播放策略的强制要求。

通过移除`muted`属性无法恢复视频声音，必须显式设置`video.muted = false`，并在用户交互后调用`play()`——这是浏览器自动播放策略的强制要求。

在现代浏览器中（Chrome、Edge、Firefox、Safari），视频的音频播放受严格的自动播放策略（Autoplay Policy） 约束：即使视频已加载完成，若未经过明确的用户手势（如点击、触摸），直接调用 play() 且 muted = false 将被静音阻止，且不会抛出错误，仅静默失败。

你原代码的问题在于：

• removeAttribute("muted") 仅移除 HTML 属性，但 不改变 video.muted 的 JavaScript 属性值（该属性默认为 true，且具有更高优先级）；
• video.play() 被调用时，video.muted 仍为 true（或未被显式设为 false），导致播放器继续以静音状态运行；
• 更关键的是：必须在用户交互回调内同时设置 muted = false 和调用 play()，二者缺一不可，且顺序建议为先设 muted = false，再 play()。

✅ 正确写法如下：

const videoButton = document.querySelector("#video_button");const video = document.querySelector("video");videoButton.addEventListener("click", () => {  video.pause();  video.currentTime = 0;  video.muted = false; // ✅ 关键：显式设置 JS 属性，而非仅移除 HTML 属性  video.play()    .catch(err => {      console.warn("Failed to resume with sound:", err);      // 可选降级提示：如显示“请手动启用声音”或切换图标    });});

⚠️ 注意事项：

立即学习“Java免费学习笔记（深入）”；

• 不要使用 video.setAttribute("muted", "false") 或 video.removeAttribute("muted") —— 这些操作对 muted 的实际行为无影响；
• video.muted 是一个布尔属性（true/false），不是字符串，务必赋值 false（非 "false"）；
• play() 返回 Promise，需处理可能的拒绝（例如因策略限制无法解静音），避免静默失败；
• 若视频初始即带 muted 属性（如 <video muted autoplay>），首次加载时 video.muted 会被初始化为 true，必须在用户交互中重置。

? 补充建议：为提升用户体验，可在按钮点击后同步更新 UI（如切换文字为“Mute”、更改图标），并在 play().then() 中确认音频已就绪；若需兼容旧版 Safari，可额外检查 video.volume > 0 并酌情设 video.volume = 1。

遵循以上实践，即可可靠实现“点击开启声音并重播”的功能。