Vidéos Dailymotion, en xHTML valide

Attention, cet article a été déplacé dans les archives, donc le contenu peut ne plus être à jour. A vous de voir 🙂

Edit : Vous ne trouverez rien ici sur un éventuel dailymotion x, désolé 🙂

Le souci de la mise en ligne de vidéos provenant de la plate-forme Dailymotion (ou autre), c’est la non validité aux tests du W3C.
Pour l’exemple, un vidéo reportage sur le groupe M.A.P aux Solidays 2007, par Rue89.
Pas vraiment fan, mais j’avais que ça sous la main 🙂

Après test, j’obtiens 13 erreurs, et deux avertissements.
C’est donc parti pour un débugging des familles 🙂

étape 1 : Vérifier les caractères

Pour des raisons de compatibilité entre les différents charsets utilisés dans les pages web, et leurs interprétation, tout caractère doit être encodé vers son équivalent html.
En l’occurence, les « & » dans le code ne sont pas traduits vers « & »
Nous passons ainsi à 7 erreurs, et plus aucun avertissement !

étape 2 : Supprimer la balise EMBED

A la base, une balise propriétaire de Netscape ( cf Bernard Quevilier ), elle est malgré tout reconnue par les navigateurs récents.
Mais ce qu’on ne dit pas, c’est qu’il est possible de s’en passer, sous IE6+, Mozilla, Safari et consors.
La solution est simple, il suffit de passer les paramètres donnés dans EMBED, à la balise OBJECT.
On va donc transférer l’attribut type vers OBJECT, et l’attribut SRC, qui sera renommé en DATA.
Pour chipoter …
L’attribut PARAM étant un élément vide ( qui n’entoure pas de texte, pour résumer ), il n’est pas nécessaire de garder la balise de fermeture.
Transformons donc nos <param></param> en <param /> !

étape 3 : Pour conclure

On peut passer le titre de la vidéo en H4, ou H3, selon son niveau hiérarchique.
On peut aussi rajouter le paramètre wmode, de valeur  » transparent « , pour que d’éventuelles images ou blocs de textes qui survoleraient vos pages ( menus déroulants, etc ) ne passent pas en dessous de la vidéo.

étape 4 : Et maintenant ?

Vous pouvez exploiter ce script pour vos vidéos chez dailymotion, youtube, etc, il suffit juste de récuperer l’url de la vidéo en flash, fournie par les plates formes !


	
	
	
	



M.A.P. solidays 2007


envoy&eacute; par ownerz

Partager cet article

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

  • Perso, je fais plus simple, je ne met pas les liens en bas, ni de contenu alternatif, ce qui donne:


    <object width="420" height="331" type="application/x-shockwave-flash" data="http://www.dailymotion.com/swf/[CODE]">
    <param name="movie" value="http://www.dailymotion.com/swf/[CODE]" />
    <param name="allowFullScreen"
    value="true" /></object>

    Où je remplace juste [CODE] par le code à 5-6 lettres de chaque vidéo, dans ton exemple « x2iqvk ».

    Le hic c’est que l’éditeur TInyMCE de WordPress saccage tout ça, il faut donc bien valider l’article en mode HTML et pas WYSIWYG, et plus le modifier ensuite! :-/

  • Voila qui me sort de l’embarras, j’avais un plugin pour le xHTML valide, mais il n’est plus compatible, merci !