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 eine asynchrone Anfrage, um das Video im Bild-in-Bild-Modus anzuzeigen.

Es ist nicht garantiert, dass das Video in den Bild-in-Bild-Modus gesetzt wird. Wenn die Berechtigung für diesen Modus erteilt wird, wird das zurückgegebene Promise aufgelöst und das Video erhält ein enterpictureinpicture-Ereignis, um anzuzeigen, dass es sich jetzt im Bild-in-Bild-Modus befindet.

Syntax

js
requestPictureInPicture()

Parameter

Keine.

Rückgabewert

Ein Promise, das auf ein PictureInPictureWindow-Objekt aufgelöst wird, das verwendet werden kann, um zu hören, wann ein Benutzer dieses schwebende Fenster vergrößert oder verkleinert.

Ausnahmen

NotSupportedError DOMException

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

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

InvalidStateError DOMException

Ausgelöst, wenn der readState des Videoelements HAVE_NOTHING ist, oder wenn das Videoelement keine Videospur hat, oder wenn das disablePictureInPicture-Attribut des Videoelements true ist.

NotAllowedError DOMException

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 an, dass das Video in den Bild-in-Bild-Modus wechselt, und setzt einen Ereignislistener, um die Größenänderung 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