Loop Youtube Playlist

[Marky-Gee]

Hi,

Is it possible to loop a playlist of youtube videos?

When I use the loop prop, only the video in the URL prop will loop, instead of the playlist.

[volodymyr-kushnir]

@Marky-Gee You'd have to use getInternalPlayer() and then refer to YouTube IFrame Player API and build it on your own, react-player doesn't have this functionality yet.

I've solved this problem in my app by keeping track of what videos have been already played. Then I'd check if all videos have been played in onStateChange ended (0) event, and if so then I'd simply do player.playVideoAt(0) so that it starts playing from the beginning. You'd have to mark the video as "played" when it starts playing, because when you run player.getPlaylistIndex() after player reports playback ended status ― you'll receive an index of the next video in the queue, not the one that was just played. I mean, it first moves "the cursor" to the next video and only then reports "ended" for the video that was just played, hence when you try to obtain the index you don't get what you wanted. I hope it makes sense, YouTube IFrame Player API is full of surprises.

@cookpete I can work on the PR on the weekend if you'd be interested in having that functionality built-in.

[cookpete]

You'd have to use getInternalPlayer() and then refer to YouTube IFrame Player API and build it on your own, react-player doesn't have this functionality yet.

There is a setLoop method in the Youtube SDK that makes this much easier:

player.setLoop(loopPlaylists:Boolean):Void

This function indicates whether the video player should continuously play a playlist or if it should stop playing after the last video in the playlist ends. The default behavior is that playlists do not loop.

This setting will persist even if you load or cue a different playlist, which means that if you load a playlist, call the setLoop function with a value of true, and then load a second playlist, the second playlist will also loop.

The required loopPlaylists parameter identifies the looping behavior.

If the parameter value is true, then the video player will continuously play playlists. After playing the last video in a playlist, the video player will go back to the beginning of the playlist and play it again.

If the parameter value is false, then playbacks will end after the video player plays the last video in a playlist.

https://developers.google.com/youtube/iframe_api_reference#setLoop

So in theory you should be able to wait for onReady or similar, then call reactPlayerInstance.getInternalPlayer().setLoop(true). See an example jsFiddle of this in action. Ideally, ReactPlayer should do this automatically if loop is set, and not loop individual videos.. I'll look at fixing it.

[volodymyr-kushnir]

@cookpete, unfortunately it throws:

Uncaught (in promise) TypeError: n.player.setLoop is not a function at YouTube.js:65

I was testing it on the demo page using this playlist https://www.youtube.com/watch?v=z9RBALOraws&list=PLDEcUiPhzbjI217qs5KgMvbvx6-fgY_Al.
Well, at least now I remember why I abandoned setLoop and reinvented the wheel, so to speak.
It seems like that method is not available up until the player is ready. So it should be this instead:

events: {
  onReady: event => {
    if (loop) {
      this.player.setLoop(true) // Enable playlist looping
    }
    this.props.onReady && this.props.onReady(event)
  },