jytest a écrit :
Oui à celui-là...
Mais l'exemple ne fonctionne ni sur IE7 ni sur IE8...
Tu as bien lu l'article ?
Nico a écrit :
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, ainsi, Internet Explorer pourra quand même la lire. 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.
Le fallback est parfaitement fonctionnel.
Sinon, tu as toujours la possibilité d'utiliser un player js (les ressources ne manquent pas)
