HLS streaming on iOS Safari results in audio without video

[kylekz]

Context: iPhone 14 Pro Max, iOS 17.3.1, Next 14, React 18, video content is an HLS .m3u8 stream on cloudfront.

<MediaPlayer title={title} src={videoUrl} controls={true}>
  <MediaProvider>
    {thumbnailUrl !== undefined && (
      <Poster
        className="absolute inset-0 block h-full w-full rounded-xl opacity-0 transition-opacity data-[visible]:opacity-100 [&>img]:h-full [&>img]:w-full [&>img]:object-cover"
        src={thumbnailUrl}
        alt={title ?? "video"}
      />
    )}
  </MediaProvider>
</MediaPlayer>

I've been using react-player and just put up with the fact that videos wouldn't play on iOS. Decided to try fix it, so trying vidstack out and gotten a bit further. I hit play, audio starts playing but video is just a black screen. I have to dismiss the fullscreen video and open it back up to get video to play.

I've seen one issue mentioning this in the react-player repo with no activity for a month, which leads me to believe this could possibly be an issue with hls.js.

Also seen the MediaSource caniuse page showing only partial support for it, so at this point I'm assuming HLS video just straight up will not work correctly on iOS.

Putting this in discussion as I'm unsure if this a bug or iOS just not playing nice (as usual). If it's a bug then I can make a more detailed post with video etc.

[mihar-22]

The MediaSource API is not available on iPhone. hls.js has only recently started to be supported on iPhone via ManagedMediaSource (iOS 17+), so it might be a bug but I haven't seen an issue so far with playback. In general, it sounds like a decoding issue so the stream needs to be further debugged.

[kylekz]

Makes sense. Here's an example stream URL if it helps:

https://customer-odzj4xy9rztfqeuh.cloudflarestream.com/43a9e7af127b28ec8d83ce97c67b313e/manifest/video.m3u8