如何解决HTML video标签插入本地视频播放无声音、音量选项灰显问题

问题原因 #

• 你的代码中video标签上写的unmuted不属于HTML规范的原生属性，浏览器无法识别，该配置完全不生效。
• 现代浏览器均默认开启「带声音媒体自动播放限制」策略，只要你给video标签加了autoplay属性，浏览器会强制给媒体添加静音状态，且禁止用户手动调整音量，这就是音量选项灰化的根本原因。

你提到的本地播放器播放视频正常、单独音频标签可正常发声都符合该逻辑：本地播放器不受浏览器策略限制，而你插入的音频标签未设置autoplay属性，用户主动点击播放不会触发静音限制。

解决方案 #

场景1：不需要视频自动播放 #

直接删除video标签的autoplay和无效的unmuted属性即可，修改后的标签写法：

<video src="video/video.mp4" controls></video>

用户主动点击播放按钮后，视频会正常发声，音量调节功能也会恢复可用。

注意：不要写muted="false"这类错误写法，HTML布尔属性只要出现在标签上，无论赋值是什么都会判定为true，要关闭静音不要加muted属性即可。

场景2：需要视频进入页面后自动播放且有声音 #

需要先触发一次用户交互行为（比如点击、触摸等）后再执行播放逻辑，示例代码如下：

<!-- 先去掉autoplay和无效的unmuted属性 -->
<video id="myVideo" src="video/video.mp4" controls></video>
<script>
  const video = document.getElementById('myVideo')
  // 监听页面第一次点击事件
  document.addEventListener('click', () => {
    video.play()
    video.muted = false
  }, { once: true })
</script>

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