Pour tout savoir sur la balise vidéo du HTML5, voici le premier d’une série d’article traitant de l’histoire, le fonctionnement, et les façons d’intégrer la balise Vidéo dans vos sites web.

Cet article est le premier d’un dossier qui traitera de la balise vidéo du HTML5 : histoire, intégration, solutions toutes faites… à la fin de ce dossier, la balise vidéo n’aura plus de secret pour vous !

La balise vidéo du HTML5 : Présentation

La balise vidéo HTML5 est un moyen de lire de la vidéo sur internet. Bon, ok, dis comme ça, et depuis le temps qu’existe Youtube, ce n’est pas très révolutionnaire… Mais cette balise vidéo permet de le faire de manière native, sans s’encombrer de plugins comme flash ou silverlight, avec les langages standards du Web : HTML, CSS , Javascript.

Exemple d’intégration d’une vidéo avec l’HTML5
<video  controls  src= « video.ogv » > Le texte alternatif </video>

Vidéo d’exemple du site du W3C

 

La fin du rêve : La guerre des codecs

Le W3C, avec leur idée d’intégrer une balise standard pour intégrer les vidéos sur le net, étaient les grands sauveurs de la vidéo : Plus besoin de plugins propriétaires, plus de complications, tout le monde fait la même chose, et voilà. Mais, car il y a un mais, le W3C n’a pas statué sur le codec qui devait être utilisé. Résultat : chacun avait son avis, son codec préféré, qu’il voulait intégrer dans son navigateur, et ne voulait pas intégrer ceux des autres pour divers raisons.

Les différents camps :

Le H.264 dans un coin, avec Apple, Microsoft, IE et Google.

Ce codec est le meilleur en terme purement technique. Rapide et assez léger, il n’a que deux soucis : Il n’est pas libre, ce qui peut heurter l’idéologie de certains (la fondation mozilla, pour ne citer qu’eux.), et… il coute 5 millions de dollars. Par an, bien sur. Ah bah oui, mon bon monsieur, mais faut savoir ce qu’on veut, dans la vie, hein.

La présence de Google, surtout, fait trembler : Google, c’est Youtube. Et Youtube, c’est LE site de vidéo sur le net. Si un navigateur perd la compatibilité Youtube, il risque ni plus ni moins que la mort.

Le Théora, avec opera et firefox

Le OGG Théora est un codec libre, et rien que pour ça, à plus sa place dans des spécifications W3C qu’une solution propriétaire. Il est néanmoins bien plus lourd, et les vidéos sont très encombrante sur le serveur.

Mozilla ne veut tout de même pas quitter sa ligne de conduite favorisant le libre, considérant que si le H.264 devenait standard, il serait pratiquement impossible à un nouvel acteur de faire un navigateur (5 million, faut déjà des reins…).

—

Si cette situation était restée en l’état, une vidéo aurait du être hébergé dans de multiples formats pour être lue par tout le monde, alors que le plugin flash suffisait pour tout les navigateurs. Déjà la fin du règne de la balise Vidéo ? C’était sans compter un revirement de situation : Google libère les droits du VP8 (un autre codec), et s’associe à Mozilla et Opera pour sortir WebM, un format libre et compétitif. Microsoft annonce ensuite assez rapidement le support de ce format par IE9, et voilà, le débat n’a plus raison d’être… sauf pour Apple, qui trouve que ce codec est moins bon que le H.264.

Alors, oui, pour quelqu’un qui a dit qu’il ne supporterait pas le flash car il ne veut plus de solution propriétaire sur le net, c’est quand même assez contradictoire, mais bon, l’argent a des raisons que la raison ignore.

À l’heure actuelle, où en est-on?

Maintenant, la balise vidéo est déjà utilisable avec le codec Théora, supporté par tous les navigateurs récents, et dès les prochaines versions il sera possible d’utiliser le format webM de partout, sauf avec Apple. Pour ceux qui pensaient que le HTML5 permettrait de lire les vidéos youtube,  mes condoléances…

Pour ceux qui sont interessés par un tableau montrant quelles versions des différents navigateurs supportent les différents codecs, c’est par ici.

Mais comment l’utiliser ? Et au delà d’intégrer une vidéo toute simple avec la balise, comment ajouter plus de boutons de contrôle, et plus de fonctionnalités ? C’est ce que nous verrons dans notre prochain article !