如何为对应player的正确play button绑定handler 解决多视频同时播放bug

你当前的createPlayHandler逻辑存在重复绑定问题：每次创建新的player实例时，都会选中所有.thePlay类的播放按钮，给每一个按钮都绑定当前player的播放事件。每新增一个player，所有按钮上就会多一层对应不同player的播放监听，点击任意按钮时所有绑定过的player都会触发播放，这就是多视频同时启动的原因。

步骤1：建立按钮与视频的映射关系 #

给每个播放按钮添加data-video-id自定义属性，值和对应视频的唯一ID保持一致，示例如下：

<!-- 每个按钮的data-video-id和对应播放器的ID唯一对应 -->
<button class="thePlay" data-video-id="video_001">播放视频1</button>
<button class="thePlay" data-video-id="video_002">播放视频2</button>

步骤2：修改事件绑定逻辑 #

改造createPlayHandler函数，仅给当前player对应的专属按钮绑定事件，同时避免重复绑定：

function createPlayHandler(player, currentVideoId) {
  // 只选中和当前player对应的专属播放按钮
  const targetPlayButton = document.querySelector(`.thePlay[data-video-id="${currentVideoId}"]`);
  if (!targetPlayButton) return;

  // 先移除之前可能绑定的事件，避免重复监听
  function playHandler() {
    player.playVideo();
  }
  // 先移除历史绑定的相同事件
  if (targetPlayButton.playHandler) {
    targetPlayButton.removeEventListener('click', targetPlayButton.playHandler);
  }
  // 绑定新的处理函数，并存到按钮属性上方便后续移除
  targetPlayButton.playHandler = playHandler;
  targetPlayButton.addEventListener('click', playHandler);
}

调用createPlayHandler时，传入当前player对应的视频ID即可：

// 示例调用，创建ID为video_001的播放器时
const player1 = new VideoPlayer(/* 你的播放器初始化参数 */);
createPlayHandler(player1, 'video_001');

额外优化 #

点击关闭按钮销毁视频时，同步移除对应播放按钮上的事件监听，避免内存泄漏和残留监听问题。

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