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

<div>
<object width="420" height="336">
<param name="movie" value="http://www.dailymotion.com/swf/x2iqvk&v3=1&related=0"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowScriptAccess" value="always"></param>
<embed src="http://www.dailymotion.com/swf/x2iqvk&v3=1&related=0" type="application/x-shockwave-flash" width="420" height="336" allowFullScreen="true" allowScriptAccess="always"></embed>
</object><br />
<b><a href="http://www.dailymotion.com/video/x2iqvk_map-solidays-2007_music">M.A.P. solidays 2007</a></b>
<br /><i>envoy&eacute; par <a href="http://www.dailymotion.com/ownerz">ownerz</a></i>
</div>

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 !

<object type="application/x-shockwave-flash" width="420" height="336" data="[URL_VIDEO]">
	<param name="movie" value="[URL_VIDEO]" />
	<param name="allowFullScreen" value="true" />
	<param name="allowScriptAccess" value="always" />
	<param name="wmode" value="transparent" />
</object>
<!-- La suite ne dépend que de la vidéo récupérée chez Dailymotion plus haut dans l'article -->
<h3><a href="http://www.dailymotion.com/video/x2iqvk_map-solidays-2007_music">M.A.P. solidays 2007</a></h3>
<p><em>envoy&amp;eacute; par <a href="http://www.dailymotion.com/ownerz">ownerz</a></em></p>

Un article publié sur Darklg Blog © 2012
Lien vers l'article original : Vidéos Dailymotion, en xHTML valide
Partager cet article sur Twitter