带自定义按钮的嵌入YouTube视频取消静音后无法自动播放问题求助

这个现象是主流浏览器统一执行的媒体自动播放策略导致的，规则如下：

• 静音状态的媒体资源可以在页面加载时自动播放
• 带声音的媒体自动播放默认被拦截，仅当用户主动和站点产生过交互（点击、键盘输入等操作）后，才允许触发带声音的播放
  该规则是浏览器为了避免用户打开页面时突然被声音干扰，属于底层限制，没有直接绕过的方案。

你可以调整交互逻辑满足需求，同时补充必要的权限配置：

1. 补充iframe权限属性 #

现有iframe缺少自动播放权限声明，需要添加allow属性，修改后的iframe代码如下：
<iframe id="video" src="//www.youtube.com/embed/FKWwdQu6_ok?enablejsapi=1&html5=1" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>

2. 调整自动播放交互逻辑 #

无法实现完全无交互的带声自动播放，推荐采用「默认静音自动播放+用户交互后开声音」的兼容方案，既符合浏览器规则，也能最大程度接近你的预期：

• 页面加载时先静音自动播放视频，同时在页面显眼位置提示用户点击任意区域开启声音
• 监听到用户首次点击页面后，自动取消静音，实现带声播放

3. 自定义控制按钮实现 #

你已经在URL中添加了enablejsapi=1参数，直接通过YouTube Iframe API绑定自定义按钮的操作即可，参考JS代码如下：

var player;
// API加载完成后初始化播放器
function onYouTubeIframeAPIReady() {
  player = new YT.Player('video', {
    events: {
      'onReady': onPlayerReady
    }
  });
}

function onPlayerReady(event) {
  // 页面加载后静音自动播放
  event.target.mute();
  event.target.playVideo();
  // 监听用户首次点击，解除静音
  document.addEventListener('click', function unlockAudio() {
    event.target.unMute();
    document.removeEventListener('click', unlockAudio);
  }, { once: true });
}

// 绑定自定义按钮事件
// 播放按钮
document.querySelector('#play-btn').addEventListener('click', () => {
  player.playVideo();
});
// 暂停按钮
document.querySelector('#pause-btn').addEventListener('click', () => {
  player.pauseVideo();
});
// 静音切换按钮
document.querySelector('#toggle-mute-btn').addEventListener('click', () => {
  player.isMuted() ? player.unMute() : player.mute();
});

使用该方案需要提前加载对应的YouTube Iframe API脚本即可。

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