Why is playVideo() not in the code?

JavaScript
17

Updating manageCover

Next we need to selectively tell certain covers that they should play the video.

That means updating the manageCover code so that additional things such as playing the video, can be done when the cover is clicked.

That also means moving the manageCover.init code down below all of the functions, so the function we give the cover to play the video, can access the videoPlayer function when initializing the cover.

Currently it’s the equivalent of the following code that’s being used to initialize the cover:

manageCover.init([
  ".jacketc"
]);

We need to give it a callback function. As there are many players we are going to need to tell the videoPlayer which one to use. The players are all added to a player array, so it’s the playerIndex that we give it.

manageCover.init([
  {
    cover: ".jacketc",
    onclick: function (playerIndex) {
      videoPlayer.play(playerIndex);
    }
  }
]);

Get the playerIndex

How are we going to get the player index? Don’t know. Will it work? Don’t know. How is that onclick method run? We can do something about that.

The manageCover code can be updated so that it handles the onclick method.

  function coverClickHandler(evt) {
    const cover = evt.currentTarget;
    hide(cover);
    ...
    if (cover.coverOpts.onclick) {
      cover.coverOpts.onclick(player);
    }
  }

We are now using cover.coverOpts a lot in that handler, so it’s time to assign that to a local variable:

  function coverClickHandler(evt) {
    const cover = evt.currentTarget;
    const opts = cover.coverOpts;
    hide(cover);
    if (opts.show) {
      show(document.querySelector(opts.show));
    }
    if (opts.hide) {
      hide(document.querySelector(opts.hide));
    }
    if (opts.onclick) {
      opts.onclick(playerIndex);
    }
  }

The last thing on our todo list is to get the playerIndex. We can have the addPlayer code give us the index of the player that it added to the list of players.

  function addPlayer(video, settings) {
...
    players.push(new YT.Player(video, playerParams));
    const playerIndex = players.length - 1;
    return playerIndex;
  }

Add playerIndex to cover

But, how do we get that information to the cover, without the cover knowing about the addPlayer code and without the cover code knowing about addPlayer?

We can add that playerIndex to the cover element itself, and have the cover retrieve it from there.

    if (!opts.autoload) {
      const video = getVideo(cover);
    // loadPlayer(video);
      cover.playerIndex = loadPlayer(video);
    }
...
  if (opts.autoload) {
    const video = getVideo(cover);
    // loadPlayer(video);
    cover.playerIndex = loadPlayer(video);
  }

And, because the same code is being used in those if statements, we should move it out to a separate function too.

We can do that by updating loadPlayer to use the cover instead.

  // function loadPlayer(video) {
  function loadPlayer(cover) {
    const video = getVideo(cover);
    cover.playerIndex = videoPlayer.addPlayer(video, opts);
  }
...
    if (!opts.autoload) {
      // const video = getVideo(cover);
      // cover.playerIndex = loadPlayer(video);
      loadPlayer(cover);
    }
...
  if (opts.autoload) {
    // const video = getVideo(cover);
    // cover.playerIndex = loadPlayer(video);
    loadPlayer(cover);
  }

Connect things together

We can now connect things together up in the cover code, and give that playerIndex to the onclick function:

    if (opts.onclick) {
      opts.onclick(cover.playerIndex);
    }

and in the videoPlayer code, we can use that playerIndex to use the correct player:

  // function play() {
  function play(playerIndex) {
    // player.playVideo();
    players[playerIndex].playVideo();
  }

The updated code that we have is found at https://jsfiddle.net/pmw57/94L3ra28/

While making the above improvements some other issues were spotted in regard to the players and playerVars variables, which I’ll delve into next time.

1 Like