Hls video not playing on iOS

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)

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

[CanTheAlmighty]

Hi guys, I wonder if someone can give me an idea to solve my problem. I’m using HLS streaming in my app and faced this issue (hsl not working in IOS). The problem is that I’m using hlsOptions property with a specific xhrSetup config to set an authentication token for every chunk. Since IOS don’t use hls.js I have no idea where I can put the authentication config. Any Ideas? thanks!

I solved this issue a while ago using ONLY query params, as header params are never to be trusted with HLS, for example:

mysite.com/somevideo?auth=<authtoken>

For the initial video, on my backend, I retrieve the playlist from S3, and then sign each segment, sort of like “if end lines with .m3u8 add a ?auth=”

mysite.com/somevideo/720p/playlist.m3u8?auth=<authtoken>

And finally I also sign all chunks using AWS Cloudfront tokens (this depends where you are hosting your video).

But in essence, everything relies on using only authentication via query params.