Accueil » Blog » (x)HTML Strict et Flash : une solution valide (W3c) pour vos vidéos ou jeux
Bout de code - PHP, XHTML, Javascript, htaccess

(x)HTML Strict et Flash : une solution valide (W3c) pour vos vidéos ou jeux

publié le 21 juin dans Bout de code - 7 commentaires

Il m’arrive assez souvent de vouloir insérer des vidéos YouTube ou des jeux flash dans un billet de blog ou sur le site d’un client (codés avec un doctype XHTML 1.0 strict, bien entendu).

Étant donné que je pratique la validation W3c à outrance, et que celle-ci échoue à cause de l’utilisation du <embed>, j’étais forcé d’utiliser du JavaScript pour parvenir à mes fins.

Mais j’ai récemment trouvé une solution alternative. Je partage donc ici les deux solutions et j’espère que vous y trouverez votre bonheur.

Flash et JavaScript : valide mais pas forcement « propre »

Cette solution était « nécessaire » suite au bug click to activate d’Internet Explorer 7.

Code HTML :

<div id="monjeu"></div>
<script type="text/javascript">writeFlash('monjeu')</script>

Code CSS :

#monjeu{ height:200px; width:200px; }

Code JavaScript (fichier externe) :

writeFlash = function(id) {
  switch(id){
    case 'monjeu':
       document.getElementById(id).innerHTML = "<object type='application/x-shockwave-flash' data='/img/flash/monjeu.swf' width='200' height='200'><param name='movie' value='/img/flash/monjeu.swf' /></object>";
    break;
  }}

Explications

Le HTML est simple : ajout d’un div pour contenir le jeu flash et utilisation de son ID pour la fonction js.

Le CSS est là afin de prévoir la place pour le jeu sur la page web car le JavaScript ne sera procédé qu’à la fin du chargement de la page. Si vous n’inscrivez pas les dimensions de votre .swf dans le CSS, il y a de fortes chances que vous voyiez des mouvements dans le texte (comme lorsqu’une image <img /> est sans dimension).

Le JavaScript utilise un switch…case afin de pouvoir recycler la même fonction en y ajoutant simplement un nouveau « case ». Il ajoute le code <object> au <div> grâce au JS innerHTML.

Le JavaScript peut être simplifié dans le fichier externe si vous renvoyez les donnés relatives au fichier .swf depuis votre page HTML :

<div id="monjeu"></div>
<script type="text/javascript">writeFlash('monjeu','/img/flash/monjeu.swf','200','200')</script>
et
writeFlash = function(id,url,largeur,hauteur) {
       document.getElementById(id).innerHTML = "<object type='application/x-shockwave-flash' data='"+ url +"' width='"+ largeur +"' height='"+ hauteur +"'><param name='movie' value='"+ url +"' /></object>";
}

Passons maintenant au code sans JS.

Nouvelle solution sans JavaScript

La nouvelle solution utilise l’attribut data de la balise <object> et élimine ainsi le <embed>.

<object data="/img/flash/monjeu.swf" type="application/x-shockwave-flash">
<param name="movie" value="/img/flash/monjeu.swf"></param>
</object>

A noter

Firefox requiert des dimensions afin d’afficher le .swf, soit dans votre CSS, soit en temps qu’attribut de la balise <object>.

Opéra de son coté semble souffrir du même bug que IE7 (click to activate / cliquez pour activer), ce qui peut être gênant pour les jeux et des vidéos (voir alors la solution JavaScript).

Et voila, vous pouvez maintenant valider vos pages (x)HTML strictes qui contiennent du flash.

Code sans Javascript en action

Abonnez-vous au blog

  • Envoyer
  • Digg
  • Del.icio.us
  • Stumble Upon
  • Facebook

{ 7 commentaires… lisez-les ci-dessous ou ajoutez-en un }

katsoura juin 21, 2010 à 11:19

Et ça marche ? Un exemple ?

Répondre

propulsr juin 21, 2010 à 11:46

Il suffit de demander :)

ps. toutes les vidéos du site propulsr utilisent cette méthode.

Répondre

martialc juin 22, 2010 à 14:02

Et pourquoi ne pas utiliser la librairie JS SWFObject qui est la méthode conseillée et recommandée par Adobe pour l’intégration de contenu flash dynamiquement dans une page ? (et qui permet donc du contenu alternatif dans le cas ou il n’y a ni flash, ni javascript…)

Cette solution existe depuis quelques années et est utilisée par tout les développeurs flash un peu sérieux… (et oui, c’est valide W3C).

Répondre

propulsr juin 22, 2010 à 14:35

J’utilisais du JS jusqu’à ce que je trouve l’autre solution, même si je ne me considère pas comme un développeur flash sérieux :)

Ma raison pour ne pas utiliser JS SWFObject et pour rechercher un solution alternative au JS que j’utilisais : ce n’est pas sémantiquement correct. Pourquoi utiliser une librairie JS quand une solution correcte existe en HTML. Cela reviendrait à promouvoir des hacks CSS pour IE alors que des solutions HTML/CSS fonctionnent (conditional comments). ET oui dans ma boite j’encourage encore le support pour IE6 qui représente plus de 20% de visites chez certains de nos clients :)

Répondre

Wype juin 24, 2010 à 00:26

Comme martialc, je préconise plutôt l’utilisation de SWFObject. On peut en plus viser plus finement l’utilisateur par sa version de flash par exemple.

Répondre

Matthieu août 27, 2010 à 21:51

J’utilise toujours la 2ème c’est très propre et ça marche avec tous les sites d’hébergement de vidéos.
Il est quand même intéressant de noter qu’aucun de ces sites (à ma connaissance) ne propose « spontanément » un code valide xhtml strict. La norme a encore du chemin à faire.

Répondre

Développeur web octobre 10, 2010 à 19:31

J’utilise aussi la deuxième solution. C’est simple et lisible.

Répondre

Laisser un commentaire