Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

SWFObject: Script Javascript d'auto-détection du Player Flash

Compatible JavaScript. Cliquer pour en savoir plus sur les compatibilités.Compatible HTML. Cliquer pour en savoir plus sur les compatibilités.Compatible Flash. Cliquer pour en savoir plus sur les compatibilités.Compatible Flex Builder. Cliquer pour en savoir plus sur les compatibilités.
Le contenu de cette page n'est pas à jour.
Les logiciels ou les technologies ont évolués depuis l'écriture de cette page. Les informations qu'elle contient peuvent être périmées.
Si vous avez des informations complémentaires à y apporter, n'hésitez pas à contribuer en éditant cette page. Merci.

Traduction de http://blog.deconcept.com/swfobject/

Cette page commence à se faire vieille. Au 9 avril 2011, SWFObject en est à la version 2.2. Vous la trouverez ici http://code.google.com/p/swfobject/ , ainsi que sa documentation.
Lilive

Téléchargement

SWFObject est publié sous MIT License. En gros cela veut dire que vous pouvez l'utiliser pour tout ce que vous voulez sans restrictions.

Download SWFObject 1.5 - Fichier Zip, avec swfobject.js, expressinstall.swf et des exemples d utilisation (fullscreen, detection etc.)

SWFObject est un petit script Javascript utilisé pour inclure un contenu swf dans une page HTML. Le script peut détecter le plug-in Flash dans tous les principaux navigateurs (sur MAC et PC) et est conçu pour rendre l'intégration des swf aussi simple que possible. L'intégration dans la page est très propre il peut être employé dans les documents valides HTML et XHTML 1.0 *, et est compatible avec les spécifications futur, ainsi vous pourais continuer a l'utiliser pendant les prochaines années a venir.
* Pages text/html, et non pas application/xhtml+xml.

Note: SWFObject est le script autrefois connu sous le nom de FlashObject. Le nom a du être changé pour des raisons de marque déposée. Pour plus d'information, voyez ce billet.

Ce qu'il y a de neuf dans cette version ?

Pour voir la liste de tout les changements, aller voir mon billet sur SWFObject 1.5.

Comment cela fonctionne

[ Pour les nerds, vous pouvez regarder le Javascript ici.]

Employer SWFObject est simple. Ajouter simplement le fichier Javascript swfobject.js, puis ajouter un peu de Javascript dans votre page pour inclure votre swf. Voici un exemple montrant la quantité minimum de code requise pour inclure un swf :

<script type="text/javascript" src="swfobject.js"></script>
 
<div id="flashcontent">
  Ce texte sera remplacé par votre swf. 
</div>
 
<script type="text/javascript">
   var so = new SWFObject("movie.swf", "mymovie", 200, 100, 7, "#336699"); 
   so.write("flashcontent");
</script>

C'est dans ce div que sera inclus votre swf :

<div id="flashcontent">[...]</div>

Prévoyez cet élément HTML qui contiendra votre swf. Le contenu placé a l'intérieur sera remplacé par le swf, ainsi les utilisateurs possédant la bonne version du Flash Player ne verront jamais le contenu à l'intérieur de cet élément. Ce dispositif permet en plus de laisser les moteurs de recherche référencer un contenu alternatif.

var so = new SWFObject("movie.swf", "mymovie", 200, 100, 7, "#336699");

Créez un nouveau SWFObject et passez lui les paramètres requis :

  • swf - le chemin vers votre swf.
  • id - l'attribut id de votre objet. l'attribut name prendra également cet valeur car c'est l'attribut qui tirent profit du swliveconnect .
  • width - la largeur de votre swf.
  • height - la hauteur de votre swf.
  • version - la version de player requise pour votre swf. Ceci peut être un string du type 'majorVersion.minorVersion.revision '. Exemple : “6.0.65” . ou vous pouvez seulement spécifier la majorVersion, telle que “6” .
  • couleur de fond - La couleur de fond de votre swf en hexadécimal. Exemple : ”#00ff00”

