L’API javascript Picture-in-Picture permet aux sites web d’offrir une expérience multi-tâche améliorée aux utilisateurs. Grâce à cette API, vous pouvez placer du contenu web, tel qu’une vidéo ou un élément HTML personnalisé, dans une fenêtre flottante toujours visible par-dessus les autres fenêtres et applications. Cela permet aux utilisateurs de continuer à regarder une vidéo ou d’interagir avec du contenu spécifique tout en naviguant sur d’autres onglets ou en utilisant d’autres programmes.
L’API PIP existait initialement pour l’élément HTML <video>, permettant de placer une vidéo en cours de lecture dans une fenêtre flottante. L’API Document Picture-in-Picture, une extension plus récente, généralise ce concept en autorisant l’affichage de n’importe quel contenu HTML dans la fenêtre PIP.
Exemple d’image dans l’image avec une vidéo
Image dans l’image non supporté
L’API Document Picture-in-Picture offre plusieurs avantages aux développeurs web :
- Amélioration de l’expérience multi-tâche : Les utilisateurs peuvent continuer à interagir avec votre contenu tout en utilisant d’autres applications.
- Flexibilité accrue : Vous n’êtes pas limité aux éléments <video>. Vous pouvez afficher tout type de contenu HTML dans la fenêtre PIP, comme des appels vidéo multi-flux ou des interfaces web interactives.
- Amélioration de l’engagement : En permettant aux utilisateurs de garder votre contenu visible, l’API PIP peut améliorer l’engagement et la fidélisation.
Intégration du mode Picture-in-Picture pour la vidéo dans une page web
L’API Picture-in-Picture (PiP) permet aux utilisateurs de visionner des vidéos dans une fenêtre flottante toujours visible, tout en interagissant avec d’autres applications ou contenus sur leur appareil.
jout d’un écouteur d’événements sur le chargement de la page
Commençons par ajouter un écouteur d’événement qui appelle la fonction startup lorsque la page est complètement chargée. Cela garantit que tous les éléments DOM nécessaires sont disponibles lorsque nous commençons à manipuler la page.
window.addEventListener("load", startup, false);Initialisation des composants
La fonction startup est exécutée lorsque la page est chargée. Elle initialise la variable video avec les éléments DOM correspondants. Ensuite, elle vérifie si le mode Picture-in-Picture est pris en charge par le navigateur en utilisant document.pictureInPictureEnabled.
Si PiP est supporté, l’élément ayant la classe .no-picture-in-picture est supprimé. Ensuite, un bouton est créé pour permettre à l’utilisateur de basculer entre le mode normal et le mode PiP. Ce bouton est ajouté à la barre de contrôle.
function startup() {
video = document.getElementById("video");
if (document.pictureInPictureEnabled) {
document.querySelector(".no-picture-in-picture").remove();
const togglePipButton = document.createElement("button");
togglePipButton.textContent = "Toggle Picture-in-Picture";
togglePipButton.addEventListener("click", togglePictureInPicture, false);
document
.getElementById("controlbar")
.appendChild(togglePipButton);
}
}Gestion de l’activation et de la désactivation du mode Picture-in-Picture
La fonction togglePictureInPicture est appelée lorsque le bouton PiP est cliqué. Elle vérifie si un élément est déjà en mode PiP en utilisant document.pictureInPictureElement. Si c’est le cas, elle appelle document.exitPictureInPicture() pour quitter le mode PiP. Sinon, elle demande à passer la vidéo en mode PiP avec video.requestPictureInPicture().
function togglePictureInPicture() {
if (document.pictureInPictureElement) {
document.exitPictureInPicture();
} else {
if (document.pictureInPictureEnabled) {
video.requestPictureInPicture()
}
}
}Le code complet pour utiliser l’API javascript Picture-in-picture
La structure HTML de base :
<div id="contents">
<h1>Exemple d'image dans l'image avec une vidéo</h1>
<video src="20497210-hd_1920_1080_50fps.mp4" id="video" autoplay loop controls></video>
<div id="controlbar">
<p class="no-picture-in-picture">Image dans l'image non supporté<p>
</div>
</div>Le code javascript :
window.addEventListener("load", startup, false);
let video;
function startup() {
video = document.getElementById("video");
if (document.pictureInPictureEnabled) {
document.querySelector(".no-picture-in-picture").remove();
const togglePipButton = document.createElement("button");
togglePipButton.textContent = "Toggle Picture-in-Picture";
togglePipButton.addEventListener("click", togglePictureInPicture, false);
document
.getElementById("controlbar")
.appendChild(togglePipButton);
}
}
function togglePictureInPicture() {
if (document.pictureInPictureElement) {
document.exitPictureInPicture();
} else {
if (document.pictureInPictureEnabled) {
video.requestPictureInPicture()
}
}
}Ce code permet d’ajouter une fonctionnalité de Picture-in-Picture à une vidéo sur une page web, offrant ainsi une meilleure expérience utilisateur en permettant de regarder des vidéos tout en interagissant avec d’autres contenus. En suivant cette explication, vous devriez maintenant avoir une bonne compréhension de la façon dont cette implémentation fonctionne et de la manière dont vous pouvez l’adapter à vos propres projets.
