La seule et unique façon d’intégrer une animation Flash…

Je suis actuellement en train de développer un VideoBlog où je pourrai placer mes vidéos favorites provenant de YouTube, Dailymotion et Google Video.

J’ai donc étudié le code source prêt à être copié/collé qu’offrent ces différents services. De manière générale, c’est du grand n’importe quoi !

YouTube ne s’en sort pas encore trop mal :

<object width="425" height="350">
	<param name="movie" value="http://www.youtube.com/v/MENw0zD1F2I"></param>
	<param name="wmode" value="transparent"></param>
	
</object>

Dailymotion fait plus ou moins pareil (sauf qu’il rajoute plein de truc inutiles autour) :

<div>
<object width="425" height="335">
	<param name="movie" value="http://www.dailymotion.com/swf/3kprUGk68vsgB4Zqv"></param>
	<param name="allowfullscreen" value="true"></param>
	http://www.dailymotion.com/swf/3kprUGk68vsgB4Zqv
</object>
<br /><b><a href="http://www.dailymotion.com/video/xphrz_pub-audi">Pub AUDI</a></b>
<br /><i>envoyé par <a href="http://www.dailymotion.com/nice_">nice_</a></i>
</div>

Google, par contre, livre un code plus que catastrophique :

http://video.google.com/googleplayer.swf?docId=5366818355418627155&hl=fr
</embed>

Pour rappel, embed est une balise obsolète depuis des siècles. Celle-ci a été inventée par Netscape pour jouer des animations Flash, car à l’époque, c’était le seul moyen de le faire. Elle ne fait pas partie de la recommandation XHTML, donc son utilisation menera inévitablement à une erreur du validateur.

Pour en finir avec tous ces bricolages de code que l’on voit partout, je vous présente la seule et unique façon d’intégrer une animation de façon standard et accessible :

<object width="425" height="350" type="application/x-shockwave-flash" data="http://www.dailymotion.com/swf/3kprUGk68vsgB4Zqv">
	<param name="movie" value="http://www.dailymotion.com/swf/3kprUGk68vsgB4Zqv" />
	<param name="wmode" value="transparent" />
	<p><!-- image ou texte alternatif --></p>
</object>

Seuls les attributs width, height, type et data sont nécessaires dans la balise object. Le paramètre movie est également nécessaire contrairement au paramètre wmode qui sert ici à donner un fond transparent à l’animation. Notez aussi l’importance d’une image ou d’un texte alternatif pour l’accessibilité.

Pour aller plus loin, je vous recommande la lecture de cet article de “A List Apart”

12 Comments

katsoura says:

January 13, 2007 at 11:30 am

Sauf que la balise object utilisée seule risque de poser des problèmes pour les versions d’internet explorer. Et comme c’est quand même le leader, il y a lieu de trouver un compromis: couple object et embed comme le font la plupart des webmasters.

LikeLike

Vinch says:

January 13, 2007 at 12:01 pm

Oui tu as raison, mais l’article que j’évoque à la fin de mon billet propose des solutions pour IE. Ils appellent ça : “la méthode Satay”. Cela permet d’oublier la vieille balise embed.

LikeLike