Hello, I’m Vinch

And this is my website.

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

01/13/07

This post is more than 10 years old. It might not reflect my current skills and convictions.

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>
	<embed src="http://www.youtube.com/v/MENw0zD1F2I" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed>
</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>
	<embed src="http://www.dailymotion.com/swf/3kprUGk68vsgB4Zqv" type="application/x-shockwave-flash" width="425" height="334" allowfullscreen="true"></embed>
</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 :

<embed style="width:400px; height:326px;"id="VideoPlayback" type="application/x-shockwave-flash" src="http://video.google.com/googleplayer.swf?docId=5366818355418627155&hl=fr" flashvars="">
</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

Leave a comment