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

【问题标题】：How to have the same video be able to autoplay, or player.playVideo() on its own a 2nd time如何让相同的视频能够自动播放，或者第二次自动播放 player.playVideo()
【发布时间】：2021-11-26 05:05:00
【问题描述】：

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

重现：点击 1 个 svg 播放按钮，然后点击 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
    }
  };

【问题讨论】：

一旦按下“X”按钮，您是否可以修改代码并检查playback_status？ - 我正在查看您的测试代码，但是，我不熟悉“X”按钮代码的位置和作用。我的建议是：按下“X”按钮后，检查视频的状态，然后继续更改其状态或重新启动 iframe。

标签： javascript youtube youtube-api autoplay

【解决方案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)

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

【讨论】：