HTMLVideoElement: requestPictureInPicture() Methode

Limited availability

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

Die HTMLVideoElement Methode requestPictureInPicture() stellt einen asynchronen Antrag, das Video im Bild-im-Bild-Modus anzuzeigen.

Es ist nicht garantiert, dass das Video in den Bild-im-Bild-Modus versetzt wird. Wenn die Berechtigung erteilt wird, in diesen Modus zu wechseln, wird das zurückgegebene Promise erfüllt, und das Video erhält ein enterpictureinpicture-Ereignis, um mitzuteilen, dass es sich jetzt im Bild-im-Bild-Modus befindet.

Syntax

js
requestPictureInPicture()

Parameter

Keine.

Rückgabewert

Ein Promise, das auf ein PictureInPictureWindow Objekt auflöst, das verwendet werden kann, um zu reagieren, wenn ein Benutzer dieses schwebende Fenster verändert.

Ausnahmen

NotSupportedError DOMException

Wird ausgelöst, wenn die Funktion nicht unterstützt wird (zum Beispiel, wenn sie durch eine Benutzereinstellung oder durch eine Plattformbeschränkung deaktiviert ist).

SecurityError DOMException

Wird ausgelöst, wenn die Funktion durch eine Permissions Policy blockiert wird.

InvalidStateError DOMException

Wird ausgelöst, wenn der Lesezustand des Videoelements HAVE_NOTHING ist, oder wenn das Videoelement keine Videospur hat, oder wenn das Attribut disablePictureInPicture des Videoelements true ist.

NotAllowedError DOMException

Wird ausgelöst, wenn document.pictureInPictureElement null ist und das Dokument keine transiente Aktivierung hat.

Sicherheit

Transiente Benutzeraktivierung ist erforderlich. Der Benutzer muss mit der Seite oder einem UI-Element interagieren, damit diese Funktion funktioniert.

Beispiele

Dieses Beispiel fordert, dass das Video in den Bild-im-Bild-Modus wechselt, und setzt einen Ereignis-Listener, um das Ändern der Größe des schwebenden Fensters zu handhaben.

js
function enterPictureInPicture() {
  videoElement.requestPictureInPicture().then((pictureInPictureWindow) => {
    pictureInPictureWindow.addEventListener(
      "resize",
      () => onPipWindowResize(),
      false,
    );
  });
}

Spezifikationen

Specification
Picture-in-Picture
# request-pip

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch