W3cubDocs

/Web APIs

DocumentPictureInPictureEvent

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The DocumentPictureInPictureEvent interface of the Document Picture-in-Picture API is the event object for the enter event, which fires when the Picture-in-Picture window is opened.

Event DocumentPictureInPictureEvent

Constructor

DocumentPictureInPictureEvent() Experimental

Creates a new DocumentPictureInPictureEvent object instance.

Instance methods

Inherits methods from its parent, Event.

Instance properties

Inherits properties from its parent, Event.

window Read only Experimental

Returns a Window instance representing the browsing context inside the DocumentPictureInPicture window the event was fired on.

Examples

js

documentPictureInPicture.addEventListener("enter", (event) => {
  const pipWindow = event.window;
  console.log("Video player has entered the pip window");

  const pipMuteButton = pipWindow.document.createElement("button");
  pipMuteButton.textContent = "Mute";
  pipMuteButton.addEventListener("click", () => {
    const pipVideo = pipWindow.document.querySelector("#video");
    if (!pipVideo.muted) {
      pipVideo.muted = true;
      pipMuteButton.textContent = "Unmute";
    } else {
      pipVideo.muted = false;
      pipMuteButton.textContent = "Mute";
    }
  });

  pipWindow.document.body.append(pipMuteButton);
});

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
DocumentPictureInPictureEvent 116 116 No No 102 No No No No No No No
DocumentPictureInPictureEvent 116 116 No No 102 No No No No No No No
window 116 116 No No 102 No No No No No No No

See also

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/DocumentPictureInPictureEvent