web-dev-qa-db-fra.com

Comment lire des vidéos YouTube via un tag vidéo HTML5

Ce code fonctionne un instant mais je pense que les liens changent, car le lendemain il n'est pas trouvé?
la vidéo lue sous Firefox/Chrome/Opera ... comment faire en sorte que le tag vidéo lise cette vidéo en permanence?!

<video width="480" height="270" controls="controls" style="color:green;">
  <source src="youtubelink" type="video/mp4">
  <source src="youtubelink" type="video/ogg">
  <source src="youtubelink" type="video/webm">
Your browser does not support the video tag.
</video>
html5html5-video
20
blade19899

Il n'y a pas vraiment de moyen fiable de lire une vidéo YouTube dans un vrai tag vidéo. YouTube ne veut pas que vous fassiez cela, et c'est probablement contre leurs TOS. Dans tous les cas, cette URL va probablement changer régulièrement, que ce soit YT ajuste leur infrastructure ou fasse tout son possible pour empêcher les gens d'accéder directement aux fichiers vidéo.

Cependant, vous pouvez suivre quelques étapes pour pouvoir faire à peu près tout ce que vous pourriez faire si vous utilisiez le tag vidéo. Pour commencer, vous pouvez ajouter l'indication "html5 = 1" à l'intégration, qui indiquera à YouTube d'utiliser la vidéo html5 au lieu de Flash (il est généralement conforme, mais pas toujours). La vidéo sera dans un iframe, mais vous pouvez appliquer toutes les astuces CSS habituelles à cet iframe - opacité, transformations, etc.

Si vous utilisez l'API YouTube, ajoutez html5: 1 au playerVars. Si vous faites juste une intégration iframe directe, ajoutez-la à la chaîne de requête comme ceci: http://www.youtube.com/embed/okqEVeNqBhc?html5=1

Maintenant, si vous voulez aller plus loin, Popcorn.js a maintenant une astucieuse objet wrapper pour l'API YouTube qui fera qu'une vidéo YouTube (ils en ont un pour Vimeo aussi) se comportera comme un HTMLVideoElement, avec la plupart des mêmes propriétés, méthodes et événements. Ce n'est pas parfait, mais c'est plutôt bien.

Remarque: La source officielle de ce fichier est sur le repo mozilla/popcorn-js , mais celui-ci est actuellement en avance avec des corrections de bugs et des fonctionnalités. Vous devez inclure la dernière version de Popcorn.js et wrappers/common/popcorn._MediaElementProto.js de ce dépôt. Assurez-vous d'ajouter &html5=1 à l'URL YT lorsque vous définissez src.

Les différences que vous remarquerez sont:

  • Même avec le wrapper, l'API vidéo HTML5 fonctionne juste un peu mieux que l'API YT. Par exemple, plus réactif et meilleur rapport de mise en mémoire tampon.

  • Vous ne pouvez pas vous débarrasser de l'icône YouTube dans le coin inférieur droit qui apparaît lors d'une pause ou d'un survol.

  • Vous ne pouvez pas empêcher YouTube de diffuser des annonces.

  • Vous ne pouvez pas accéder au contenu vidéo/audio réel pour des choses comme l'API audio et le dessin canvas/webgl. Mais vous ne pouviez pas le faire de toute façon en raison des restrictions d'origine croisée.

25
brianchirls