Picture-in-Picture API

PictureInPictureWindow

Repräsentiert das schwebende Videofenster; enthält die Eigenschaften width und height sowie eine onresize-Ereignisbehandlungseigenschaft.

PictureInPictureEvent

Repräsentiert ereignisbezogene Bild-in-Bild-Ereignisse, einschließlich enterpictureinpicture, leavepictureinpicture und resize.

Die Bild-in-Bild-API fügt den Schnittstellen HTMLVideoElement und Document Methoden hinzu, um das schwebende Videofenster ein- und auszuschalten.

HTMLVideoElement.requestPictureInPicture()

Fordert an, dass der Benutzeragent das Video in den Bild-in-Bild-Modus versetzt.

Document.exitPictureInPicture()

Fordert an, dass der Benutzeragent das Element im Bild-in-Bild-Modus zurück in seine ursprüngliche Box bringt.

Die Bild-in-Bild-API erweitert die Schnittstellen HTMLVideoElement, Document und ShadowRoot um Eigenschaften, die dazu verwendet werden können, um zu bestimmen, ob der schwebende Videofenstermodus unterstützt und verfügbar ist, ob der Bild-in-Bild-Modus momentan aktiv ist und welches Video schwebt.

HTMLVideoElement.disablePictureInPicture

Die disablePictureInPicture-Eigenschaft gibt dem Benutzeragent einen Hinweis, das Bild-in-Bild nicht den Benutzern vorzuschlagen oder es automatisch anzufordern.

Document.pictureInPictureEnabled

Die pictureInPictureEnabled-Eigenschaft gibt an, ob es möglich ist, den Bild-in-Bild-Modus zu aktivieren oder nicht. Dies ist false, wenn der Bild-in-Bild-Modus aus irgendeinem Grund nicht verfügbar ist (z.B. wurde die "picture-in-picture"-Funktion untersagt oder der Bild-in-Bild-Modus wird nicht unterstützt).

Document.pictureInPictureElement / ShadowRoot.pictureInPictureElement

Die pictureInPictureElement-Eigenschaft gibt an, welches Element derzeit im schwebenden Fenster (oder im Shadow-DOM) angezeigt wird. Ist dieser Wert null, gibt es im Dokument (oder im Shadow-DOM) keinen Knoten im Bild-in-Bild-Modus.

Die Bild-in-Bild-API definiert drei Ereignisse, die verwendet werden können, um zu erkennen, wann der Bild-in-Bild-Modus umgeschaltet wird und wann das schwebende Videofenster die Größe ändert.

enterpictureinpicture

Wird an ein HTMLVideoElement gesendet, wenn es in den Bild-in-Bild-Modus wechselt.

leavepictureinpicture

Wird an ein HTMLVideoElement gesendet, wenn es den Bild-in-Bild-Modus verlässt.

resize

Wird an ein PictureInPictureWindow gesendet, wenn es die Größe ändert.

Wenn Medienaktionshandler über die Media Session API festgelegt wurden, dann fügt der Browser geeignete Steuerelemente für diese Aktionen dem Bild-in-Bild-Overlay hinzu. Zum Beispiel, wenn eine "nexttrack"-Aktion festgelegt wurde, könnte im Bild-in-Bild-Ansicht eine Schaltfläche zum Überspringen angezeigt werden. Es gibt keine Unterstützung für das Hinzufügen von benutzerdefinierten HTML-Schaltflächen oder -Steuerelementen.

Die :picture-in-picture CSS Pseudo-Klasse passt das Videoelement an, das aktuell im Bild-in-Bild-Modus ist, und ermöglicht es Ihnen, Ihre Stylesheets so zu konfigurieren, dass sie automatisch die Größe, den Stil oder das Layout von Inhalten anpassen, wenn ein Video zwischen Bild-in-Bild- und traditionellem Präsentationsmodus wechselt.

Die Verfügbarkeit des Bild-in-Bild-Modus kann mit Permissions Policy gesteuert werden. Die Bild-in-Bild-Modus-Funktion wird durch den String "picture-in-picture" identifiziert, mit einem Standarderlaubniswert von *, was bedeutet, dass der Bild-in-Bild-Modus sowohl im obersten Dokumentkontext als auch in verschachtelten Browsing-Kontexten erlaubt ist, die aus derselben Herkunft wie das oberste Dokument geladen werden.

In diesem Beispiel wird ein Video auf einer Webseite präsentiert. Durch Klicken auf die Schaltfläche unten kann der Benutzer das schwebende Videofenster umschalten.

Dieser Code wird von einem Klick-Handler aufgerufen, wenn der Benutzer auf die Schaltfläche "Bild-in-Bild umschalten" klickt:

function togglePictureInPicture() {
  if (document.pictureInPictureElement) {
    document.exitPictureInPicture();
  } else if (document.pictureInPictureEnabled) {
    video.requestPictureInPicture();
  }
}

Dieser Block beginnt damit, den Wert des Attributs pictureInPictureElement des document zu überprüfen.

Wenn der Wert nicht null ist, ist es das Element, das sich derzeit im Bild-in-Bild-Modus befindet, also in einem schwebenden Fenster. Wir rufen document.exitPictureInPicture() auf, um das Video in seine ursprüngliche Box zurückzubringen.

Wenn der Wert null ist, befindet sich kein Video im schwebenden Fenster. Daher können wir ein Video anfordern, in den Bild-in-Bild-Modus zu wechseln. Dies tun wir, indem wir HTMLVideoElement.requestPictureInPicture() auf das <video>-Element aufrufen.

• HTMLVideoElement.requestPictureInPicture()
• HTMLVideoElement.disablePictureInPicture
• Document.pictureInPictureEnabled
• Document.exitPictureInPicture()
• Document.pictureInPictureElement
• :picture-in-picture
• Die Document Picture-in-Picture API