HTMLVideoElement : évènement enterpictureinpicture

Limited availability

Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.

L'évènement enterpictureinpicture est déclenché lorsque le HTMLVideoElement passe avec succès en mode image dans l'image.

Cet évènement n'est pas annulable et ne se propage pas.

Syntaxe

Utilisez le nom de l'évènement dans des méthodes comme addEventListener(), ou définissez une propriété de gestionnaire d'évènement.

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

onenterpictureinpicture = (event) => { }

Type d'évènement

Un objet PictureInPictureEvent. Hérite de Event.

Propriétés de l'évènement

Cette interface hérite également des propriétés de son parent Event.

Ces exemples ajoutent un gestionnaire d'évènement pour l'évènement enterpictureinpicture de HTMLVideoElement, puis affichent un message lorsque ce gestionnaire réagit au déclenchement de l'évènement.

Avec addEventListener() :

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

function onEnterPip() {
  console.log("Mode image dans l'image activé !");
}

video.addEventListener("enterpictureinpicture", onEnterPip);

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

Avec la propriété de gestionnaire d'évènement onenterpictureinpicture :

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

function onEnterPip() {
  console.log("Mode image dans l'image activé !");
}

video.onenterpictureinpicture = onEnterPip;

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