Depuis avril 2017, Chrome pour Android O est compatible avec le mode Picture-in-Picture.
Il permet aux utilisateurs de lire un élément <video> dans une petite fenêtre superposée qui n'est pas bloquée par d'autres fenêtres, afin qu'ils puissent regarder tout en faisant autre chose.
Voici comment cela fonctionne: ouvrez Chrome, accédez à un site Web contenant une vidéo et lancez la lecture en plein écran. Appuyez ensuite sur le bouton d'accueil pour accéder à l'écran d'accueil Android. La vidéo en cours de lecture passe automatiquement en mode Picture-in-Picture. C'est tout ! Plutôt cool, non ?
C'est bien, mais qu'en est-il des ordinateurs ? Que faire si le site Web souhaite contrôler cette expérience ?
La bonne nouvelle est qu'une spécification d'API Web Picture-in-Picture est en cours d'élaboration. Cette spécification vise à permettre aux sites Web d'initier et de contrôler ce comportement en exposant l'ensemble de propriétés suivant à l'API :
- Envoyez une notification au site Web lorsqu'une vidéo passe en mode Picture-in-picture et en sort.
- Autoriser le site Web à déclencher Picture-in-picture sur un élément vidéo via un geste de l'utilisateur.
- Autorisez le site Web à quitter le mode Picture-in-picture.
- Autorisez le site Web à vérifier si le mode Picture-in-picture peut être déclenché.
Voici à quoi cela peut ressembler :
<video id="video" src="https://example.com/file.mp4"></video>
<button id="pipButton"></button>
<script>
// Hide button if Picture-in-Picture is not supported.
pipButton.hidden = !document.pictureInPictureEnabled;
pipButton.addEventListener('click', function() {
// If there is no element in Picture-in-Picture yet, let's request Picture
// In Picture for the video, otherwise leave it.
if (!document.pictureInPictureElement) {
video.requestPictureInPicture()
.catch(error => {
// Video failed to enter Picture-in-Picture mode.
});
} else {
document.exitPictureInPicture()
.catch(error => {
// Video failed to leave Picture-in-Picture mode.
});
}
});
</script>
Commentaires
Alors, qu'en pensez-vous ? Veuillez envoyer vos commentaires et signaler les problèmes dans le dépôt WICG Picture-in-Picture. Nous avons hâte de connaître votre avis.
Empêcher le comportement par défaut de PIP sur Android
Aujourd'hui, vous pouvez empêcher la vidéo d'utiliser le comportement PiP par défaut d'Android dans Chrome en répondant à un événement de redimensionnement et en détectant quand la taille de la fenêtre a changé de manière significative (voir le code ci-dessous). Cette solution n'est pas recommandée en tant que solution permanente, mais elle constitue une option temporaire jusqu'à l'implémentation de l'API Web.
// See whether resize is small enough to be PiP. It's a hack, but it'll
// work for now.
window.addEventListener('resize', function() {
if (!document.fullscreenElement) {
return;
}
var minimumScreenSize = 0.33;
var screenArea = screen.width * screen.height;
var windowArea = window.outerHeight * window.outerWidth;
// If the size of the window relative to the screen is less than a third,
// let's assume we're in PiP and exit fullscreen to prevent Auto PiP.
if ((windowArea / screenArea) < minimumScreenSize) {
document.exitFullscreen();
}
});