如何修复点击X按钮后对应YouTube视频仍继续播放的代码问题

解决方案 #

你需要补充关闭按钮的点击事件监听逻辑，配合已存储的player实例调用停止播放方法，具体修改步骤如下：

1. 先补全addPlayer函数的逻辑，将初始化后的YouTube播放器实例存入全局players数组中，方便后续调用接口：

function addPlayer(video, settings) {
  const defaults = {
    height: 360,
    host: "https://www.youtube-nocookie.com",
    videoId: video.dataset.id,
    width: 640
  };
  defaults.events = {
    "onReady": onPlayerReady
  };
  // 补充以下逻辑：初始化播放器并存入数组
  const player = new YT.Player(video, Object.assign({}, defaults, settings));
  players.push(player);
  return player;
}

2. 给页面上的X关闭按钮绑定点击事件，触发时遍历所有播放器实例，执行stopVideo()方法停止播放：

// 选择器替换为你页面上实际的关闭按钮对应的选择器
const closeBtn = document.querySelector('关闭按钮选择器');
closeBtn.addEventListener('click', function() {
  // 遍历所有已初始化的播放器，停止正在播放的视频
  players.forEach(player => {
    if (player.getPlayerState() === YT.PlayerState.PLAYING) {
      player.stopVideo();
    }
  });
});

如果你的页面同一时间只会有一个激活播放的视频，也可以在播放时单独记录当前激活的player实例，关闭时只针对该实例调用停止方法，不需要遍历所有player，性能更优。

注意：如果关闭按钮是动态生成的元素，需要使用事件委托的方式绑定点击事件，避免监听器绑定失效。

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