HTML5 – ce qu’il faut savoir sur la balise VIDEO
HTML5, aujourd’hui tout le monde en parle et si on se concentre sur la partie langage de balise (c’est à dire à dire tout sauf CSS3, SVG, WebGL, WebSocket…), certaines nouveautés ont le vent en poupe, notamment la balise vidéo et la balise audio.
Quand on parle de son / musique joués dans un navigateur Web, on se rappelle tout d’abord les formats ou lecteurs d’un passé pas si éloigné (Quicktime, Real Player, voire Windows Media). Mais aujourd’hui, la mode est plus au lecteur nécessitant un plug-in tel que Adobe Flash ou encore Microsoft Silverlight. Avec l’arrivée progressive d’HTML5 et sa balise vidéo, certaines choses pourraient bien changer ou pas 
Informations complémentaires sur ces “vieux” formats vidéo du Web :
- Quicktime : https://en.wikipedia.org/wiki/QuickTime
- Windows Media Player : https://msdn.microsoft.com/en-us/library/ff819508(v=VS.85).aspx
L’objectif de ce billet est de résumer ce qu’il faut savoir sur la balise vidéo d’HTML5
Un peu de syntaxe pour commencer
Source de référence : le document du W3C et plus particulièrement le paragraphe 4.8.6 (https://www.w3.org/TR/html5/the-iframe-element.html#the-video-element)
Pour insérer une vidéo dans une page HTML5, il suffit d’utiliser la balise suivante :
<video src="nomdufichiervidéo"> description de la vidéo </video>
Plutôt simple ? (nous verrons plus loin dans cet article qu’il existe cependant des “subtilités”)
A cela, il est possible d’ajouter différentes options pour obtenir quelques fonctionnalités supplémentaires, par exemple:
autoplay : est un attribut booléen (= qui s'applique dès que l'attribut est écrit) qui permet de démarrer la lecture audio automatiquement (ce que je n'encourage pas car personnellement je trouve cela insupportable).
loop : est un attribut booléen qui permet de jouer en boucle le fichier audio
controls : est un attribut booléen qui permet d'utiliser les contrôles audios classiques (lecture, pause...)
preload : est un attribut qui permet d'indiquer au navigateur de précharger en arrière plan le fichier media. L'attribut preload peut prendre 3 valeurs :
- none = pas de préchargement (économise donc de la bande passante si le contenu vidéo n'est pas lu)
- auto = préchargement
- metadata = préchargement mais uniquement des métadonnées du fichier vidéo.
Muted : permet de mettre en sourdine le son. L’utilisateur a la possibilité de réactiver le son
Quel(s) format(s) de fichiers utiliser ?
Là on entre dans la partie marrante : le W3C ne recommande pas de codecs dans les spécifications de la balise vidéo. Du coup vous avez le choix.
A ce jour, 3 codecs sont utilisables (mais pas dans tous les navigateurs) :
H.264 : codec supporté par le MPEGLA. Ce codec est soumis à des droits d’usage (royalties) que les éditeurs de navigateurs doivent payer pour l’inclure dans leurs produits. Ce codec est actuellement un des formats les plus utilisés, que ce soit sur les Blu-ray, les sites de streaming (Vimeo, Youtube, Dailymotion, iTunes…), dans les plug-ins (Flash, Silverlight…).
On trouve également de nombreux matériels compatibles / supportant matériellement le codec H.264 :
- Appareils photos numériques
- Camescopes numériques
- Platines vidéo de salon
- La seconde génération (Sandy Bridge) des processeurs Intel Core i3,i5,i7 intègrent un encodeur matériel H.264 (appelé Intel® Quick Sync Video par le marketing d’Intel)
- La majorité des cartes graphiques récentes
- …
Note : sous IE9/10, le décodage des vidéos HTML5 encodées en H.264 est effectué nativement par le GPU de la carte graphique (c’est un des éléments traités par l’accélération matérielle d’IE9 et >)
Theora/Ogg : codec libre (donc utilisable sans aucune royaltie) proposé par la fondation Xiph.org. Theora est sous licence de type BSD. Informations complémentaires : https://fr.wikipedia.org/wiki/Theora
WebM : codec audio/vidéo libre donné à la communauté par Google suite au rachat de la société On2 Technologies. Codec annoncé lors de la conférence Google I/0 en mai 2010. Informations complémentaires : https://www.webmproject.org/ et https://fr.wikipedia.org/wiki/WebM#Industrie
Quel navigateur est compatible avec quel format ?
Là rien de vaut une bonne matrice de compatibilité
Le codec WebM est disponible pour Internet Explorer 9 à l’adresse suivante : https://tools.google.com/dlpage/webmmf/
Le codec H264 est également disponible pour les utilisateurs de Mozilla Firefox sous Windows 7 grâce à un add-on proposé par Microsoft (le codec H.264 est natif et les royalties associées déjà payées dans Windows 7). cf. https://blogs.technet.com/b/port25/archive/2010/12/15/html5-video-and-interoperability-firefox-add-on-provides-h-264-support-on-windows.aspx
Après je trouve toujours bizarre d’installer des codecs supplémentaires ou add-on pour une spécification censée simplifier la vie sans plug-ins
…
A noter que ce tableau ne concerne que les navigateurs Web “modernes” supportant la balise vidéo d’HTML5 :
- Internet Explorer 9 et >
- Firefox 3.5 et >
- Google Chrome 3 et >
- Opera 10.5 et >
- Safari 3 et >
HTML Video Codec Support in Chrome
https://blog.chromium.org/2011/01/html-video-codec-support-in-chrome.htmlOn voit ici qu’il va être difficile de choisir d’encoder avec un seul codec les vidéos sous peine de perdre une partie de l’audience (par non support du codec choisi par certains navigateurs). Il va donc probablement falloir encoder les vidéo en 2 voire 3 formats.
Les formats à retenir sont selon moi le H264 et le WebM. Le premier est le plus répandu actuellement (dans les appareils électroniques, la chaine de montage audio-visuelle et les grosses plateformes de streaming). Le second (WebM) est quand à lui supporté par quatre navigateurs sur cinq (sous réserve que le codec WebM soit installé sur le poste dans le cas d’IE 9 et supérieur).
Le W3C a prévu dans sa spécification de pouvoir intégrer plusieurs sources pour une même vidéo donc plusieurs codecs.
Important à noter aussi, c’est les containers utilisables :
.mp4 pour les vidéos en H.264
.webm pour les vidéos en WebM
.ogv pour les vidéos en TheoraNote : dû à un bug sur l’iPhone/iPad iOS 3.x, la source .mp4 (H.264) doit être mise en premier dans la liste.
Remarque complémentaire : pensez aux périphériques mobiles (tablettes & smartphones) en proposant une version basse résolution de la vidéo (moins consommatrice en bande passante et CPU/GPU pour le décodage)
A ce propos, quelles versions des navigateurs mobiles supportent la balise vidéo d’HTML5 ?
Côté Google Android :
Les version Android supérieures à la 2.0 (Eclair) qui inclue WebKit 3.0 supportent la balise vidéo avec le codec H.264
Attention cependant, il y a une subtilité : il faut rajouter onclick="this.play();<video id="movie" width="480" height="370" poster="https://exemple.fr/poster.jpg" controls onclick="this.play();">
<source src="https://exemple.fr/monfichiervideo.mp4" type="video/mp4">
Your browser does not support html5 video.
</video>Android 2.0, 2.1, 2.2 fonctionnent avec le container .mp4 (H264+AAC)
Informations complémentaires:
Issues on Android devices : https://diveintohtml5.org/video.html#androidA partir de la version 2.3 d’Android (Gingerbread), le support du codec WebM doit être assuré (source : https://developer.android.com/sdk/android-2.3-highlights.html/)
Côté Apple iOS :
Le navigateur Web d’iOS (Safari) supporte la balise vidéo d’HTML5 depuis la version 1.0 avec le codec H.264
Côté Microsoft Windows Phone 7:
Le navigateur Web présent dans la version RTM de Windows Phone 7 ne gère pas la balise vidéo d’HTML5
A voir avec la mise à jour Mango qui remplacera l’IE d’origine par un IE9
Et si le navigateur n’est pas compatible avec la balise vidéo d’HTML5 ?
Là on entre dans le territoire d’IE 6, 7 et 8 principalement
, la dernière source disponible pour une vidéo sera une méthode de fall-back (lecteur Javascript ou Flash ou Silverlight).
Note : l’usage d’une méthode de fall-back est également une bonne option si vous ne souhaitez pas encoder une vidéo sous plusieurs formats (opération pouvant être couteuse en espace disque).
Exemple de fallback :
Une bonne adresse avec un peu de code HTML pour faire plein de fall-back
Video for Everybody!
https://camendesign.com/code/video_for_everybodyA quoi ressemblent les lecteurs vidéo HTML5 fournis dans les navigateurs ?
Malgré l’usage d’une même balise, chaque navigateur propose un lecteur vidéo (ou audio) visuellement différent :
Avec Internet Explorer 9 :
Avec Firefox 4:
Avec Chrome 12:
Est-il possible d’avoir un lecteur plus sympa (skinné) ou intégré de manière plus originale ?
Oui, il est possible d’utiliser avec le player du Canvas, du SVG ou de le styler avec du CSS
Exemple :
![]()
Quelques bons exemples d’utilisation du lecteur video HTML5 avec du Canvas, du CSS, du SVG, du JS : https://www.html5rocks.com/en/tutorials/video/basics/#toc-fun
Une autre belle illustration avec une application HTML5 regroupant des vidéos de présentations des fonctionnalités d’Internet Explorer 9 (vidéos enregistrées avec mon collègue David) sous la forme d’un carroussel de vidéos :
Une application HTML5 pour afficher les vidéos 5 minutes pour comprendre IE9
https://blogs.msdn.com/b/davrous/archive/2011/06/16/une-application-html5-pour-afficher-les-vid-233-os-5-minutes-pour-comprendre-ie9.aspxSinon il existe un grand nombre de lecteurs vidéo HTML5 qui intègrent le support de fallback, qui offrent plus de fonctionnalités ou de personnalisation. En voici quelques uns (liste bien évidemment non exhaustive) qui sont très complets et assez simples à mettre en oeuvre. La plupart sont gratuits alors pourquoi s’en priver ?
Projeckktor : https://www.projekktor.com/
VideoJS : https://videojs.com/
Mediaelement.js : https://mediaelementjs.com/
SublimeVideo (payant) : https://sublimevideo.net/
Comment générer les fichiers aux différents formats ?
Il existe de nombreux outils de conversion à installer localement sur vos machines ou consommables sous la forme de services (dans le Cloud), en voici quelques uns :
Expression Encoder 4 Pro (encodage H.264...)
Plus d'informations : https://www.microsoft.com/expression/products/EncoderPro_Overview.aspxUn profile Expression Encoder 4 High Profile H.264 proposé par Nigel Parker et parfaitement utilisable pour des vidéos avec la balise HTML5 : https://vid.blob.core.windows.net/mix/MP4HighPresent.xm
Miro Video Converter : solution gratuite et multi-formats (H.264, WebM, Theora...) qui est super complète
Plus d'informations : https://www.mirovideoconverter.com/Une solution dans "le Cloud": Encoding.com
https://www.encoding.com/features/videoUne autre solution dans "le Cloud" : HD Cloud
https://www.hdcloud.com/Les limites de la balise vidéo dans HTML5
Il demeure certaines fonctionnalités qui ne sont pas disponibles nativement avec la balise video d’HTML5 et qui peuvent être un bloqueur à l’adoption de cette technologie :
Pas de mécanismes de protection du contenu :
Les URL des sources des vidéos sont en clair et sont (ré)utilisables par tous. Dans le cas d’une plateforme de VoD (Vidéo à la demande), on comprend vite le problème. Pour reformuler ce manque, il est possible d’écrire que la balise video d’HTML5 ne supporte pas aujourd’hui de mécanismes de DRM (à la différence de Flash ou Silverlight qui intègrent eux ces mécanismes depuis longtemps)
Pas de mécanismes de suivi et d’analyse:
Actuellement avec une vidéo HTML5, il est difficile pour les webmasters d’avoir des informations sur les vidéos vues (% de la vidéo téléchargée et visualisée par l’utilisateur…)
Pas de standard pour l’insertion dynamique de publicité
Personnellement je ne m’en plains pas
Adaptation dynamique de la qualité du streaming :
Là encore, face aux technologies concurrentes (Flash, Silverlight), HTML5 et sa balise video sont encore jeunes. Le player vidéo de Silverlight supporte notamment la technologie Smooth Streaming qui permet d’ajuster le flux vidéo à la bande passante disponible. Flash dispose de son côté d’une technologie baptisée HTTP Dynamic Streaming
La lecture en plein écran :
Avec la balise video d’HTML5 et les contrôles fournis, il n’est pas possible de basculer en mode plein écran pour la lecture d’une vidéo. Ce problème est généralement solutionné par l’usage de lecteurs plus avancés que celui fourni par les navigateurs (cf. la sélection de lecteurs plus évolués ci-dessus)
Note complémentaire : sous Firefox, il est possible de faire bouton droit, Full Screen pour basculer en plein écran; fonction non disponible dans Google Chrome (version 12 et <) ou IE 9
Informations complémentaires :
Are Publishers Ready to Embrace the iPad — Without Ads or Analytics?
https://gigaom.com/video/are-publishers-ready-to-embrace-the-ipad-without-ads-or-analytics/Flash and the HTML5 <video> tag
https://apiblog.youtube.com/2010/06/flash-and-html5-tag.htmlExemple de solution (player) permettant l'insertion de publicités
In Stream Add Insertion https://www.mdialog.com/Exemple de solution incluant le player / la publicité et le suivi & reporting de l’activité des internautes https://allplayer.mefeedia.com/
Smooth Streaming : https://www.iis.net/download/SmoothStreaming
Tester Silverlight + SmoothStreaming : https://www.iis.net/media/experiencesmoothstreaming
Adaptive Streaming Comparison
https://learn.iis.net/page.aspx/792/adaptive-streaming-comparisonAutres liens utiles / Articles intéressants sur la balise VIDEO d’HTML5 :
https://diveintohtml5.org/video.html#what-works
5 Things You Need To Know To Start Using <audio> and <video> today
https://channel9.msdn.com/events/MIX/MIX11/HTM12The Dark Side of HTML 5 Video
https://www.sitepoint.com/the-dark-side-of-html-5-video/Everything you need to know about HTML5 video and audio
https://my.opera.com/core/blog/2010/03/03/everything-you-need-to-know-about-html5-video-and-audio-2Accessible HTML5 Video with JavaScripted captions
https://dev.opera.com/articles/view/accessible-html5-video-with-javascripted-captions/Quelques gros acteurs de la vidéo en ligne et leur page HTML5 :
Dailymotion : https://www.dailymotion.com/html5
YouTube : https://www.youtube.com/html5
Vimeo : https://www.vimeo.com/blog:268
Voilà, c’est terminé, après cet article je pense que vous n’avez plus aucune raison pour ne pas commencer à utiliser la balise vidéo d’HTML5
Vos commentaires sont les bienvenus pour enrichir voire corriger cet article.
Comments
Anonymous
January 01, 2003
Nouveauté : Announcing Azure Media Player http://azure.microsoft.com/blog/2015/04/15/announcing-azure-media-player/Anonymous
June 22, 2011
Le plein écran est possible avec la balise Vidéo, par exemple sous Firefox, on peut faire un clic droit sur la vidéo, et là, il y a l'option plein écran. Pensez à ajouter qu'il faut éditer les types MIME dans un htaccess, sinon ça ne marche pas ! AddType video/ogg .ogv AddType video/mp4 .mp4 AddType video/webm .webm Cordialement, NicolasAnonymous
June 22, 2011
@Nico : merci pour ce complément d'information. Effectivement, après avoir posté l'article, j'ai lu sur un site que Firefox permettait le passage en plein écran. J'ajoute ce point à l'articleAnonymous
October 20, 2011
merci pour ce tour d'horizon très interessant pour l'HTML 5 et l'intégration de la vidéo .Anonymous
August 21, 2012
chrome permet aussi le mode plein écranAnonymous
May 10, 2014
Pingback from Structures esth??tiques (HTML, CSS...) | Pearltrees