J'aimerais utiliser JavaScript pour activer PiP sur les vidéos Youtube. Je suis capable de le faire sur les <video> s HTML mais il semble impossible de le faire sur les <iframe> Youtube. Quelqu'un at-il une piste à ce sujet?
3 Réponses :
Voici un cas de test des développeurs: https://beaufortfrancois.github.io/sandbox/media/iframe-video.html avec PiP
Il y a de nombreux exemples dans la documentation:
En savoir plus sur ce sujet: https://developers.google.com/youtube/iframe_api_reference
et à propos de PiP-Api:
Spécifications de l'API Web Picture-in-Picture: https://wicg.github.io/picture-in-picture , https://levelup.gitconnected.com/pip-videos-in-a-floating-window-452e775555fe?gi = 21f55e7bf6fa
Merci mais les vidéos Youtube ne sont pas des vidéos html natives avec des contrôles natifs comme dans votre exemple.
Les utilisateurs peuvent être en mesure de faire un clic droit deux fois (pour afficher le menu html5) et de sélectionner Image dans l'image, mais il semble impossible de le déclencher par programme depuis l'extérieur de l'iframe en raison de la même politique d'origine pour les iframes. Je n'imagine pas que le paramètre &origin= dans l'URL iframe modifie réellement les en-têtes envoyés depuis youtube, cela n'a pas semblé fonctionner dans mes tests. SecurityError: a bloqué une trame avec l'origine d'accéder à une trame d'origine croisée
L'API iframe youtube contourne ce problème en utilisant postMessage, mais aucun message n'est implémenté pour le moment pour exécuter video.requestPictureInPicture() . Il semble y avoir une fonction togglePictureInPicture définie dans le script du joueur base.js mais cela ne semble pas être exposé via l'API de transmission de message
J'utilise toujours la ligne suivante dans la console, sur la page youtube:
temp1.requestPictureInPicture();
Cela affichera une collection HTML, l'ouvrira et fera un clic droit sur la première position de la collection, la stockera en tant que variable globale, cela générera quelque chose comme temp1 . Ensuite, vous devez écrire la ligne suivante:
document.getElementsByTagName('video');
Et c'est tout.