如何让相同的视频能够自动播放，或者第二次播放player.playVideo()

Question

目前，同一视频只能自动播放 1 次。

重现：单击 1 svg play 按钮，然后单击X。

然后第二次单击相同的 svg 播放按钮。

您会发现视频不会自动播放。

如何在代码中解决这个问题，以便同一视频可以第二次自动播放？

我要么使用autoplay，要么player.playVideo();让视频第二次播放。

我不确定它会如何运作。

https://jsfiddle.net/2h7dgfe5/

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 createStopHandler(player) {
    const stopButtons = document.querySelectorAll(".exit");
    stopButtons.forEach(function stopButtonHandler(buttons) {
      buttons.addEventListener("click", function buttonClickHandler() {
        player.stopVideo();
      });
    });
  }

  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
  };
}());

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

Answer 1

问题出在您第一次启动播放器的方式上。当播放器刚刚创建时，会onPlayerReady调用一个函数。第二次打开弹出窗口时不会调用此函数。

您需要保留对玩家的引用，并且当弹出窗口打开时，您可以找到您想要的玩家并执行以下操作：

    player.playVideo();

我看到你把它们放在这里：const players = [];但是当你打开弹出窗口时你无权访问它，所以你不能真正调用.playVideo().

我会投入一些时间来创建一个结构，该结构为基于弹出窗口的玩家提供参考，因此它会类似于：

const players = new Map();

// key can be anything you may use to relate:
// - HTML reference -> the element you click could be your key
// - string
// - other object
// - number
players.set(anyReasonableKey, playerInstance)

// then click handler would be something like this
function onPlayButtonClick(event) {
    const key = event.target;
    const p = players.get(key); // event target is the key, the play button.

    // if there is no player
    if(typeof player === "undefined"){
        // the creation with autoplay option should handle fist start of video, because you need to wait for onPlayerReady event
        makePlayer(key) // here you create it for the first time, and pass the key so you could do the following inside of the function:
        // players.set(key, player)

    } else {
        p.playVideo(); // if player exists, just start playing video
    }
}

playButton.addEventListener("click", onPlayButtonClick)

或者......更简单的方法（但不是首选）是每次用户打开弹出窗口时重新创建播放器，这样它将始终根据您的初始化配置自动播放。