YouTube videos do not seamlessly loop

[matthew-dean]

While react-player seems to be using the YouTube API correctly, it would be nice if it provided a workaround for the fact that the YouTube API loop parameter fails completely at properly looping video. You can find a number of stack overflow references to it. However, it can be solved by seeking to the first frame and playing on the ended event of the video.

If you use this URL: https://www.youtube.com/watch?v=f_JDEJGoU1Q in https://cookpete.com/react-player/, you'll see you get a black background briefly if you set the loop option, which shouldn't happen and is preventable. For example, here's a blog post about restarting the video on the ended event: https://codebushi.com/react-youtube-background/.

[cookpete]

However, it can be solved by seeking to the first frame and playing on the ended event of the video.

Funnily enough this is what ReactPlayer already does. It seems like the loop option doesn't even work when using new YT.Player(). The youtube player uses loopOnEnded, which manually seeks to zero when the video ended event gets fired:

https://github.com/CookPete/react-player/blob/7364be4555b8cfc18e0d5736e1024a65032dc7c2/src/Player.js#L172-L176

I see what you mean about the very quick flash of black on every loop, but I'm not sure what can be done about it.

[matthew-dean]

@cookpete Yeah I discovered that 15 mins ago or so digging through the code. So basically.... is there no way to make looping actually work for YouTube vids?

[matthew-dean]

@cookpete It seems that the only way for seemless loops may be to not wait for the ended event, but to actually poll the video to find when you're nearing the last frame and restart - https://stackoverflow.com/questions/39194984/youtube-embedded-video-using-iframe-api-cant-play-a-perfect-loop-and-re-buffers

[cookpete]

Funny you should mention it.. I was just putting a jsFiddle together for you doing exactly that: https://jsfiddle.net/o9vqq4L6/

Note that I've set progressInterval={100} to fire onProgress often enough to capture played being over 0.99 before the video ends.

[matthew-dean]

@cookpete That's fantastic! Thanks so much! Unfortunately this example is not quite usable without addressing this: #407 - because of the inability to get a reference to this.player 😢

(In our case, this.player would return <UniversalComponent />.)

[matthew-dean]

@cookpete Two other things about this looping technique - it seems if the tab is not active, it won't fire enough (or at all?) in which case the video will end without looping. I added the loop parameter, but for some reason the video still ends at some point without the tab having focus. 🤔 https://jsfiddle.net/o9vqq4L6/2/

The other thing is that these looped videos may be very different in length. So setting it as 0.99 will loop back much sooner (before end) on a 1 minute video than a 10 second video. Ideally, it would be more like "x ms from end". Which, again, I think I could hack something up myself if #407 is addressed with something like onReady(this).

[lteng1988]

@cookpete this solution doesn't work on Safari. We still get a black frame

[cookpete]

@lteng1988 That sucks. My only other idea would be to have two looping players, but show/hide/fade between one another to avoid the black frame..

..or don't use YouTube and just use a video file.

The other thing is that these looped videos may be very different in length. So setting it as 0.99 will loop back much sooner (before end) on a 1 minute video than a 10 second video.

@matthew-dean Yeah you could just use onDuration to get the video duration and use that to determine when to seek.