Avant l'API Document Picture-in-picture, il était seulement possible d'insérer un élément HTML <video> dans une fenêtre Picture-in-picture. Cette nouvelle API permet d'ouvrir une fenêtre de visibilité permanente qui peut être remplie avec du contenu HTML arbitraire. Il est disponible en tant que phase d'évaluation à partir de Chrome 111 sur ordinateur.
La nouvelle API fournit beaucoup plus que ce que propose l'API Picture-in-picture pour <video> existante. Par exemple, vous pouvez fournir des commandes et des entrées personnalisées (par exemple, des sous-titres, des playlists, une barre de lecture de l'heure, ou des vidéos "J'aime" et "Je n'aime pas") pour améliorer l'expérience utilisateur avec le lecteur vidéo Picture-in-picture.
Avec un document complet en mode Picture-in-picture, les applications Web de visioconférence peuvent combiner plusieurs flux vidéo dans une seule fenêtre Picture-in-picture sans avoir à recourir à des piratages du canevas. Ils peuvent également fournir des commandes personnalisées, par exemple pour envoyer un message, couper le son d'un autre utilisateur ou lever la main.
L'extrait de code suivant vous montre comment activer ou désactiver le mode Picture-in-picture pour un lecteur vidéo personnalisé.
async function togglePictureInPicture() {
// Close Picture-in-Picture window if any.
if (documentPictureInPicture.window) {
documentPictureInPicture.window.close();
return;
}
// Open a Picture-in-Picture window.
const pipWindow = await documentPictureInPicture.requestWindow({
initialAspectRatio: 640 / 360,
copyStyleSheets: true,
});
// Move video to the Picture-in-Picture window.
const video = document.querySelector("#video");
pipWindow.document.body.append(video);
// Listen for the PiP closing event to move the video back.
pipWindow.addEventListener("unload", (event) => {
const videoContainer = document.querySelector("#videoContainer");
const pipVideo = event.target.querySelector("#video");
videoContainer.append(pipVideo);
});
}
Découvrez la fonctionnalité Picture-in-picture pour n'importe quel élément, pas seulement <video>, pour en savoir plus.
Les commentaires des développeurs sont très importants à ce stade. Veuillez donc signaler les problèmes sur GitHub avec vos suggestions et vos questions.
Image principale par Jakob Owens.