Le blog de Vincent Battaglia

Il y a peu, je me plaignais du code source pourri à insérer sur votre blog/site que proposent les services de vidéo en ligne.

Entretemps, j’ai découvert Greasemonkey grâce à ce billet sur le blog de Mich (j’en avais déjà entendu parler mais j’ignorais de quoi il s’agissait).

Greasemonkey est une extension pour le navigateur Web Mozilla Firefox qui permet à l’internaute de modifier les pages Web visitées. Il permet de modifier l’apparence des pages et d’y ajouter des fonctionnalités (ajout de boutons, suppression de publicités, etc.). L’utilisateur peut écrire ces scripts lui-même ou télécharger des scripts mis à la disposition de tous. Cette extension annonce peut-être de grands changements dans la manière d’aborder le web, puisque l’internaute peut agir sur le contenu des pages webs.

(Source : Wikipédia)

Pour tester cette extension, j’ai créé deux scripts qui permettent de remplacer le code pourri de YouTube et Dailymotion par quelque chose de propre et standard.

* dailymotion.user.js
* youtube.user.js

Bon amusement !

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 »

Depuis quelques heures, mon site a l’immense honneur de figurer en page d’accueil du site Kalitee.org.

Pour ceux qui ne connaissent pas Kalitee.org, il s’agit d’un annuaire recensant des sites conformes, accessibles et de qualité. Il s’agit selon moi d’une des meilleures ressources francophones sur le sujet.

Merci à l’équipe de m’avoir « accepté » dans ce cercle très restreint. J’avoue que je n’y croyais plus…