React-player: Hls video not playing on iOS

[intelligence]

Current Behavior

Struggling with getting HLS content from Vimeo to work. As it is now, it works perfectly on desktop in both Safari and Chrome. But on iOS the video won't load and there's no errors in the console. I've tried using the HLS stream available on your demo site, but to no avail either. Surprisingly I am able to use HLS on your demo on my phone.

onReady is not triggered on iOS.

Updated to latest version of react-player, same issue.
Tried using newest version of hls.js, same issue.

I've been working on this project for some time and have not seen this issue before. I did however switch from selfhosted mp4 to HLS from Vimeo on my last stint on the project, so it might have been there all the time. Only tested on desktop afaik.

Expected Behavior

Media should play

Reduced test case

https://heuristic-lewin-2f590c.netlify.com/

ReactPlayer implementation

<ReactPlayer 
  ref={this.ref}
  url='https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8'
  width='100%'
  height='100%'
  playing={this.state.playing}
  onReady={this.onReady}
  onEnded={this.onEnd}
  onPlay={this.onPlay}
  onPause={this.onPause}
  onError={(e) => console.log('onError', e)}
  playsinline={true}
  config={{
    file: { 
      attributes: { 
        preload: 'none',
        //forceHLS: true,
      },
      hlsOptions: {
        //autoStartLoad: false,
        startLevel: 3
      }
    } 
  }}
/>

[paulincai]

Hi there,
IOS will handle HLS outside the react-player. Please see the configuration I use in order to prevent IOS from using HLS with player.
This config is a direct prop of your ReactPlayer tag you will just need to determine the variable isSafari based on your context.
I personally get it this way
const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent)

javascript const config = { file: { forceHLS: !isSafari, forceVideo: true, hlsVersion: '0.12.4', attributes: { poster: feed && feed.actionUrl && feed.actionUrl.image, disablePictureInPicture: true } } }

[intelligence]

Great, thanks! I've been using video.js previously and if I remember correctly it checks this by itself.

@CookPete Maybe good idea to include or state this above example in the docs to avoid confusion? :)

Thanks for a great video player!

[cookpete]

@CookPete Maybe good idea to include or state this above example in the docs to avoid confusion?

There is already a crude check for iOS which prevents hls.js from kicking in:

https://github.com/CookPete/react-player/blob/4c4e0b5fb3321d1454017426d8adf2bb37ce1ac8/src/players/FilePlayer.js#L122-L124

I'm assuming this problem occurred because your URL changed and could no longer be parsed as a HLS stream. forceHls is already in the readme under the file config: