HTML嵌入YouTube作为背景视频播放无声音问题咨询

问题原因 #

你的代码中两处配置主动开启了视频静音，导致播放时没有声音：

• playerVars 参数中配置了 'mute': 1，初始化播放器时直接设置为静音状态
• onPlayerReady 回调函数中执行了 event.target.mute()，播放器加载完成后再次触发静音

修复步骤 #

1. 修改播放器初始化参数：找到 playerVars 配置段，将 'mute': 1 改为 'mute': 0，也可以直接删除该行配置
2. 删除冗余静音逻辑：找到 onPlayerReady 函数，删掉 event.target.mute(); 这一行代码

注意事项 #

当前绝大多数主流浏览器都限制自动播放带声音的媒体内容，如果修改后出现视频无法自动播放的情况，可增加用户交互触发逻辑，等用户和页面产生点击、触摸等操作后再取消静音，示例逻辑如下：

// 在onPlayerReady函数外添加以下代码
document.addEventListener('click', function() {
  if (player && player.unMute) {
    player.unMute();
  }
});

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