How to have the same video be able to autoplay, or player.playVideo() on its own a 2nd time

Admin 1
Viewed 298

Currently, the same video is only able to autoplay 1 time.

To reproduce: Click 1 svg play button, then click the X.

Then click the same svg play button a 2nd time.

You will find that the video does not autoplay.

How is that fixed in the code so that the same video can autoplay a 2nd time?

I would either be using autoplay, or player.playVideo(); to have the video play a 2nd time.

I'm not sure how it would work.

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
    }
  };
autoplay youtube-api youtube javascript
1 Answers

The problem is coming from the way you init the player the first time. When the player is just created there is a onPlayerReady function that is being called. This function is not called on popup open a second time.

You need to keep references to the players and when popup is opened so you could find the player you want and do:

    player.playVideo();

I see that you keep them here: const players = []; but you don't have access to this when you open the popup so you can't really call .playVideo().

I would invest some time into creating a structure that holds references for the player based on the popup so it would be something like:

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)

Or ... a bit easier way (but not preferrable) would be to re-create the player every time the user opens the popup, this way it will always autoplay based on your init config.

user_75729780
Related