HTMLVideoElement : méthode requestPictureInPicture()

Limited availability

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

La méthode requestPictureInPicture() de l'interface HTMLVideoElement émet une demande asynchrone pour afficher la vidéo en mode image dans l'image.

Il n'est pas garanti que la vidéo passera en mode image dans l'image. Si l'autorisation d'entrer dans ce mode est accordée, la promèsse (Promise) retournée sera résolue et la vidéo recevra un évènement enterpictureinpicture pour indiquer qu'elle est désormais en mode image dans l'image.

Syntaxe

requestPictureInPicture()

NotSupportedError DOMException: Levée si la fonctionnalité n'est pas prise en charge (par exemple, désactivée par une préférence utilisateur·ice ou par une limitation de la plateforme).
SecurityError DOMException: Levée si la fonctionnalité est bloquée par une Politique d'autorisations.
InvalidStateError DOMException: Levée si la propriété readState de l'élément vidéo vaut HAVE_NOTHING, ou si l'élément vidéo n'a pas de piste vidéo, ou si l'attribut disablePictureInPicture de l'élément vidéo vaut true.
NotAllowedError DOMException: Levée si document.pictureInPictureElement vaut null et que le document ne dispose pas d'une activation transitoire.

Sécurité

Une activation utilisateur·ice transitoire est requise. L'utilisateur·ice doit interagir avec la page ou un élément d'interface pour que cette fonctionnalité fonctionne.

Exemples

Cet exemple demande à ce que la vidéo passe en mode image dans l'image, et ajoute un gestionnaire d'évènement pour gérer le redimensionnement de la fenêtre flottante.

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