support: HLS player not loading manifest / video on iPhone

Hi team,

I am using the HLS component and for some reason the video is loading everywhere except Safari on iPhone. All I see is the poster image but the video never loads.

I noticed in the Network tab that while the hls.min.js fallback downloads, the request to the manifest file is never made on the iPhone. There are no errors in the console and confirmed that the rendered HTML on iPhone matches that on the MacBook.

Wondering if anybody has thoughts as to what’s going on or what else can be done?

Devices tested

• ✅ Nokia Lumia 521 on Chrome
• ✅ MacBook Pro on Safari 14
• ✅ MacBook Pro on Chrome
• ✅ MacBook Pro on Firefox
• ✅ iPad Pro on Safari 14
• ❌ iPhone 7 on Safari 13
• ❌ iPhone X on Safari 14
• ❌ iPhone 12 Mini on Safari 14

Code

<Player autoplay muted playsinline aspectRatio="1388:1080" loop>
  <Hls version="latest" poster={posterUrl}>
    <source data-src={manifestUrl} type="application/x-mpegURL" />
  </Hls>
</Player>

Version

• Vime: 5.0.19
• Gatsby: 2.29.2

[jonsadka]

Ah totally understandable. Thanks for your contributions on Vime and excited for the next version!

[jonsadka]

Ahhh nice catch. I appreciate your help on this and thank you for all the work you’re doing here! ❤️