Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

HTMLVideoElement: enterpictureinpicture Ereignis

Eingeschränkt verfügbar

Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.

Das enterpictureinpicture Ereignis wird ausgelöst, wenn das HTMLVideoElement erfolgreich in den Bild-in-Bild-Modus wechselt.

Dieses Ereignis kann nicht abgebrochen werden und wird nicht weitergegeben.

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignis-Handler-Eigenschaft.

js
addEventListener("enterpictureinpicture", (event) => { })

onenterpictureinpicture = (event) => { }

Ereignistyp

Ein PictureInPictureEvent. Erbt von Event.

Event PictureInPictureEvent

Ereigniseigenschaften

Diese Schnittstelle erbt auch Eigenschaften von ihrem übergeordneten Event.

Beispiele

Diese Beispiele fügen einen Ereignis-Listener für das enterpictureinpicture Ereignis des HTMLVideoElement hinzu und senden dann eine Nachricht, wenn der Ereignis-Handler auf das Ereignis reagiert hat.

Verwendung von addEventListener():

js
const video = document.querySelector("#video");
const button = document.querySelector("#button");

function onEnterPip() {
  console.log("Picture-in-Picture mode activated!");
}

video.addEventListener("enterpictureinpicture", onEnterPip);

button.onclick = () => {
  video.requestPictureInPicture();
};

Verwendung der onenterpictureinpicture Ereignis-Handler-Eigenschaft:

js
const video = document.querySelector("#video");
const button = document.querySelector("#button");

function onEnterPip() {
  console.log("Picture-in-Picture mode activated!");
}

video.onenterpictureinpicture = onEnterPip;

button.onclick = () => {
  video.requestPictureInPicture();
};

Spezifikationen

Spezifikation
Picture-in-Picture
# eventdef-htmlvideoelement-enterpictureinpicture
Picture-in-Picture
# dom-htmlvideoelement-onenterpictureinpicture

Browser-Kompatibilität

Siehe auch