m3u8 not working on Safari Desktop

[EzequielVegaOrigin]

I have a Next.js application in it using the ReactPlayer to play a streaming, this streaming comes with the m3u8 format. But when I run it in Safari Desktop it fires the onError event and in it shows the error "hlsError".

Environment

• URL attempting to play: https://playerservices.streamtheworld.com/api/livestream-redirect/XHFOFMAAC.m3u8?dist=web-radiodisney
• Browser: Safari Desktop 16.4 (18615.1.26.11.23)
• Operating system: macOS

Other Information

When trying to play the URL in the example page, the stream plays for about a minute and then the stream is cut, I checked the console logs and found that the following error was triggered

[karlhorky]

I think we're experiencing this same issue too - @cookpete can you confirm that this is a current bug in ReactPlayer?

• Browser: Safari 16.6 (18615.3.12.11.2)
• Operating System: macOS Ventura 13.5 (22G74)

I'm attempting to play a different video stream which cuts out within 0.5s of playing the video (unfortunately the video is not public).

This works with Chrome and other browsers - the bug is only related to Safari on macOS, iOS and iPadOS.

I've tried various options, including forceHLS: true, forceSafariHLS: true, and some hlsOptions, but have yet to find a configuration which causes it to work.

What does work

1. ~The video stream works when using the HLS.js demo page directly~ edit: this intermittently fails too
2. Using a <video src="https://.../<filename>.m3u8" /> tag to play the stream without hls.js

These points lead me to believe that this is a bug in ReactPlayer itself.

[karlhorky]

@cookpete looking through the ReactPlayer changelog, it seems that forceSafariHLS was introduced in https://github.com/cookpete/react-player/pull/1560 by @nabeards, but as mentioned in the comment below, was meant to force usage of the native HLS capabilities instead of using hls.js:

@cookpete Was about to integrate the changes, but I just realized that I think you reversed the logic here. The idea is to force the native HLS player on macOS Safari. Instead, you've made it force the hls.js player.

https://github.com/cookpete/react-player/pull/1560#issuecomment-1477246742

Maybe adding this feature as originally intended by @nabeards would actually allow for resolution of this #1627 issue as well, if you consider my point above about <video> working as intended.

[karlhorky]

Workaround

In the meantime, I am going to investigate using other solutions for HLS videos, including:

1. Using video element directly, with src set to the m3u8 file, using the native HLS capabilities of Safari - edit: 👍 this works
2. ~@ducanh2912/react-hls-player, a maintained version of react-hls-player - seems like simpler code (with fewer features than ReactPlayer) and more updated~ edit: was not an option for us, read below

[karlhorky]

Hm, after digging deeper, it does indeed seem to be an (intermittent) issue related to HLS.js - only the Safari native player can play the videos:

• https://github.com/video-dev/hls.js/issues/5709

Edit: this PR should fix it in [email protected]:

• https://github.com/video-dev/hls.js/pull/5710

[karlhorky]

@cookpete So maybe it's indeed best to add an option disable HLS.js for Safari on macOS / iOS / iPadOS, as @nabeards intended to do with #1560

[karlhorky]

@luwes this was closed as "not planned" - does this mean that it doesn't fit the goals of ReactPlayer to have an option to disable HLS.js for Safari on macOS, iOS and iPadOS?

#1560 was merged but the logic was reversed before the PR merge - so the change was actually never made.

[luwes]

have you tried using forceDisableHls on Safari Desktop? I think that should disable hls.js and use native HLS instead

[karlhorky]

Ah, I didn't see the PR by @ablackoff in April 2023 adding this 😮

• https://github.com/cookpete/react-player/pull/1625

That sounds like it could work, thanks!