steimelchrome / document-pip-explainer

Explainer for the Document Picture-in-Picture API feature
11 stars 2 forks source link

Can there be more than one PiP window at a time? #4

Open domenic opened 2 years ago

domenic commented 2 years ago

If the answer is yes, then how do the enterpictureinpicture and exitpictureinpicture events work?

If the answer is no, then what is the scope of this restriction? E.g. if it's one PiP window per Window, then pages can get around it by creating iframes... maybe one per top-level window?

steimelchrome commented 2 years ago

The existing PiP API for HTMLVideoElements doesn't necessarily prevent multiple PiP windows (in fact, I believe Firefox allows for multiple PiP windows), but Chrome only allows for one global PiP window across all websites.

So the technical answer is yes. I'm not entirely sure what you mean by how do they work, but enterpictureinpicture and exitpictureinpicture will be fired in the opener window with a handle to the PictureInPictureWindow object that is opening or closing.

Some sample code copied from the explainer where we access the PiP window from the event object:

// Called when the PiP window has closed.
function onExitPiP(event) {
  // Remove PiP styling from the container.
  const playerContainer = document.querySelector('#player-container');
  playerContainer.classList.remove('pip-mode');

  // Add the player back to the main window.
  const player = event.pictureInPictureWindow.document.querySelector('#player');
  playerContainer.append(player);

  pipWindow = null;
}
domenic commented 2 years ago

I'm not entirely sure what you mean by how do they work

I see, I skimmed too fast and didn't realize the event object had a reference to the window.

I think it's a little strange to fire the events globally on the parent document. Did you consider firing them on the PictureInPictureWindow object instead?