Les paramètres facultatifs sont :

  • useExpressInstall - si vous voulez proposer a vos internaute la dernière version du player Flash utilisez ExpressInstall en attribuant true a ce paramètre.
  • qualité - la qualité que vous souhaitez pour votre swf. Si aucune qualité n'est indiquée, Par défaut “high” .
  • xiRedirectUrl - si vous voulez rediriger les utilisateurs qui accepte la mise a jour, vous pouvez indiquer un URL alternatif ici.
  • redirectUrl - si vous voulez rediriger les utilisateurs qui n'accepte pas la mise a jour, vous pouvez indiquer un URL alternatif ici.
  • detectKey - si vous souhaitez changer le nom de la variable d'url que le script doit vérifier pour changer l'état de la detection du player. Par défaut “detectflash”. Par exemple pour annuler la détection du player et simplement insérer l'animation dans la page, vous pouvez ajouter ”?detectflash=false” dans l'url de votre document.
so.write("flashcontent");

Appel le script SWFObject pour inclure dans la page le contenu swf (si la bonne version du player Flash est installé) est remplace le contenu de la l'élément à l'ID spécifié.

Les Détails

SWFObject fonctionne tranquillement en tache de fond de votre document HTML. En créent les pages qui utilise FlashObject, vous devriez commencer par votre contenu alternatif. Finalisez vos pages sans les swf, puis les ajoutez dedans par la suite. Ceci assure que le contenu alternatif soit référencé par les moteurs de recherche, et que les utilisateurs qui n'ont pas le player voient toujours une page html cohérente. Si votre contenu alternatif suffit, il ne sera pas forcement nécessaire de dire aux internautes qu'ils ont loupé quelque chose.

SWFObject fonctionne dans tous les principaux navigateurs, incluant, sur PC: IE5/5.5/6, Netscape 7/8, Firefox, Mozilla, et Opéra. Sur MAC: IE5.2, Safari, Firefox, Netscape 6/7, Mozilla, et Opéra 7,5+, et devraient continuer à fonctionner dans le futur.

SWFObject détecte les version du Player Flash dans ces navigateurs de la version 3 et +, et permettra aux utilisateurs d'agir sur le swf sans devoir 'l'activer' d'abord. Pour plus d'information sur ceci, voir le billet de blog sur Internet Explorer et ça dernière mise a jour 'douteuse'.

SWFObject peut détecter les versions mineures et les versions de révision du Player Flash, simplement en passant le string de la version que vous voulez. Un exemple pour exiger le player v.6.0 r65 (ou 6.0.65.0) serait :

var so = new SWFObject("movie.swf", "mymovie", 200, 100, 7, "#336699");

La détection du plug-in peut être outre passé avec SWFObject. Si un nouveau navigateur incompatible, ou pour n'importe quel problème qui ferait échouer la détection du player, vous pouvez concevoir un lien qui désactiverait la détection automatique, et qui permettrait donc l'insertion direct du contenu Flash. Pour utiliser le lien d'évitement, ajoutez simplement la variable “detectflash” à l'url de votre page, avec la valeur “false”. Voici un exemple :

<a href="mypage.html?detectflash=false">Ignorer la détection.</a>

SWFObject Exemples

L'exemple donné ci-dessus montre le minimum pour utiliser SWFObject, mais si vous voulez employer les autres paramètres que le swf nous offre ? SWFObject rend très facile l'ajout de n'importe quel paramètre supplémentaire dont vous pourriez avoir besoin. Les exemples vous montre différentes méthodes que vous pouvez employer.

Un exemple simple ajoutant quelques paramètres supplémentaires

<script type="text/javascript">
   var so = new SWFObject("movie.swf", mymovie, 200, 100%, 7, "#336699");
   so.addParam("quality", "low");
   so.addParam("wmode", "transparent");
   so.addParam("salign", "t");
   so.write("flashcontent");
</script>

Voici une liste de tous les paramètres courants et de leurs valeurs possibles sur adobe.com.

Passage de variables dans vos swf en utilisant le paramètre "Flashvars" :

Employer Flashvars est la manière la plus facile d'obtenir des données de votre HTML dans votre swf, mais vous pouvez seulement passer les données aux chargement. Normalement, vous ajouteriez un paramètre “flashvars” et pour la valeur, vous passeriez un string de nom=valeur comme ceci : variable1=value1&variable2=value2&variable3=value3 et ainsi de suite. SWFObject facilite un peu ceci en vous permettant d'ajouter autant de variables que vous voulez de la même façon que vous ajoutez des paramètres additionnels. Voici un exemple :

