Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Live HLS stream doesn't buffer and endlessly loads #779

Closed
FiadhMc opened this issue Jan 16, 2020 · 3 comments
Closed

Live HLS stream doesn't buffer and endlessly loads #779

FiadhMc opened this issue Jan 16, 2020 · 3 comments

Comments

@FiadhMc
Copy link

FiadhMc commented Jan 16, 2020

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:
Screen Shot 2020-01-16 at 8 32 00 AM

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
Copy link
Owner

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
Copy link
Author

FiadhMc commented Jan 20, 2020

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

@FiadhMc FiadhMc closed this as completed Jan 20, 2020
cookpete added a commit that referenced this issue Jan 31, 2020
albanqoku added a commit to albanqoku/react-player that referenced this issue Feb 24, 2021
Webmaster1116 added a commit to Webmaster1116/video-player that referenced this issue May 20, 2021
@frontEnd1985
Copy link

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

webmiraclepro added a commit to webmiraclepro/video-player that referenced this issue Sep 9, 2022
philip-luther added a commit to philip-luther/react-player that referenced this issue Nov 22, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants