Introduction à la balise vidéo de HTML5 Exemple d'utilisation de la balise video de HTML5

Voici un premier exemple, notez que je mets la version MP4 en premier afin d'être sûr que les iPhone, iPad et autres iPod pourront la lire (ils lisent uniquement la version MP4, et il faut que cette dernière soit proposée en premier pour que cela fonctionne).

 <video width="400" height="222" controls="controls"> 
<source src="animations/Cavernae_Terragen2.mp4" type="video/mp4" /> 
<source src="animations/Cavernae_Terragen2.webm" type="video/webm" /> 
<source src="animations/Cavernae_Terragen2.theora.ogv" type="video/ogg" /> 
 Vous n'avez pas de navigateur moderne, donc pas de balise vidéo de <abbr lang="en" title="HyperText Markup Language" xml:lang="en">HTML</abbr>5 pour vous ! 
</video>

Permettre au plus grand nombre de navigateurs de visualiser la vidéo

L'idée de cet exemple est de permettre au plus grand nombre de navigateurs modernes de pouvoir visualiser la vidéo, je propose donc les trois formats (MP4, WebM, et Ogg). Par contre, mon alternative pour les navigateurs ne supportant pas la balise vidéo est un peu sèche dans l'exemple ci-dessus.

Comme l'idée est de proposer la vidéo au plus grand nombre, je vais insérer en version alternative une version Flash de cette même vidéo. Pour cet exemple, j'ai choisi d'insérer le player YouTube de cette vidéo.

 <video width="400" height="222" controls="controls"> 
<source src="animations/Cavernae_Terragen2.mp4" type="video/mp4" /> 
<source src="animations/Cavernae_Terragen2.webm" type="video/webm" /> 
<source src="animations/Cavernae_Terragen2.theora.ogv" type="video/ogg" /> 
 <object type="application/x-shockwave-flash" width="400" height="222" data="http://www.youtube.com/v/HVMoJqg41Bw"> 
 <param name="movie" value="http://www.youtube.com/v/HVMoJqg41Bw" /> 
 <param name="wmode" value="transparent" /> 
 Vous n'avez pas de navigateur moderne, ni Flash installé... 
 </object> 
</video>

La balise object est parfaitement valide. Toutefois, Internet Explorer 6 et inférieurs ne comprendront pas ce beau code standard et valide. Pour arriver à garder un code valide, tout en satisfaisant IE6, il faudra passer par la balise embed (qui n'est absolument pas standard dans la spécification HTML4/XHTML1.0 actuelle). En utilisant les commentaires conditionnels pour cacher ce vilain bout de code non standard (sauf à IE6 et inférieurs), on obtient ceci :

 <video width="400" height="222" controls="controls"> 
<source src="animations/Cavernae_Terragen2.mp4" type="video/mp4" /> 
<source src="animations/Cavernae_Terragen2.webm" type="video/webm" /> 
<source src="animations/Cavernae_Terragen2.theora.ogv" type="video/ogg" /> 
 <object type="application/x-shockwave-flash" width="400" height="222" data="http://www.youtube.com/v/HVMoJqg41Bw"> 
 <param name="movie" value="http://www.youtube.com/v/HVMoJqg41Bw" /> 
 <param name="wmode" value="transparent" /> 
 
 <!--[if lte IE 6 ]> 
  <embed src="http://www.youtube.com/v/HVMoJqg41Bw" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="400" height="222"> 
  </embed> 
 <![endif]--> 
 Vous n'avez pas de navigateur moderne, ni Flash installé... suivez les liens ci-dessous pour télécharger les vidéos. 
 </object> 
</video>

Une bonne habitude à prendre est de proposer un lien de téléchargement de vos fichiers vidéos (ainsi les internautes pourront le lire localement), et tant qu'à faire de préciser les tailles desdits fichiers.

Précédent
Suivant