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”
Le blog de Vincent Battaglia 
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
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
Bonjour,
Pour ceux qui sont un peu brouillés avec l’anglais, une traduction de la méthode Satay par Antoine
Amicalement,
Monique
LikeLike
Aïe… l’URL n’est pas complète 😦
La fin c’est -en-respectant-les-standards
LikeLike
Merci pour le lien. J’ai corrigé ton commentaire 😉
LikeLike
Voilà qu’il est intéressant. Merci Monique.
LikeLike
Pourquoi ne pas passer par swfObject qui a aussi l’avantage de contourner le problème de l'”active content” sur Internet Explorer.
Un autre avantage est aussi de pouvoir mettre du contenu alternatif pour les navigateur non-équipés de javascript/flashplayer.
LikeLike
C’est vrai, je n’avais pas pensé à SWFObject qui est également une solution très élégante… Minuscule hic, ça nécessite d’avoir le JavaScript activé.
LikeLike
une autre solution est de placer tes videos favorites sur SaneScreen : http://en.sanescreen.org
LikeLike
camera casio digital ex exilim z1000 zoom camera canon digital eos rebel slr xt
LikeLike
Thank you!
breastreduction breastaugmentation san diego
LikeLike
J’utilise la même méthode. Malheureusement, le paramètre “allowFullscreen” n’est pas récupéré par Firefox, donc impossible de passer en plein écran.
LikeLike