W3cubDocs

/Web APIs

DocumentPictureInPictureEvent: DocumentPictureInPictureEvent() constructor

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

The DocumentPictureInPictureEvent() constructor creates a new DocumentPictureInPictureEvent object instance.

Syntax

js

new DocumentPictureInPictureEvent(type, init)

Parameters

type

A string representing the type of event. In the case of DocumentPictureInPictureEvent this is always enter.

init

An object containing the following properties:

window

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

Examples

A developer would not use this constructor manually. A new DocumentPictureInPictureEvent object is constructed when a handler is invoked as a result of the enter event firing.

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

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/DocumentPictureInPictureEvent