Au vue des âneries qui fleurissent en ce moment sur le Web concernant la balise HTML <video> je pense qu’il est temps de faire une mise au point.
La norme HTML5 est actuellement en préparation par le WHATWG (qui regroupe entre autre Mozilla, Apple et Opera). Parmi la pléthore de nouveautés il y a la balise HTML <video>. A l’instar de la balise <img> qui permet d’inclure les images, elle permet d’inclure dans une page Web une vidéo. Il est important de noter que les spécifications de cette balise ne sont pas figées, HTML5 est d’ailleurs encore en chantier et sa dernière révision (au moment de la rédaction de cet article) date du 6 août 2008.
Quelles sont les différences avec les balises <embed> et <object> ?
Pour lire une vidéo incluse via les balises <embed> ou <object> il faut que les plugins correspondants soient installés sur le navigateur de l’internaute. Quicktime, Windows Media Player et VLC par exemple, installent leur plugins automatiquement pour les navigateurs principaux.
L’avantage de la balise <video> est de ne plus avoir besoin, en théorie, de ces plugins. En effet elle utilise soit les codecs gérés en natif dans le navigateur soit les capacités de DirectShow, Quicktime ou Gstreamer/Phonon (respectivement sous Windows, Mac et Linux).
La balise <video> apporte aussi une API unifiée. On a ainsi toujours les mêmes méthodes, start(), stop() etc., quelque soit le codec de la vidéo. Cette API ouvre la voie à la création de scripts avancés et d’extensions Firefox pour personnaliser la lecture des vidéos sur le Web.
Dernier avantage, cette balise apporte de la sémantique, là ou les autres balises étaient vide de sens.
Quelles sont les différences avec les lecteurs fait en Flash ?
Pas besoin – en théorie – d’avoir à installer un plugin particulier. Même si de nos jours Flash est quasi-omniprésent, il reste encore des cas particuliers (cf. l’iPhone).
Autre problème, c’est le concepteur du lecteur Flash qui décide de ses fonctions. J’ai déjà rencontré des vidéos où l’on ne pouvait pas avancer manuellement la lecture : même si on avait déjà vu la premières minutes, j’ai été obligé de me les retaper pour voir la suite. Avec la balise <video> et grâce à son API ou via l’interface utilisateur du navigateur (si il le propose), on PEUT choisir d’afficher ses propres contrôles.
Y-a-t-il un support du streaming ?
En théorie, oui.
Y-a-t-il un support du plein écran ?
La spécification de la norme HTML5 recommande aux navigateurs ne pas proposer cette fonction dans l’API (ce qui nous protège d’un script lançant automatiquement une vidéo en plein écran). Le plein écran restera possible à condition que le navigateur le permette quelque part dans son interface, donc uniquement sur une action de l’utilisateur.
Peut-on lire tous les types de vidéos ?
Non, seulement ceux supportés par le navigateur en standard (natif) et ceux disponibles dans le backend du système d’exploitation. Sinon il faudra installer un plugin et on perd donc un avantage de la balise video. Cela nous amène donc au support de Ogg par défaut dans Firefox 3.1.
Pourquoi Firefox 3.1 n’implémentera (que) Ogg en natif ?
D’abord un petit rappel : Ogg est un conteneur, un format de fichier qui contient des flux audio et vidéo. Ces flux audio et vidéo peuvent être codés avec les codecs Theora pour la vidéo et Vorbis pour le son. Subjectivement, Theora fait partie des meilleurs formats vidéo du moment, qui sont Theora, xvid, h264 et VC-1. Theora a l’avantage d’être libre, ou du moins plus libre que les autres. En plus, on ne lui connaît pas encore de problèmes liés aux brevets logiciels. En contrepartie c’est probablement aussi le moins bon des quatre.
On voit donc que n’implémenter aucun format en natif nous ramène au problème d’incompatibilité en fonction du système de l’utilisateur (on est dépendant du backend) et implémenter un autre format que Ogg peut poser des problèmes juridiques et financiers à ceux qui les utilisent.
Pour que tout aille mieux dans le meilleur des mondes il faut donc maintenant que les autres navigateurs suivent le mouvement et un effort de la part des concepteurs de sites Web. Concernant les navigateurs, il existe déjà depuis un moment déjà des versions de tests d’Opera supportant la balise <video> et Ogg en natif. Quant à Webkit je crains malheureusement qu’il n’implémente jamais Ogg en natif, Apple préfèrera plutôt pousser à l’adoption de son format fétiche : le h.264. Il faut savoir qu’à l’origine la norme HTML5 obligeait les navigateurs a géré Ogg en natif, mais cette obligation a été retirée suite à des pressions d’Apple et de Nokia.
Concernant les sites Web, Wikimedia Commons utilise déjà la balise <video> depuis le début et toutes les vidéos du site sont au format Ogg, à quand Wikipédia ?
Pour finir, un exemple d’utilisation :
<video controls src="video.ogg" id="myVideo">$</video>
$ = Texte ou code HTML, qui peut être une balise <object> ou <embed> pour pouvoir afficher la vidéo dans les navigateurs ne supportant pas la balise <video>, mais avec l’inconvénient bien sûr qu’elle n’est plus pilotable en javascript.
Et si on veut définir ses propres contrôles et ne pas utiliser ceux du navigateur (exemple) :
<script>
var video = document.getElementById("video");
</script>
<p><button type="button" onclick="video.play();">Lecture</button>
<button type="button" onclick="video.pause();">Pause</button>
<button type="button" onclick="video.stop();">Stop</button><p>
Ce qui nous donne :

Je ferais un lecteur plus complet dès que je trouverais le temps.