Event signaling readiness for media operations

[gurupras]

I know HTML5 has canplay/loadeddata/etc that can be used to signal readiness for media events. Can we come up with something similar for YouTube, Vimeo and other, newer sources? Alternatively, it would help if we had an event that signalled readiness upon plyr.source being updated.

I'm happy to work on this if someone can point me in the right direction.

Here's a codepen where I'm having difficulty trying to load a video and once it is loaded, seek to some spot and begin playing it.

[Alfagun74]

Heres what works for me @gurupras, I call this after i load in the video:

I'd still like to see a global solution and event

function youtubePlayerReadyListener() {
    const interval = setInterval(() => {
      const yt = player.embed;
      if (typeof yt.getPlayerState === "function" && yt.getPlayerState() === 5) {
        alert("Hi Im ready for playing");
        clearInterval(interval);
      }
    }, 500);
  }

[oguilleux]

For Vimeo only it's :

const player = new Plyr('.my-video);

player.on('ready', () => {
  if (player.embed.on) {
    player.embed.on('loaded', () => {
      // video is ready
    });
  }
});

For Youtube @Alfagun74's answer is still the best for the moment.