Depuis avril 2017, Chrome pour Android O est compatible avec le Picture-in-picture.
Elle permet aux utilisateurs de lire un élément <video> dans une petite fenêtre de superposition 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 qui contient une vidéo et lisez-la en plein écran. Appuyez ensuite sur le bouton 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 ?
Oui, mais qu’en est-il des ordinateurs de bureau ? Que se passe-t-il si le site Web veut contrôler cette expérience ?
La bonne nouvelle est qu'une spécification d'API Picture-in-picture Web est en cours de rédaction au fur et à mesure. Cette spécification vise à permettre aux sites Web de déclencher et de contrôler ce comportement en exposant l'ensemble de propriétés suivant à l'API:
- Informer le site Web lorsqu'une vidéo passe en mode Picture-in-picture ou la quitte.
- Autoriser le site Web à déclencher le Picture-in-picture sur un élément vidéo via un geste de l'utilisateur.
- Autoriser le site Web à quitter le mode Picture-in-picture.
- Autorisez le site Web à vérifier si le Picture-in-picture peut être déclenché.
Voici à quoi cela pourrait 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 des problèmes dans le dépôt WICG Picture-in-picture. Nous sommes impatients de connaître votre avis !
Empêcher le comportement PIP par défaut d'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 considérablement changé (voir le code ci-dessous). Cette solution n'est pas recommandée en tant que solution permanente, mais elle fournit une option temporaire jusqu'à ce que l'API Web soit implémentée.
// 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();
}
});