Dans la version 69, l'extension PictureInPicture est apparue, ce qui vous permet d'afficher la vidéo en haut de toutes les fenêtres. J'ai décidé de tester cette fonctionnalité et de partager les résultats.
J'ai tout de suite trouvé un exemple, mais le bouton d'image dans l'image pour passer en mode Image dans l'image (ci-après PiP) n'était pas disponible, je suis allé vérifier le drapeau
chrome: // flags / # enable-picture-in-picture , la valeur est "Default", car ce drapeau équivaut à "Activé", mais a quand même essayé de l'activer manuellement.
Cela n'a pas aidé, il s'est avéré que nous avions besoin d'un autre indicateur
chrome: // flags / # enable-surfaces-for-videos , la valeur "Default" car elle équivaut à "Disabled".
Allumé et gagné. Ils écrivent également qu'il est nécessaire d'activer les fonctionnalités du drapeau # enable-experimental-web-platform, mais cela a fonctionné sans moi.
Exemple
Faisons un exemple simple, la balise <video />, un bouton pour activer / désactiver le mode PiP, en traitant les événements PiP disponibles.
<html> <head> <title>Chrome 69</title> </head> <body> <video width="320" height="240" controls> <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> </video> <br/> <button> PiP</button> <script> const video = document.querySelector('video'); const button = document.querySelector('button'); if (!document.pictureInPictureEnabled) { button.textContent = ' PiP .'; button.disabled = true; } button.addEventListener('click', () => { if (document.pictureInPictureElement) { document.exitPictureInPicture() .then(() => { }) .catch(() => { }); } else { video.requestPictureInPicture() .then(() => { }) .catch(() => { }); } }); video.addEventListener('enterpictureinpicture', () => { button.textContent = ' PiP'; }); video.addEventListener('leavepictureinpicture', () => { button.textContent = ' PiP'; }); </script> </body> </html>
Vérifiez la disponibilité du mode:
if (document.pictureInPictureEnabled){
C'est simple, si la propriété existe, elle retourne vrai ou faux.
Nous faisons une demande pour démarrer le mode:
button.addEventListener('click', () => { video.requestPictureInPicture() .then(() => { }) .catch(() => { }); });
Si l'autorisation est obtenue, exécutez sinon catch. La demande sera définitivement rejetée si elle n'est pas déclenchée par un événement utilisateur.
Après avoir démarré document.pictureInPictureElement retournera notre élément <video />.
Pour quitter le mode, vous pouvez cliquer sur la croix dans le coin supérieur droit de la fenêtre PiP.
Vous pouvez effectuer une sortie par programme:
button.addEventListener('click', () => { if (document.pictureInPictureElement) { document.exitPictureInPicture() .then(() => { }) .catch(() => { }); } });
Après avoir quitté document.pictureInPictureElement, il renverra à nouveau null.
Événements PiP
Deux événements sont disponibles, le mode PiP activé et désactivé, respectivement:
video.addEventListener('enterpictureinpicture', () => { // button.textContent = ' PiP'; }); video.addEventListener('leavepictureinpicture', () => { // button.textContent = ' PiP'; });
Résumé
Pour le moment, ce mode ne fonctionne qu'avec la balise <video />, mais peut être étendu.
La fenêtre PiP apparaît dans le coin inférieur droit, pour l'instant nous ne pouvons pas l'affecter.
Le mode PiP est incompatible avec le mode plein écran, ou l'un ou l'autre, ce qui est assez logique.
Il ne peut y avoir qu'une seule fenêtre PiP à la fois.
L'onglet sur lequel l'utilisateur a activé le mode PiP est indiqué par l'icône (visible sur le KDPV).
UPD : La nouvelle API est la division W3C appelée WICG (Web Platform Incubator Community Group).
En utilisant cette API, les sites peuvent contrôler quand ouvrir et fermer la fenêtre PiP, créer leur propre bouton de gestion et collecter des statistiques lorsque l'utilisateur utilise PiP.
Certains navigateurs prennent déjà en charge cette fonctionnalité, mais ne sont pas basés sur le W3C
(Par exemple, Opera et Yandex.Browser).
Firefox et Edge n'ont pas encore annoncé la mise en œuvre de la nouvelle API.