How to determine type of leaving picture in picture mode ?

[kmsheng]

Is there any way to determine what button was triggered in leavepictureinpicture event ?

[beaufortfrancois]

It's not possible as far as I know. Out of curiosity, what is your case?

[kmsheng]

@beaufortfrancois I have a streamer page that has a video element, once I open the picture-in-picture window and switch to other page. I need to go back to the streamer page by clicking the Back to tab button.

[kmsheng]

There's a workaround to solve this issue, but it fails for the paused video.

[beaufortfrancois]

Sorry, it's not clear to me what's the use case yet. If there were a reason string in onleavepictureinpicture for instance, what would it allow you to do?

video.onleavepictureinpicture = (event) => {
  if (event.reason == "backToTab") {
    // What would you differently?
  } else {
    // Do what you do.
  }
};

[kmsheng]

@beaufortfrancois Hey, appreciate your response. Then it would allow me to go back to the original streamer page by clicking the “Back to tab” button of pip video. It’s not really a full page redirect, it’s a frontend route change triggered by vue router. ( I hide my video element in other page, but it’s still on DOM tree )

[kmsheng]

@beaufortfrancois I don’t know if my use case is common or not, most of the demos I see online that “back to tab” usually happens on the same page.

[beaufortfrancois]

I wonder if using the Page Visibility API would be enough in your use case to know when the tab is visible again. What do you think?

[kmsheng]

Probably not, because it’s on the same tab.

[kmsheng]

YouTube has a similar approach, but it’s done with a regular fixed position DOM element ( not using pip api )

[beaufortfrancois]

You may want to use the Document Picture-in-Picture API. Look at https://developer.chrome.com/docs/web-platform/document-picture-in-picture/

[kmsheng]

Yes, documentPictureInPicture is a desirable solution if it has a better browser support rate.

[kmsheng]

I've created a simple demo video to illustrate the use case. https://www.youtube.com/watch?v=bNuw1CpZSKY

[kmsheng]

In above video, when I click the close button, I want to stay in the about page. Currently there's no way to distinguish between close btn and back to tab button. Reason string would be a good fit in this example.

[beaufortfrancois]

We'll monitor how many people will vote for this issue then and we'll see if adding a reason string should be added to the onleavepictureinpicture event listener.

[kmsheng]

Sure, thank you for your support : )