Avant l'API Document Picture-in-picture, il était uniquement possible d'insérer un élément <video> HTML dans une fenêtre Picture-in-picture. Cette nouvelle API permet d'ouvrir une fenêtre toujours au premier plan pouvant être remplie avec du contenu HTML arbitraire. Elle est disponible en tant qu'phase d'évaluation à partir de Chrome 111 sur ordinateur.
La nouvelle API offre bien plus que l'API Picture-in-picture pour <video>. Par exemple, vous pouvez fournir des commandes et des informations personnalisées (sous-titres, playlists, barre de défilement de la durée, et cliquer sur "J'aime" et "Je n'aime pas" pour les vidéos) afin d'améliorer l'expérience des utilisateurs avec le lecteur vidéo Picture-in-picture.
Avec un document en Picture-in-picture complet, les applications Web de visioconférence peuvent combiner plusieurs flux vidéo dans une seule fenêtre Picture-in-picture, sans avoir à recourir au piratage de canevas. Ils peuvent également proposer 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/désactiver le 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);
});
}
Pour en savoir plus, consultez la section Picture-in-picture pour tous les éléments, pas seulement <video>.
Les commentaires des développeurs sont très importants à ce stade. Veuillez donc signaler les problèmes sur GitHub en nous envoyant des suggestions et des questions.
Image principale de Jakob Owens.