HLS stream does not play until the end on IOS devices

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)

[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?

[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.