Insérer un fichier flash : les meilleures pratiques actuelles

Catégories : "Astuces", "Technologie" par Lucie Foulhac Lucie Foulhac le 03 Mars 2009

L'insertion d'un composant flash dans une page HTML pose un certain nombre de problèmes aux développeurs web. En effet, il s'agit souvent dans ce cas de respecter plusieurs contraintes : l'élément flash doit être visible sur toutes les plateformes et sur tous les navigateurs sans aucun défaut d'ergonomie, et bien sûr la page HTML doit respecter les standards W3C.

La méthode par défaut

La méthode la plus communément utilisée est celle générée par défaut en utilisant les éditeurs WYSIWYG tel que Dreamweaver par exemple :

<object
 &nbsp; &nbsp;classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
 &nbsp; &nbsp;codebase="http://download.macromedia.com/[...]ash.cab#version=9,0,28,0"
 &nbsp; &nbsp;width="550"
 &nbsp; &nbsp;height="400"
 &nbsp; &nbsp;title="titre">
 &nbsp; &nbsp; &nbsp; &nbsp;<param name="movie" value="mon_animation.swf" />
 &nbsp; &nbsp; &nbsp; &nbsp;<param name="quality" value="high" />
 &nbsp; &nbsp; &nbsp; &nbsp;<embed
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;src="/mon_animation.swf"
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;quality="high"
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;pluginspage="http://www.adobe.com/[...]ersion=ShockwaveFlash"
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;type="application/x-shockwave-flash"
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;width="550"
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;height="400">
 &nbsp; &nbsp; &nbsp; &nbsp;</embed>
</object>

Cette méthode présente des défauts non négligeables.

Tout d'abord, elle n'est pas compatible XHTML 1.0 car la balise embed est dépréciée par les normes W3C.

De plus, suite à l'affaire Eolas (février 2006), les utilisateurs d'Internet Explorer étaient contraints de cliquer sur l'animation pour que celle-ci s'active (Activating Active Content), ce qui posait un énorme problème d'ergonomie.

Depuis novembre 2007, Microsoft propose un correctif pour palier ce problème, il est cependant risqué de penser que tous les utilisateurs d'Internet Explorer ont appliqué le correctif en question à ce jour.

La méthode Flash Satay

La méthode Flash Satay propose une alternative en supprimant tout simplement la balise embed :

<object 
 &nbsp; &nbsp;classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
 &nbsp; &nbsp;codebase="http://download.macromedia.com/[...]ash.cab#version=6,0,0,0"
 &nbsp; &nbsp;width="400"
 &nbsp; &nbsp;height="300">
 &nbsp; &nbsp; &nbsp; &nbsp;<param name="movie" value="mon_animation.swf" />
</object>

Cette solution est donc bien conforme aux normes W3C mais n'est pas une solution universelle.

En effet, elle ne corrige pas le « Activating Active Content », pire encore elle empêche le chargement progressif de l'animation en ce qui concerne Internet Explorer uniquement.

Autrement dit, l'animation nécessite d'être chargée complètement avant de pouvoir se lancer, ce qui peut s'avérer particulièrement ennuyeux lorsqu'il s'agit d'une vidéo en streaming par exemple.

Même si cela peut être contourné en chargeant un flash vide, donc léger, qui se chargerait de lancer l'animation principale plus lourde, il s'agit là d'un hack et cela s'avère tout de suite plus contraignant à développer.

La méthode SwfObject

La solution la plus répandue pour résoudre le problème du « Activating Active Content » est de passer par Javascript.

Le script le plus connu à ce jour est SWFObject, car il offre une solution très simple à implémenter :

var so = new SWFObject(
 &nbsp; &nbsp; &nbsp; &nbsp;"mon_animation.swf",
 &nbsp; &nbsp; &nbsp; &nbsp;"mon_animation",
 &nbsp; &nbsp; &nbsp; &nbsp;"400",
 &nbsp; &nbsp; &nbsp; &nbsp;"300",
 &nbsp; &nbsp; &nbsp; &nbsp;"9",
 &nbsp; &nbsp; &nbsp; &nbsp;"#ffffff");
 so.addParam("quality", "high");
 so.addParam("wmode", "transparent");
 so.addParam("salign", "t");
 so.write("flashcontent");

Ce code va remplacer dynamiquement par un code d'insertion flash valide XHTML, le contenu du bloc suivant présent dans le flux HTML :

<div id="flashcontent">Contenu alternatif</div>

La méthode Swiff

Lorsque nous utilisons la librairie mootools sur l'un de nos projets web, nous préférons utiliser l'une de ses extensions : Swiff.

Plutôt que d'inclure une nouvelle libraire et ainsi accroître le risque d'incompatibilité, il est parfois bien plus simple de se servir de la même boite à outils... D'autant plus que cette extension à été adaptée à partir de la méthode SWFObject.

Dans notre cas, nous avons créé une classe FlashObject pour tous nos objets flash :

var flashObject = new FlashObject(
 &nbsp; &nbsp;objectId,
 &nbsp; &nbsp;filePath,
 &nbsp; &nbsp;width,
 &nbsp; &nbsp;height,
 &nbsp; &nbsp;isAutoplay,
 &nbsp; &nbsp;quality,
 &nbsp; &nbsp;{flashVars}
);

Arguments :

  • objectId (string) : id unique pour chaque objet flash
  • filePath (string) : chemin vers le fichier flash
  • width (number) : largeur de l'objet flash
  • height (number) : hauteur de l'objet flash
  • isAutoplay (boolean) : paramètre de lecture automatique de l'animation flash
  • quality (string) : paramètre de qualité de l'animation flash
  • flashvars (object) : variables passées en flashvars à l'objet flash