<script type="text/javascript">
   var so = new SWFObject("movie.swf", "mymovie", 200, 100, 7, "#336699");
   so.addVariable("variable1", "value1");
   so.addVariable("variable2", "value2");
   so.addVariable("variable3", "value3");
   so.write("flashcontent");
</script>

Une fois que ceci est fait, toutes les variables que vous passez seront disponibles immédiatement à l'intérieur du swf. On y accéde via _root 1).

Le script SWFObject offre également une fonction supplémentaire qui vous permet de récupérer des variables dans l'URL. Un exemple nous avons une URL qui ressemble à ceci : http://www.example.com/page.html?variable1=value1&variable2=value2 . En utilisant la fonction getQueryParamValue()vous pouvez facilement récupérer ces valeurs de l'URL et les passer dans a votre swf. Voici un exemple, avec l'URL ressemble de l'exemple ci-dessus :

<script type="text/javascript">
   var so = new SWFObject("movie.swf", "mymovie", 200, 100, 7, "#336699");
   so.addVariable("variable1", getQueryParamValue("variable1"));
   so.addVariable("variable2", getQueryParamValue("variable2"));
   so.write("flashcontent");
</script>

La fonction getQueryParamValue() supporte aussi la lecture de variables depuis location.hash, utilisé parfois pour le deep linking dans le Flash. Pour un exemple sur la manière d'utiliser le location.hash dans un document Flash, allez voir cette démo de Slideshow Pro, qui utilise SWFObject.

Utiliser Express Install avec SWFObject

SWFObject supporte pleinement l'installation Express de Flash (Macromedia Flash Player Express Install). Inclu avec SWFObject sous la forme d'un fichier swf externe, il travaille avec SWFObject pour commmencer une mise à jour dans votre Flash. Vos utilisateurs n'ont jamais à quitter votre site pour mettre à jour leur Player, et quand l'upgrade est fini, ils retournent automatiquement à la page depuis laquelle la mise à jour à été lancé.

Pour utiliser ExpressInstall, vous devez premièrement:

→ uploader le fichier expressinstall.swf ( inclu dans le zip) sur votre serveur (par defaut dans le même dossier que la page HTML qui doit afficher le swf)

→ eventuellement specifier dans le javascript dans l attribut “so.useExpressInstall” si l “expressinstall.swf” a été placé dans un autre dossier…

<script type="text/javascript">
      var so = new SWFObject("movie.swf", "mymovie", "200", "100", "8", "#336699");
      so.useExpressInstall('expressinstall.swf');
      so.write("flashcontent");
</script>

Pour un exemple en live de ce code, ouvrez source/so_tester.fla, inclus dans le zip de SWFObject. Si vous souhaitez voir ExpressInstall en action, vous pouvez installer Flash player 7 (ou 6.0.65) et visiter this page.

Si votre Flash se trouve dans une popup, ou si vous voulez rediriger l'utilisateur a un autre endroit après un ExpressInstall, vous pouvez utiliser l'attribut xiRedirectUrl. Par défaut c'est la page actuelle, avec votre animation qui est rechargé.

→ l'attribut xiRedirectUrl necessite une URL absolut vers la page HTML qui doit etre ouverte!

<script type="text/javascript">
   var so = new SWFObject("movie.swf", "mymovie", 200, 100, 7, "#336699");
   so.useExpressInstall('expressinstall.swf');
   so.setAttribute('xiRedirectUrl', 'http://www.example.com/upgradefinished.html');    
 
  so.write("flashcontent");
</script>

Téléchargement

SWFObject est publié sous MIT License. En gros cela veut dire que vous pouvez l'utiliser pour tout ce que vous voulez sans restrictions.

Download SWFObject 1.5 - Fichier Zip, avec swfobject.js, expressinstall.swf et des exemples d utilisation (fullscreen, detection etc.) Voici quelques pages d'exemples :

* Pages envoyé en text/html, et non en application/xhtml+xml.

Peut être voulez vous vous inscrire à la SWFObject mailing list(en). Il s'agit d'une liste de discussion ou vous pouvez poser vos questions à propos de problèmes rencontré avec SWFObject où pour proposer de nouvelles fonctionnalitées.

Pourquoi c'est mieux que les autres solutions

Au fil des années, il y a eu de nombreuses méthodes pour détecter la version du Player Flash et pour insérer des animations dans des pages HTML. Cette section va pointer les défauts majeurs des méthodes les plus populaires.

