Why is playVideo() not in the code?

JavaScript
118

In the videoPlayer code, I now want to replace the fake onPlayerReady code.

  function onPlayerReady(event) {
    ...
    if (player.onPlayerReady) {
      player.onPlayerReady(player);
    }
  }
...
    function addPlayer(video, settings) {
        const onPlayerReady = settings.onPlayerReady;
        delete settings.onPlayerReady;
    ...
        const player = new YT.Player(video, playerVars);
        player.onPlayerReady = onPlayerReady;
    ...
  }
...
const player = (function makePlayer() {
    ...
    const onReady = playerReadyWrapper(cover, events.onPlayerReady);
    videoPlayer.initPlayer(videoWrapper, settings, onReady);
    ...
}

That will be improved by using some real onPlayerReady event code instead.

A more proper event-based way of doing that is as follows. This example is from the MDN Creating and triggering events documentation page.

const event = new Event('build');

// Listen for the event.
elem.addEventListener('build', function (e) { /* ... */ }, false);

// Dispatch the event.
elem.dispatchEvent(event);

It is also getting a little confusing having two different onPlayerReady references. One for the youtube code to use and one for our own code. We can rename ours to be afterPlayerReady instead.

In our code, we have an events object to store any custom events that we want to use.

const videoPlayer = (function makeVideoPlayer() {
    "use strict";
    const players = [];
    const events = {
        afterPlayerReady: new Event("afterPlayerReady")
    };
}

Where do we add the event listener? It can’t be on the player object because it’s only elements that support events. It can’t be in addPlayer on the video element because youtube destroys that when it creates the iframe. Can it be on the iframe? We can certainly try that.

    function getIframe(player) {
        return player.h;
    }
...
    function addEvents(player, settings) {
        const iframe = getIframe(player);
        iframe.addEventListener("afterPlayerReady", settings.afterPlayerReady);
    }
    ...
    function addPlayer(video, settings) {
        ...
        const player = new YT.Player(video, playerVars);
        addEvents(player, settings);
        ...
    }

And we can dispatch the event from the end of the onPlayerReady handler.

    function onPlayerReady(event) {
        const player = event.target;
        const iframe = getIframe(player);
        ...
        iframe.dispatchEvent(events.afterPlayerReady);
    }

We can then setup the event when we add a player:

        const eventWrapper = playerReadyWrapper(cover, events.afterPlayerReady);
        settings.afterPlayerReady = eventWrapper;
        videoPlayer.initPlayer(videoWrapper, settings);

Replacing onAddPlayer with afterAddPlayer helps to coordinate the distinction that things with an “on” prefix are in code outside of our control, whereas those with a prefix of “after” are within our control.

The updated code is at https://jsitor.com/1xqkXKIrsv and I’ll investigate that random number thing next.

1 Like