DocumentPictureInPictureEvent

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Sicherer Kontext: Diese Funktion ist nur in sicheren Kontexten (HTTPS) in einigen oder allen unterstützenden Browsern verfügbar.

Das DocumentPictureInPictureEvent-Interface der Document Picture-in-Picture API ist das Ereignisobjekt für das enter-Ereignis, welches ausgelöst wird, wenn das Picture-in-Picture-Fenster geöffnet wird.

Event DocumentPictureInPictureEvent

Konstruktor

DocumentPictureInPictureEvent() Experimentell

Erstellt eine neue Instanz eines DocumentPictureInPictureEvent-Objekts.

Instanzeigenschaften

Erbt Eigenschaften von seinem Elternobjekt, Event.

window Schreibgeschützt Experimentell

Gibt eine Window-Instanz zurück, die den Browsing-Kontext innerhalb des DocumentPictureInPicture-Fensters repräsentiert, auf dem das Ereignis ausgelöst wurde.

Instanzmethoden

Erbt Methoden von seinem Elternobjekt, Event.

Beispiele

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);
});

Spezifikationen

Specification
Document Picture-in-Picture Specification
# documentpictureinpictureevent

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
DocumentPictureInPictureEvent
Experimental
DocumentPictureInPictureEvent() constructor
Experimental
window
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.

Siehe auch