Publié le 5 février 2025
À partir de Chrome 120, les applications Web de visioconférence peuvent ouvrir automatiquement une fenêtre Picture-in-picture lorsque l'utilisateur quitte l'onglet actuel. Cette fonctionnalité est utile pour les présentateurs qui souhaitent voir et interagir avec les participants en temps réel pendant qu'ils présentent un document ou utilisent d'autres onglets ou fenêtres. Pour en savoir plus, consultez Picture-in-picture automatique pour les applications Web de visioconférence.
À partir de Chrome 134, les applications Web qui diffusent du contenu audio ou vidéo peuvent passer automatiquement en mode Picture-in-picture. Cela signifie que les lecteurs de musique et de vidéo sur le Web peuvent désormais passer facilement à une mini-fenêtre de lecteur lorsque l'utilisateur change d'onglet, ce qui élimine la nécessité d'une activation manuelle.
Pour prendre en charge ces cas d'utilisation de la lecture multimédia, à partir de Chrome 134, les applications Web pour ordinateur peuvent passer automatiquement en mode Picture-in-picture, avec quelques restrictions pour garantir une expérience utilisateur positive. Une application Web ne peut utiliser le mode Picture-in-picture automatique pour la lecture multimédia que si elle remplit toutes les conditions suivantes:
L'URL du frame supérieur est sécurisée selon le service de navigation sécurisée.
Le contenu multimédia se trouve dans le cadre supérieur.
Le contenu multimédia a été audible au cours des deux dernières secondes.
Le contenu multimédia est en mode audio.
Le contenu multimédia est en cours de lecture.
Un gestionnaire d'action de session multimédia pour l'action
"enterpictureinpicture"
a été enregistré.Le seuil de l'indice d'engagement multimédia de l'utilisateur a été dépassé, ce qui indique que l'utilisateur consomme fréquemment des contenus multimédias dans cette application Web. Cela s'applique si le paramètre du navigateur de l'utilisateur est "Peut demander à passer en mode Picture-in-picture". Si l'utilisateur autorise explicitement l'application Web à passer en mode Picture-in-picture, cette condition ne s'applique pas.
![Paramètre Picture-in-picture automatique dans le volet d'informations sur le site du navigateur Chrome.](https://developer.chrome.com/static/blog/automatic-picture-in-picture-media-playback/image/browser-setting.jpg?hl=fr)
Le bug 386193409 suit l'implémentation des conditions de diffusion pour faciliter le débogage et l'implémentation.
Notez que si une autre fenêtre Picture-in-picture est déjà ouverte, Chrome ne déclenche pas le mode Picture-in-picture automatique. Cette règle ne s'applique pas si la fenêtre Picture-in-picture existante a été ouverte automatiquement et est sur le point de se fermer.
Lorsqu'une application Web répond aux exigences, le changement de focus vers un autre onglet déclenche la fonction de rappel du gestionnaire d'action de session multimédia pour l'action "enterpictureinpicture"
. Cela permet à l'application Web d'ouvrir une fenêtre Picture-in-picture sans geste de l'utilisateur. Une boîte de dialogue d'autorisation peut alors s'afficher pour demander à l'utilisateur s'il souhaite autoriser le site à passer automatiquement en mode Picture-in-picture à chaque fois, seulement cette fois-ci ou jamais.
![Superposition d'autorisation dans la fenêtre Picture-in-picture demandant à l'utilisateur s'il souhaite autoriser le site à passer automatiquement en Picture-in-picture.](https://developer.chrome.com/static/blog/automatic-picture-in-picture-media-playback/image/pip-window-popup.jpg?hl=fr)
Vous pouvez utiliser l'API Picture-in-picture pour <video> pour ouvrir une fenêtre Picture-in-picture à partir d'un élément HTML <video>
ou l'API Picture-in-picture pour les documents pour ouvrir une fenêtre toujours au premier plan à remplir avec du contenu HTML arbitraire. La fenêtre Picture-in-picture n'est pas sélectionnée lorsqu'elle est ouverte et se ferme automatiquement lorsque la page redevient visible.
L'exemple suivant montre comment lire un élément <video>
HTML lorsqu'un utilisateur clique sur un bouton. Ensuite, enregistrez de manière sécurisée un gestionnaire d'action de session multimédia pour l'action "enterpictureinpicture"
avec une fonction de rappel qui ouvre une fenêtre Picture-in-picture. Cette fenêtre contient la vidéo avec l'API Picture-in-picture pour <video>.
const video = document.querySelector("video");
async function onPlayButtonClick() {
// Play video.
await video.play();
}
try {
// Request video to automatically enter picture-in-picture when eligible.
navigator.mediaSession.setActionHandler("enterpictureinpicture", async () => {
await video.requestPictureInPicture();
});
} catch (error) {
console.log("The enterpictureinpicture action is not yet supported.");
}
Essayez la démo du lecteur VideoJS qui présente l'API Picture-in-Picture pour les documents, ou jouez avec les exemples Video Media Session et Audio Media Session.
Interagir et envoyer des commentaires
Si vous avez des commentaires ou rencontrez des problèmes, vous pouvez les partager sur crbug.com.
Ressources
Remerciements
Merci à Benjamin Keen et Frank Liberato pour leurs avis.