1) La solution par défaut Macromedia

Tous le monde connait la solution par défaut de Macromedia. Elle utilise la balise object avec une balise embed en secour. C'est la technique la plus utilisé, et pour cause, elle est automatiquement fourni par l'IDE Flash de Macromedia. C'est aussi la solution qui offre le meilleur taux de compatibilité avec les différents navigateurs.

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" 
   codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" 
   width="550" height="400" id="Untitled-1" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="mymovie.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src="mymovie.swf" quality="high" bgcolor="#ffffff" width="550" 
   height="400" name="mymovie" align="middle" allowScriptAccess="sameDomain" 
   type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

Même si c'est la technique la plus commune pour insérer une animation Flash, elle n'est pas exempte de défauts.

  • Il n'y a pas de détection du Plug-in. - Sans détection du Player, les utilisateurs pourrait voir du contenu cassé, ou même rien, et si il n'y a pas de Flash player installé, ils auront la boite de dialogue 'Active X Install' sous IE (une boite qui fait peur à de nombreux utilisateurs car souvent utilisé pour installer des malware) ou la notification avec la pièce de puzzle dans les navigateurs Mozilla. Aucun de ces systèmes d'installation n'est 'user friendly', et il n'est pas toujours bien précisé ce que l'utilisateur installe exactement.
  • Les utilisateurs doivent cliquer sur l'animation une première fois pour 'l'activer' avant de pouvoir interagir avec. (Plus d'infos(en)).
  • Ce n'est pas valide XHTML ou HTML - La balise embed est déprécié en XHTML et HTML. Seulement de nombreux navigateur n'interprète pas object de la bonne façon et il est donc toujours nécéssaire d'utiliser embed pour garantir la rétro compatibilité.

2) Balise Object uniquement / Flash satay

Cette méthode est devenu populaire après ce article sur A List Apart en 2002. Voici deux exemples d'implémentation Flash avec la balise object et avec Flash satay :

Object tag only
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
   codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"
   width="300" height="120">
 <param name="movie" value="http://www.macromedia.com/shockwave/download/triggerpages_mmcom/flash.swf"> 
 <param name="quality" value="high">
 <param name="bgcolor" value="#FFFFFF">
 <!--[if !IE]> <-->
 <object data="http://www.macromedia.com/shockwave/download/triggerpages_mmcom/flash.swf"
		 width="300" height="120" type="application/x-shockwave-flash">
  <param name="quality" value="high">
  <param name="bgcolor" value="#FFFFFF">
  <param name="pluginurl" value="http://www.macromedia.com/go/getflashplayer">
  FAIL (the browser should render some flash content, not this).
 </object>
 <!--> <![endif]-->
</object>
Flash satay
<object type="application/x-shockwave-flash
data="c.swf?path=movie.swf" 
width="400" height="300">
<param name="movie" 
value="c.swf?path=movie.swf" />
<img src="noflash.gif" 
width="200" height="100" alt="" />
</object>
  • Problème d'accessibilité. - Avec Flash Satay, Quelques lecteurs d'écran (comme JAWS) vont ignorer votre contenu Flash(en).
  • Les utilisateurs doivent cliquer sur l'animation une première fois pour 'l'activer' avant de pouvoir interagir avec. (Plus d'infos(en)).
  • Il n'y a pas de détection du Plug-in. - Idem, sans détection du Player, les utilisateurs pourrait voir du contenu cassé, ou même rien. Le clip Flash sera lu avec la version installé, quelle qu'elle soit, ce qui peut provoquer des dysfonctionnements dans votre animation.
  • Quelques méthodes de Flash satay ne stream pas les clip Flash dans le Player - Cette méthode requiert un conteneur dans lequel votre animation est chargé. Cela fait passer des variables par Flashvars et rend difficile la maintenance.
  • Les anciennes version de Safari ignores les balises param - Corrigé epuis la version 2.0 (sur Tiger) ou 1.3 (sur Panther) et probablement la 1.2.8 (pre Panther) Safari ignore complètement les balises param.

3) Détection : La méthode 'Petit flash sur la page index'