Le constructeur de la classe FlashObject permet d'initialiser l'objet flash, ensuite nous utilisons une fonction pour construire l'objet flash en utilisant Swiff :

swiffConstruct: function(){
 &nbsp; &nbsp;new Swiff(this.filePath, {
 &nbsp; &nbsp; &nbsp; &nbsp;id: this.objectId,
 &nbsp; &nbsp; &nbsp; &nbsp;width: this.width,
 &nbsp; &nbsp; &nbsp; &nbsp;height: this.height,
 &nbsp; &nbsp; &nbsp; &nbsp;params: {
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;align: 'middle',
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;allowScriptAccess: 'sameDomain'
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;play: this.isAutoplay,
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;pluginspage: 'http://www.adobe.com/go/getflashplayer',
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;quality: this.quality
 &nbsp; &nbsp; &nbsp; &nbsp;},
 &nbsp; &nbsp; &nbsp; &nbsp;vars: this.vars
 &nbsp; &nbsp;}).replaces($(this.objectId));
}

Swiff construit l'objet flash avec les paramètres de l'objet instancié via la classe FlashObject.

Et la méthode replaces remplace le bloc ayant pour identifiant 'objectId' de façon dynamique.

L'initialisation de l'objet flash peut se faire directement dans le flux HTML au niveau de la position de l'objet, et l'opération de remplacement s'effectue lorsque le DOM est totalement chargé (évènement DomReady).

window.addEvent('domready', function(){ &nbsp; &nbsp;
 &nbsp; &nbsp;flashObject.swiffConstruct();
})

Il arrive souvent d'avoir plusieurs objets flash sur une même page, dans ce cas il est intéressant de créer un tableau contenant ces objets.

Vous commencez par initialiser un tableau vide :

var flashObjectsArray = new Array();

Puis lorsque vous initialisez un objet flash, vous l'ajoutez au tableau avec la méthode concat:

flashObjectsArray = flashObjectsArray.concat(flashObject);

Enfin dans l'évènement DomReady, vous appliquez la fonction swiffConstruct à tous vos objets flash de la manière suivante :

window.addEvent('domready', function(){ &nbsp; &nbsp;
 &nbsp; &nbsp;flashObjectsArray.each(function(object) {
 &nbsp; &nbsp; &nbsp; &nbsp;object.swiffConstruct();
 &nbsp; &nbsp;});
});

De façon plus concrète, si nous souhaitons afficher un lecteur vidéo flash accompagné d'une vidéo en paramètre, on obtient :

var flashObjectsArray = new Array();
 
var flashObject = new FlashObject(
 &nbsp; &nbsp;'id_de_mon_animation',
 &nbsp; &nbsp;'mon_animation.swf',
 &nbsp; &nbsp;600,
 &nbsp; &nbsp;300,
 &nbsp; &nbsp;true,
 &nbsp; &nbsp;'high',
 &nbsp; &nbsp;{myFlv:'ma_video.flv'}
);
 
flashObjectsArray = flashObjectsArray.concat(flashObject);

Le bloc suivant présent dans le code HTML :

<div id="id_de_mon_animation"></div>

sera alors remplacé par le code suivant :

<object  
 &nbsp; &nbsp;height="300"  
 &nbsp; &nbsp;width="600"  
 &nbsp; &nbsp;data="mon_animation.swf"  
 &nbsp; &nbsp;type="application/x-shockwave-flash"  
 &nbsp; &nbsp;id="id_de_mon_animation"> 
 &nbsp; &nbsp; &nbsp; &nbsp;<param value="high" name="quality"/> 
 &nbsp; &nbsp; &nbsp; &nbsp;<param value="sameDomain" name="allowScriptAccess"/> 
 &nbsp; &nbsp; &nbsp; &nbsp;<param value="transparent" name="wMode"/> 
 &nbsp; &nbsp; &nbsp; &nbsp;<param value="true" name="swLiveConnect"/> 
 &nbsp; &nbsp; &nbsp; &nbsp;<param value="middle" name="align"/> 
 &nbsp; &nbsp; &nbsp; &nbsp;<param value="true" name="play"/> 
 &nbsp; &nbsp; &nbsp; &nbsp;<param value="http://www.ado[...]getflashplayer" name="pluginspage"/> 
 &nbsp; &nbsp; &nbsp; &nbsp;<param value="myFlv=ma_video.flv" name="flashVars"/> 
</object> 
 

Le code généré par Swiff est valide W3C, fonctionne sur tous les navigateurs et sur toutes les plateformes.

En revanche, seul inconvénient, les utilisateurs ayant désactivé le Javascript n'auront pas accès aux contenus flash, mais ils pourront avoir accès à un contenu alternatif.

En conclusion, les méthodes utilisant Javascript offrent, à notre avis, la meilleure alternative pour résoudre les problèmes d'insertion d'éléments flash. Si vous utilisez mootools pour votre site, celui-ci offre déjà la fonctionnalité Swiff qui vous évitera l'appel à une seconde librairie comme SwfObject.

A propos

Bienvenue sur le Workshop de l'agence interactive Maecia : notre espace d'actualités, de veille et de publications sur les nouvelles tendances d'Internet. Vous y trouverez aussi le fruit de certains de nos développements techniques que nous mettons à disposition de la communauté. Découvrez notre vision du web et surtout n'hésitez pas à prendre la parole !