Dual player probably only from iPhone

[Teygeta]

Current Behavior:

Through the use of the code written below, I end up with two overlapping players (see photo below) when I try to watch a video from an Apple iPhone phone.

<media-player
    autoplay
    playsinline
    :src="src"
  >
    <media-provider 
    autoplay
    playsinline />
    <media-video-layout />
  </media-player>

It is as if the Vidstack player is overlaid on top of the "default" player on the phone.

Expected Behavior:

I expect that the phone player will not be shown at the time the Vidstack player is present

Steps To Reproduce:

Use my code shown above on an Apple iPhone phone (I have not tried with ipad)

Environment:

• Framework: Vue
• Meta Framework: Nuxt.js
• Node: 18.0.0
• Device: iPhone
• OS: iOS@17
• Browser: Chrome

Photo:

[mihar-22]

I've seen this before but I believe this is a localhost bug. There is no fullscreen API available on iOS Safari (iPhone), we can't fullscreen the custom UI. I don't know how it's possible. We can add some styles to controls to hide it in this case.

[Teygeta]

I have this problem on a live website and some of my users have also reported the same problem to me.

Yeah. It's also very difficult to diagnose what the hell is going on in iOS.

[mihar-22]

Should be fixed in 1.4.0. If not we can reopen and dig into it. I couldn't repro, this bug is unfortunately random as hell.

[Teygeta]

Edit: I correct myself, in order to see the overlapping player bug, I have to press the button for full screen and then exit the full screen view

P.S.:
I am using cludflare stream and now yet another bug has arisen: every video looks live even though it is not live (in the screenshot, the video has an exact duration of 1:28:30)

[mihar-22]

Figured out why it was incorrectly inferring live stream. The iPhone bug is super weird, I'll see if I can find out what's up. The native UI should not be displayed if playsinline is set.

[mihar-22]

I tested this on iOS@17 on both my phone and the simulator. I thought it mighe be an issue with playsinline not being set in Nuxt but that's not the case either.

Try restarting your browser on your phone and seeing if it's resolved. I need a repro of you current setup. As it stands I can't confirm anything.

UPDATE: I can only repro this if playsinline is not set. I wonder if there's something in your setup preventing it.

[BlakeB415]

I am also experiencing this issue with Nuxt. It is not setting playsinline on the video element.

[mihar-22]

I tested it and it was working. I'm not sure why Nuxt is not setting it in your case? This might be a bug to bring up with them. If I can get a full repro I'll look more into it.

[BlakeB415]

king. I'm not sure why Nuxt is not setting it in your case? This might be a bug to bring up with them. If I can get a full repro I'll look more into it.

Seems to only be an issue with HLS

Edit: nvm it happens with raw mp4 as well.

I'll create a reproduction on stackblitz when I can.

[BlakeB415]

Here is a reproduction.
https://stackblitz.com/edit/github-ndtlmv

I needed to wrap the player in <ClientOnly> to force it to load client side.

A temporary workaround is to use the provider-change event to set the playsinline on the media-player element.

[mihar-22]

Strangely setting it as <media-player playsInline> seems to work. I'm not sure why the attribute is not by Vue.

[mihar-22]

Okay I realized today that playsInline is the property on HTMLVideoElement so some frameworks attempt to map to that prop. I'm pushing a fix out which should resolve this in 1.4.9.

Resolved -> There's another issue that setting playsinline late in iOS doesn't seem to take effect. It has to be set before the src is set, otherwise it won't work.