Live HLS stream doesn't buffer and endlessly loads

[FiadhMc]

Using react-player for live streaming, but after an upgrade of the stream URLs, it is no longer working on our environments, though it is elsewhere. I'm importing FilePlayer directly and using a hls stream.

Current Behavior

Stream initially loads the first ~6 seconds but doesn't buffer. Once played time catches up with the initial 6 seconds that buffered, a spinner appears and the video never recovers.

Expected Behavior

Stream buffers and continues to play.

Steps to Reproduce

The stream URLs work everywhere except our environments. Content loads perfectly when testing URL through https://cookpete.com/react-player/ but when I pulled the react-player project and ran it locally, the above issue occurs there too.

Environment

• Browser: Chrome - 79.0.3945.117, Firefox - 70.0.1, Safari - 13.0.4
• Operating system: MacOS Mojave 10.14.6

Other Information

Console output of the errors I'm seeing:

Since I see this issue when I run react-player locally but not on the online demo, do you know of any differences between your production build and local build that might account for my issues? Or have you come across any similar issues before?

[cookpete]

According to video-dev/hls.js#656 this may have been fixed in hls.js version 0.13.1.

It's not on CDNJS yet (see #768) but you can load the library yourself to hijack it (see #605 (comment)). Basically just include hls.js in your app alongside your other scripts. ReactPlayer will use the already-loaded version of hls.js rather than load it in again:

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>

Give it a go and let me know if that helps.

[FiadhMc]

Hi, thank you so much, this fixed our issue and the stream plays now!

[frontEnd1985]

Hi How i put buffer time in react player? like it only buffer for next 30 seconds or any other?