如何修复YT播放器同一视频第二次无法通过autoplay/playVideo()自动播放问题

问题根因 #

你代码中配置的autoplay=1参数仅在YouTube播放器实例首次初始化创建时生效一次。点击X关闭按钮调用player.stopVideo()后，播放器实例仍保留在内存中，再次点击播放按钮时没有主动触发播放动作，也没有重新初始化播放器，因此autoplay不会二次生效，视频无法播放。

修复步骤 #

1. 改造播放器模块，新增实例查询能力 #

给videoPlayer模块新增getPlayer方法，用于查询已创建的播放器实例，同时优化关闭按钮的事件绑定逻辑，避免重复绑定：

const videoPlayer = (function makeVideoPlayer() {
  const players = [];

  const tag = document.createElement("script");
  tag.src = "https://www.youtube.com/player_api";
  const firstScriptTag = document.getElementsByTagName("script")[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  // 新增：根据视频元素查找已创建的播放器实例
  function getPlayer(videoEl) {
    return players.find(player => player.getIframe() === videoEl);
  }

  function createStopHandler(player) {
    const stopButtons = document.querySelectorAll(".exit");
    stopButtons.forEach(button => {
      // 先移除旧事件，避免重复绑定
      button.removeEventListener("click", button.stopHandler);
      button.stopHandler = () => {
        player.stopVideo();
        // 此处可补充你隐藏视频弹窗的业务逻辑
      };
      button.addEventListener("click", button.stopHandler);
    });
  }

  function onPlayerReady(event) {
    const player = event.target;
    player.setVolume(100);
    createStopHandler(player);
  }

  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 playerOptions = combinePlayerOptions(defaults, settings);
    const player = new YT.Player(video, playerOptions);
    players.push(player);
    return player;
  }

  return {
    addPlayer,
    getPlayer // 暴露实例查询方法
  };
}());

const managePlayer = (function makeManagePlayer() {
  const defaults = {
    playerVars: {
      autoplay: 1,
      controls: 1,
      disablekb: 1,
      enablejsapi: 1,
      fs: 0,
      iv_load_policy: 3
    }
  };
  return {
    defaults
  }
}());

2. 新增播放按钮点击逻辑 #

给所有SVG播放按钮绑定点击事件，判断播放器实例是否存在，分别走初始化或直接播放逻辑：

// 请将选择器替换为你实际的播放按钮类名/选择器
document.querySelectorAll(".play-svg-btn").forEach(playBtn => {
  playBtn.addEventListener("click", () => {
    // 请根据你的DOM结构，获取当前播放按钮对应的YouTube视频容器元素
    const videoEl = playBtn.closest(".video-wrap").querySelector(".youtube-video");
    let player = videoPlayer.getPlayer(videoEl);
    
    if (!player) {
      // 首次点击：创建播放器，依赖autoplay参数自动播放
      videoPlayer.addPlayer(videoEl, managePlayer.defaults);
    } else {
      // 非首次点击：直接调用播放方法
      player.playVideo();
    }
    // 此处可补充你显示视频弹窗的业务逻辑
  });
});

说明 #

该方案不需要重复创建播放器实例，性能开销更低。同时符合浏览器自动播放策略：首次用户主动点击触发播放器初始化，后续调用playVideo()不会被浏览器拦截。

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