support: HLS player not loading manifest / video on iPhone

[jonsadka]

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]

Some minor developments:

• It looks like the video sometimes plays when transitioning between client-side routes (1 ini 10 times)
• Inspecting the HTML, the code block on Mac renders a ShadowRoot while the one on iOS renders a source:

<video 
  class="lazy sc-vm-file sc-vm-file-s" 
  autoplay="" 
  playsinline="" 
  x5-playsinline="" 
  webkit-playsinline=""
  data-poster="https://......."
  loop="" 
  preload="metadata" 
  x-webkit-airplay="allow"
  poster="https://.......
  data-src="https://....m3u8"
  type="application/x-mpegURL"
  data-vs="https://....m3u8"
  src="https://....m3u8"
>
  <source data-src="....m3u8" type="application/x-mpegURL" data-vs="....m3u8" src="....m3u8">
  Your browser does not support the<code class="sc-vm-file">video</code>element.
</video>

@mihar-22 is any of this information useful for debugging or do you have a hunch what could be going on here?

[mihar-22]

Hey @jonsadka I'm sorry I didn't get back to you earlier, currently working on Vime 6 with the new team and it's hard getting to these issues at the moment as we redesign the player from the ground up. I tried to think through a bunch of reasons why but nothing comes to mind off the surface. I'd need to debug it in iOS Safari and walk through the code. Probably something obscure with how that browser renders elements in the Shadow DOM? Unfortunately not sure.

[jonsadka]

I appreciate the response, will keep digging. Thanks Rahim

[jonsadka]

@mihar-22 figured out why the video wasn't loading but not the root cause.

On iPhone, the src attribute was added to the source but missing on the video element. Couldn't pinpoint why but wondering if maybe there is some weird race condition with refresh and / or didSrcSetChange.

As a workaround, I am now setting src explicitly, but now wondering if setting both data-src and src overrides lazy-loading?

  <Hls version="latest" poster={posterUrl}>
    <source data-src={manifestUrl} src={manifestUrl} type="application/x-mpegURL" />
  </Hls>

[mihar-22]

Hey @jonsadka ye you're on the right track... I think the issue is that the DOM hasn't been updated at the time of the media load call so it's a hit or miss after initial load. In other words if the src attribute hasn't updated in the DOM yet from the most recent refresh call, media load will do nothing. This can be fixed by making the load request at the appropriate time by using window.requestAnimationFrame(...). I'll release a patch for it as soon as I can 😄

[jonsadka]

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

[jonsadka]

@mihar-22 any chance you've been able to start tackling this?

[mihar-22]

Hey @jonsadka unfortunately not because I'm completely consumed by the new version of the player for work (have to hit some milestones). I'm really sorry I didn't get around to this but I just don't have the bandwidth. Hopefully once the new player is up and running I'll be able to start squashing bugs and focusing on helping everyone.

[jonsadka]

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

[jonsadka]

Just wanted to update this ticket, bug still persists after updating to the latest versions

Version

• Vime: 5.3.1
• Gatsby: 4.4.0

[Didza]

Can not play with the dash player provided. . .