React-player: HLS stream does not play until the end on IOS devices

[rpaschoal]

Current Behavior

HLS stream does not play until the end on IOS devices.

Expected Behavior

HLS stream should play all chunks until the end. Expected react-player to reach the played property with a value of 1.

Steps to Reproduce

Given you are using an IOS device:

1. Go to the demo page: https://cookpete.com/react-player/
2. Load the HLS (m3u8) sample file
3. Hit the play button and let it play until react-player stops playing

Environment

• URL attempting to play: https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8
• Browser: Both Chrome and Safari for IOS, updated to latest stable
• Device/Operating system: IPhone XS Max (software 13.3.1)

[mtofful]

I have the same issue, it can be reproduced using Google Search app for iOS latest stable version and also Chrome for iOS the latest stable version. The option used in the demo website is HLS (m3u8) it stays stuck in -0:01

[mtofful]

Hi, @CookPete do you have any idea, or do you suspect what could be causing the issue? If you could guide me I could attempt to fix it, please 🙏

[cookpete]

This looks like a problem with the browsers in iOS, not ReactPlayer.

I can visit https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8 directly in iOS Chrome and I get the same problem.

This person has the same problem in a native iOS app: https://stackoverflow.com/questions/20077118/http-streaming-video-playbackdidfinish-not-called

Could you use onProgress and check playedSeconds against the duration to call a function when the stream has _almost_ finished?

[rpaschoal]

Hi @CookPete , thanks for coming back to us on this one. This is definitely something that has come to my mind as a last resort. I was just wondering if you wanted to include such behavior in react-player.

[cookpete]

I was just wondering if you wanted to include such behavior in react-player.

I wouldn't want to include a fix like that in ReactPlayer. It feels very hacky, and we'd be cutting off the last second or so from any HLS stream, even if the device doesn't have the problem.