Les balises HTML5 : <video>

On parle beaucoup de HTML5 depuis quelques temps. Il s’agit de la dernière mouture du langage HTML (HyperText Markup Language) qui est l’idiome universel des navigateurs web. Le langage HTML est notamment fait de balises (tags) qui définissent le sens des contenus quelles encadrent. D’ailleurs, on évoque de plus en plus une idée de web sémantique et HTML5 y contribue pour beaucoup.

La balise video, comme son nom l’indique, est prévue pour contenir une vidéo.

Mais comment faisions-nous avant ?

En effet, nous n’avons pas attendu HTML5 pour profiter de vidéos sur le web. En fait, nous utilisions la technologie Flash propriété de la firme Adobe. Cette ancienne solution présente 2 problèmes majeurs :

  • d’une part, il s’agit d’une technologie privée qui appartient à une entreprise,
  • d’autre part, il est nécessaire d’installer un plugin sur son navigateur pour pouvoir l’utiliser.

Bon, il est vrai que la majorité des navigateurs en sont équipés (comme il n’y avait pas d’autre moyen avant…), mais HTML5 permet de faire sans, donc nous n’allons pas nous en priver.

Mais comment cela fonctionne désormais ?

Tout simplement comme une balise image, on indique dans la balise video l’adresse du fichier vidéo et le navigateur se débrouille avec ! Cette nouvelle solution offre également la possibilité de contrôler la vidéo en javascript (exemple : détecter la fin de la vidéo, lancer la vidéo, etc).

En revanche, les différents navigateurs ont chacun leur format favori, donc il faut prévoir plusieurs versions du fichier (Ce serait trop simple sinon).

Alors voici un tableau présentant les formats reconnus par les navigateurs :

Navigateur Ogg Theora MP4 WebM Parts de marché

Firefox 4.0 +

17.06%

Firefox 3.5 – 3.6

4.90%

Safari 3 +

7.45%

Chrome 6 +

27.09%

Chrome 3 – 5

6.19%

Opera 10.6 +

3.59%

Opera 10.5

0.48%

IE 9 +

10.74%

Tous les navigateurs HTML5

59.31% 51.47% 47.74% 77.50%

Enfin, voici un exemple de code implémentant cette nouvelle balise :

Pour conclure, je dirais que l’on rend enfin la vidéo « universelle » sur le web et qu’elle est devenue l’égale des autres médias comme les images. Notez également, que la vidéo sera proposée avec une interface par défaut sur chaque navigateur, mais qu’il est possible de la styliser comme tout autre élément.

One thought on “Les balises HTML5 : <video>

Répondre

Votre adresse email ne sera jamais publiée.

Vous pouvez utiliser les balises HTML et attributs suivants : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

*