Cette méthode consiste à placer un simple Flash qui va vérifier la variable $version du Flash Player et redirige l'utilisateur soit sur le site soit vers une page de mise à jour.

  • Pas de détection du plug-in dans les pages interne. - Si l'utilisateur ne passe pas par la page de détection, elle devient inefficace et inutile.
  • Les utilisateurs doivent cliquer sur l'animation une première fois pour 'l'activer' avant de pouvoir interagir avec. (Plus d'infos(en)).
  • Non valide HTML ou XHTML - La balise embed rendra vos documents invalide.
  • Mauvais pour le référencement - Si vous n'indiquez pas de contenu alternatif à votre flash de détection, les moteurs de recherche indexerons une page vide, et si vous ne placez pas un lien hypertexte pour passer la page index, vos pages ne pourrons être indexé.

4) Macromedia Flash Player Detection Kit

Macromedia à conçu bon détecteur de version dans Flash 8 - mais il n'est pas excellent. Il contient deux manières différentes de détecter la version du plug-in Flash :

  1. Le classic “Petit Flash sur l'index” - (Voir plus haut)
  2. Javascript - Hey oui, Flash inclus maintenant un Javascript de détection du plug-in. Malheuresement, il n'est pas vraiment user friendly, mixant Javascript, VBscript et tout votre HTML dans une seule page. De plus il ne valide pas HTML ou XHTML.

Pour un regard plus en profondeur sur le Kit de détection de Macromedia, suivez ce lien(en).

5) Utiliser du Javascript pour détecter et insérer vos animations Flash

Il est difficile de critiquer cette méthode qui varie de site en site. Il se trouve que la majorité des script de détection du Flash player ont les même défauts :

  • Détection statique du plug-in - Souvent la détection ne fonctionne qu'avec la version actuel du plug-in et a besoin d'être mis à jour manuellement à chaque nouvelle version.
  • Ajoute plus de code dans la page - Rend votre contenu difficile à modifier, à maintenir. Cette méthode rend aussi le travail plus compliqué pour les Designers qui travaillent avec des Flash.
  • Des usines à gaz - De nombreux script d'insertion d'animation Flash sont de gros fichiers et sont compliqué à modifier. SWFObject est conçu pour être petit et simple.

FAQ

Q. Qu'est que ce bug avec Internet Explorer, il faut cliquer sur une animation pour en avoir le contrôle (Active Content Update(en)). SWFObject résout il ce problème ?
A. Oui, SWFObject résout le 'Activating Active Content' problème des nouvelles versions d'IE.

Q. Pourquoi mon contenu alternatif apparait comme un flash avant que le flash ne se charge ? (uniquement avec IE sous Windows)
A. C'est lié à ce bug : FOUC. Cela peut être contourné en ajoutant une balise link pointant vers n'importe quel CSS dans la partie head de votre document.

Q. Puis je utiliser SWFObject pour mettre plusieurs animations sur la même page ?
A. Oui. Donnez juste a chaque SWF et chaque élément à remplacer un ID unique.

Q. Comment faire marcher SWFObject dans Netscape 4.x ?
A. Ce commentaire propose quelques exemples pour faire fonctionner SWFObject dans Netscape 4.x.

Q. Puis je utiliser SWFObject avec mon Blog ?
A. Oui, il existe même des plug in pour Wordpress et Textpattern ici.

Q. Puis je utiliser SWFObject avec Dreamweaver ou Golive ?
A. Il y a une extension pour Dreamweaver disponible sur CommunityMX. Il n'y en a pas pour Golive pour le moment.

Q. Cette page est-elle disponible dans d'autres langues ?
A. Suisse, Italien, Allemand, Espagnol, Polonais, Japonais, et Finlandais.

Q. Existe il un template de publication à utiliser avec Flash ?
A. Oui. Vous pouvez le télécharger ici : Fluid Flash Blog.

Q. Qui utilise SWFObject/FlashObject ?
A. Des sites comme The Library of Congress, Adobe.com (Avec une version custom), Amazon.com, Windows.com, YouTube.com, skype.com, Snapple.com, il est inclut avec Adobe Photoshop (dans la galerie photo Flash) et des milliers d'autres.

Des problèmes ? Commencez par lire ces quelques sujets : 1, 2, 3, soyez attentif aux commentaires, de nombreux problèmes y on été résolu.

Thanks

Toby Boudreaux pour ses conseils, son aide pour rendre le code de SWFObject plus propre.

1) nda : l'utilisation de _root n'est conseillé que dans ce cas très particulier