Introduction à la balise vidéo de HTML5 La balise vidéo de HTML5 : syntaxe et prérequis

Une des nouveautés majeures de HTML5 et l'une des plus remarquables est la balise video. Elle offre une solution simple, native pour les navigateurs pour l'intégration d'une vidéo dans une page Web. Elle permet également de proposer une alternative à l'utilisation de Flash pour les plate-formes ne le supportant pas (iPhone, iPod, iPad...).

Syntaxe

La syntaxe de base de la balise video est extrêmement simple :

 <video controls src="video.ogv">Ici la description 
alternative</video> 

L'attribut src définit bien entendu l'adresse du fichier vidéo, tout comme pour la balise img lorsqu'il s'agit d'une image.

On peut également proposer plusieurs sources dans plusieurs formats différents en indiquant les types MIME grâce à l'attribut type :

 <video width="400" height="222" controls="controls"> 
<source src="video.mp4" type="video/mp4" /> 
<source src="video.webm" type="video/webm" /> 
<source src="video.ogv" type="video/ogg" /> 
 Ici l'alternative à la vidéo : un lien de téléchargement, un message, etc. 
</video> 

Encoder le fichier avec plusieurs codecs pour satisfaire les différents navigateurs

Particularité de la syntaxe XHTML : il faut ajouter controls="controls" (et pas juste controls comme vous pourrez le voir sur le premier exemple) pour afficher les possibilités de contrôle de la vidéo. Ceci est valable pour tous les attributs (autoplay, etc.).

L'attribut preload="auto" permet de de spécifier au navigateur de débuter le téléchargement de la vidéo tout de suite, en anticipant sur le fait que l'utilisateur lira la vidéo. Attention, cette option est à manier avec prudence (il est préférable que ce soit la seule raison d'être de la page). Note : il s'agit de l'ancien attribut autobuffer qu'il vous faudra laisser pour Firefox 3.5 et 3.6.

L'attribut autoplay="true" comme son nom l'indique, permet de lancer la lecture automatiquement. Cela peut également être problématique avec une connexion à faible bande passante ou sur un terminal mobile. De manière générale, évitez d'imposer vos choix à l'utilisateur... et à sa connexion Internet.

Les navigateurs ne pouvant pas lire le MP4/H.264 ni la version WebM nativement (comme Firefox 3.6) prendront la version au format Ogg Theora. Cela vous oblige néanmoins à encoder le fichier avec différents codecs.

Prérequis

Pensez également à préciser les types MIME dans un fichier .htaccess pour être sûr qu'ils soient corrects, les trois lignes suivantes suffisent à s'assurer la tranquilité :

 AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm