Playing YouTube videos from an array

JavaScript
142

Both ways allow for different functionality to occur.

If you want the player to play each video for 60 seconds then change over to the next song, you wouldn’t be able to do that with a playlist player, you would set it up the other way.

143

I think that’s wrong. You can just set up a setInterval event for 60 seconds and tell the player to play the next song.

144

I don’t think you are able to do that with a playlist player unless I’m mistaken.

145

What causes you to think that it’s not possible?

146

I haven’t seen any be able to work in that way, they were all set up using onStateChange.

147

I’ve been saying for a long time that onStateChange is frequently the wrong thing to do.

148

Is it onPlayerStateChange or onStateChange, I keep seeing them written two different ways. Was it changed from one to the other?

149

It’s onPlayerStateChange.

150

How come the other way works also? Was that the old way?

151

No hang on, I’m thinking of onYouTubeIframeAPIReady instead. It’s onStateChange

152

It might be onPlayerReady that you are getting the player part from.

153

Maybe it depends on what is being used.

I just checked and both ways work.

154

It can be anything. It could even be bubbleAndSqueek.

        playerOptions.events = {
            "onReady": onPlayerReady,
            "onStateChange": bubbleAndSqueek
        };

That’s not advised though, as people looking at the function won’t have any idea about what it’s for.

1 Like
155

I was working on this code that uses it, trying to remove as much duplication as I could.

I think I got it reduced as much as possible, though it probably could be reduced further.

I don’t understand why it needs to use 2 Math.floors for.

https://jsfiddle.net/wLe4az93/

const videoPlayer = (function makeVideoPlayer() {

  const videos = [
    "0dgNc5S8cLI",
    "mnfmQe8Mv1g",
    "CHahce95B1g",
    "2VwsvrPFr9w"

  ];
  let videoList = [];
  
  const mvideos = videos[Math.floor(Math.random() * videos.length)];
  document.querySelector(".video").setAttribute("data-id", mvideos);


  let player = null;

  const tag = document.createElement("script");
  tag.src = "https://www.youtube.com/iframe_api";
  const firstScriptTag = document.getElementsByTagName("script")[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  function onPlayerReady(event) {
    player = event.target;
    player.setVolume(100); // percent
  }

  function onStateChange(evt) {
    if (evt.data)

    {
      return;
    }

    if (!videoList.length) {
      videoList = videos.filter(function(a) {
        return a !== player.getVideoData().video_id;
      });
    }

    const id = videoList.splice(Math.floor(Math.random() * videoList.length), 1)[0];
    player.loadVideoById(id);
  }

  function addPlayer(video) {

    const config = {
      height: 360,
      host: "https://www.youtube-nocookie.com",
      videoId: video.dataset.id,
      width: 640
    };
156

From here on out I will have nothing to do with code that involves Math.random() because shuffle should be used instead.

1 Like
157

oh, ok.

158

Would you be able to show me an example of setInterval working with a playlist player?

159

First we set it to loop which also requires a playlist, so that it resets back to the start when it gets to the last video.

        playerOptions.playerVars = {
            ...
            loop: 1,
            playlist,
            ...
        };

Then we poll the player at 250ms which is 4 times a second, checking the current time of the player.
If the current time is more than 10 we play the next video.

That way in this situation, each video plays the first 10 seconds before moving on to the next one.

setInterval(function () {
    const player = videoPlayer.getPlayer();
    const currentTime = player.getCurrentTime();
    if (currentTime > 10) {
        player.nextVideo();
    }
}, 250);
1 Like
160

I never knew this could be done.

I like that, thanks.

161

How are these fixed?

  • “285:32 Uncaught TypeError: player.getCurrentTime is not a function”
  • “285:32 Uncaught TypeError: player.getCurrentTime is not a function”
  • “250:16 Uncaught TypeError: player.playVideo is not a function”