DocumentPictureInPictureEvent: DocumentPictureInPictureEvent()-Konstruktor

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, bevor Sie diese produktiv verwenden.

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

Der DocumentPictureInPictureEvent()-Konstruktor erstellt eine neue Instanz eines DocumentPictureInPictureEvent-Objekts.

Syntax

js
new DocumentPictureInPictureEvent(type, init)

Parameter

type

Ein String, der den Typ des Ereignisses darstellt. Im Falle von DocumentPictureInPictureEvent ist dies immer enter.

init

Ein Objekt, das die folgenden Eigenschaften enthält:

window

Eine Window-Instanz, die den Browsing-Kontext innerhalb des DocumentPictureInPicture-Fensters darstellt, auf dem das Ereignis ausgelöst wurde.

Beispiele

Ein Entwickler würde diesen Konstruktor nicht manuell verwenden. Ein neues DocumentPictureInPictureEvent-Objekt wird erstellt, wenn ein Handler als Ergebnis des Auslösens des enter-Ereignisses aufgerufen wird.

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
# dom-documentpictureinpictureevent-documentpictureinpictureevent

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch