User plays PIP (picture-in-picture) mode and captions appear in the middle of the screen

[liv-yaa]

Description

This appears to be an issue with Video.js specifically where the captions render in the middle of the page during Picture-in-picture mode. Instead of on the PIP player.

When @erikpena created a Vanilla instance of Video.js with the same video, is getting the same issue. Here is a static page for you to see the implementation—

https://github.com/erikpena/erikpena.github.io/blob/main/videojs-pip-captions-issue/index.html
You can actually test it directly with your iOS device (Safari Mobile) by going to this page—

https://erikpena.github.io/videojs-pip-captions-issue/

Here's a screen shot of the bug:
https://user-images.githubusercontent.com/2187347/126220588-9e2464f0-6acb-4b4d-929b-97efe67e5dee.png

Steps to reproduce

Explain in detail the exact steps necessary to reproduce the issue.

1. You can actually test it directly with your iOS device (Safari Mobile) by going to this page—
   https://erikpena.github.io/videojs-pip-captions-issue/
2. Start playing video with captions
3. Open PIP mode
4. Captions show in the middle of the screen

Results

Expected

User plays PIP (picture-in-picture) mode and captions appear in the small player

Actual

Captions show in the middle of the screen.

Error output

Here's a screen shot of the bug:
https://user-images.githubusercontent.com/2187347/126220588-9e2464f0-6acb-4b4d-929b-97efe67e5dee.png

Additional Information

Please include any additional information necessary here. Including the following:

versions

videojs

what version of videojs does this occur with?
[email protected]

browsers

what browser are affected?: Mobile Safari

OSes

what platforms (operating systems and devices) are affected? iOS

plugins

are any videojs plugins being used on the page? If so, please list them below.
videojs-mux-kit

[welcome]

👋 Thanks for opening your first issue here! 👋

If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.
To help make it easier for us to investigate your issue, please follow the contributing guidelines.

[mister-ben]

The HLS playback, display of in-manifest captions and PIP implementation are all native to Safari, not under Video.js's control. You'll see the same behaviour with a simple video element, and also on desktop Safari.

I think this is new - I don't recall seeing it before - but It's likely an intentional "feature" as the text on the PIP video is so small.

[dioramayuanito]

you use videojs-hlsjs-plugin from streamroot, dont forget to write it in "plugins" information

[dylanjha]

@mister-ben is there a possible workaround?

For example, listening for the enterpip / exitpip and disabling the captions on the video.js side (and while in pip mode letting safari still display them in the player)?

[erikpena]

Aside from other workarounds that could potentially be used: I wonder if there is either CSS styling or configuration that we can add to at least cause the subtitling to be displayed over the video placeholder (the black area that indicates that the video is in PIP mode). Is that possible?

[gkatsev]

We did have an issue related to captions last year that we worked around with via #6673.
Does this happen with specific versions of iOS? I just tried on my ipad and wasn't able to reproduce. I'll try the iphone I have once it charges for a bit.
Also, do those extra set of captions continue showing up when you switch to another app?

@dylanjha that won't help because as far as I can tell from the example, there's just the one subtitle track, Video.js isn't duplicating tracks, so, turning them off will turn it off in the PiP as well.

[erikpena]

So the above test was experienced on my iPhone Xs, iOS 14.6.

I also cracked open my iPad Air (3rd generation) running iOS 14.7 and experienced the same situation (see below screenshot):

Also (FWIW) I also checked out the fix sample on #6673 and am seeing the same behavior:

[gkatsev]

huh, weird, I can reproduce it now but wasn't able to reproduce it earlier.

[gkatsev]

I guess one good thing is that it doesn't stay up on the screen when you exit safari.

[gkatsev]

I think we should open a bug on webkit for this. If I resize the PiP to be smaller, I can see the captions on screen hiding because the container isn't sized larger than the video itself.
Setting overflow: hidden on the player element seems to hide it, which might be an ok workaround. Especially if we only do so when we enter PiP on iOS and remove it when we exit PiP.

[erikpena]

Hey @gkatsev,
I just tried that but had to do the overflow on a wrapper div for whatever reason. That looks to do the trick.

https://erikpena.github.io/videojs-pip-captions-issue/workaround-overflow.html

I think we'll introduce this as anything else requires styling the shadow dom and that can break the iOS PIP functionality too easily.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.