Die HTMLVideoElement-Methode requestPictureInPicture() stellt eine asynchrone Anfrage zum Anzeigen des Videos im Bild-in-Bild-Modus.

Es ist nicht garantiert, dass das Video im Bild-in-Bild-Modus angezeigt 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 mitzuteilen, dass es sich nun im Bild-in-Bild befindet.

Syntax

requestPictureInPicture()

Parameter

Keine.

Rückgabewert

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

Ausnahmen

NotSupportedError DOMException

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

SecurityError DOMException

Wird ausgelöst, wenn das Feature durch eine Permissions Policy blockiert ist.

InvalidStateError DOMException

Wird 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

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

Sicherheit

Transient user activation wird benötigt. Der Benutzer muss mit der Seite oder einem UI-Element interagieren, damit dieses Feature funktioniert.

Beispiele

Dieses Beispiel fordert an, dass das Video in den Bild-in-Bild-Modus wechselt, und setzt einen Ereignislistener auf, um das Vergrößern und Verkleinern des schwebenden Fensters zu handhaben.

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

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Das <video>-Element
• HTMLVideoElement.disablePictureInPicture
• Document.pictureInPictureEnabled
• Document.exitPictureInPicture()
• Document.pictureInPictureElement
• :picture-in-picture