Monday, 17. July 2006, 12:05:00
L'inclusion d'un élément nécessitant le plugin Adobe (ex Macromédia) Flash n'est pas une mince affaire.
Dans le meilleur des cas, vous aurez peut-être l'occasion de voir votre plugin s'afficher sous un navigateur, parfois sous deux... Dans le pire, vous ne verrez rien !
Bien entendu, beaucoup se sont penché sur la question et de nombreuses solution sont parues. Certaines plus faciles que d'autres.
Passons en revues quelques-unes de ces solutions.
La solution "écrire en dur"
Ici point de petite astuce, point de renvois au site de téléchargement ou autre... Ce qui se passe, nous écrivons en "dur" (insertion directe du code) dans la page.
Pour ce faire, nous travaillons par la balise
OBJECT. Celle-ci est gerée via une autre balise
PARAM... Qui comporte donc la paramétrisation de la première.
Lorsque nous utilisons un éditeur de page en WYSIWYG, nous avons bien souvent un code de ce style :
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="200"
height="20" title="play it !" bgcolor="#999999">
<param name="movie" value="monflash.swf">
<param name="quality" value="high">
<param name="bgcolor" value="#999999">
<embed src="monflash.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash" width="200" height="20"></embed>
</object>
Hors lorsque nous validons notre page HTML par le W3C, nous obtenons une dizaine d'erreur facilement. Mais alors comment faire.
Lorsque nous consultons différents sites (qui nous renseigne sur une méthode plus "valide"), nous obtenons le code suivant :
<object type="application/x-shockwave-flash" data="fichierflash.swf" width="600" height="20">
<param name="movie" value="fichierflash.swf" />
<param name="wmode" value="transparent" />
<p>Image ou texte alternatif</p>
</object>
Cf. Css.AlsaCreations.com Cette dernière méthode est compatible par tous les navigateurs. Parfais me direz-vous, nous gérons tout aussi le contenu réel (le Flash) que le contenu alternatif (via un texte ou une image).
Mais cela serait beaucoup trop simple si... Il n'y avait pas incompatibilité de version de Flash (sur les éléments avancés).
De fait, d'autres personnes se sont à nouveau penchées sur le problème et ont sortis quelques JavaScript des plus sympathiques.
Je citerais donc deux méthodes qui m'ont particulièrement séduites :
la méthode Satay, la méthode du
FlashObject...
Toutes deux inclues un système de détection, de redirection etc. permettant d'avoir la version souhaitée ainsi que la visualisation correcte.
De véritable petites merveilles... Mais un peu (voir beaucoup) trop complèxe pour moi.
Alors je me suis "amusé" à pouvoir combiner les deux... Mais sans aucuns systèmes de redirection ou téléchargement. J'utilise très simplement du Javascript pour écrire l'OBJECT Flash et s'il n'est pas affiché, je puis donc utiliser le dernier paramètre pour un contenu alternatif.
Les méthodes Satay et FlashObject intègrent bien entendu cela.
Cependant, j'ai décidé de continuer l'originalité par l'utilisation de la balise NoScript définie identiquement à la manière du contenu alternatif de la balise OBJECT.
De fait, peut importe que le navigateur gère Flash ou non, Javascript ou non, il y aura l'affichage du contenu alternatif.
Nous pourrions aussi afficher dans la balise NoScript le Flash en soi... Une idée comme une autre.
Passons en revue maintenant le code :
En javascript
// Auteur : Groumphy
// Version : v1.0.1
// Licence : CreativeCommons Partage à l'identique BE
// SWF = le fichier Flash
// S_SWF = largeur du Flash
// H_SWF = hauteur du Flash
// ALT_IMG = image alternative
// ALT_TXT = texte alternatif
function _gFlash(swf, w_swf, h_swf, alt_img, alt_txt) {
document.write('<object type="application/x-shockwave-flash" data="' +
swf + '" width="' + w_swf + '" height="' + h_swf + '">');
document.write('<param name="movie" value="' + swf + '">');
document.write('<param name="wmode" value="transparent">');
if ((alt_img != '') || (alt_img != ' ')) {
document.write('<img src="' + alt_img + '" width="' + w_swf + '" height="'
+ h_swf + '" alt="">'); }
if ((alt_txt != '') || (alt_txt != ' ')) {
document.write('<p>' + alt_txt + '</p>'); }
document.write('</object>'); }
En HTML :
<script language="javascript1.1" type="text/javascript">
_gFlashHtml('monflash.swf', '400', '300', '', '');
</script>
<noscript>
<object type="application/x-shockwave-flash" data="monflash.swf" width="600" height="20">
<param name="movie" value="fichierflash.swf" />
<param name="wmode" value="transparent" />
<p>Image ou texte alternatif</p>
</object>
</noscript>
J'ai effectué les tests sous différents navigateurs et systèmes d'exploitation, mais je n'ai pas constaté de problèmes majeurs (excepté ceux que je cite si souvent relatif à l'utilisation du Javascript et des plugins... En rapport aux utilisateurs [visiteur] les plus pointus au niveau des langages clients etc.).
Que pensez-vous d'une méthode pareille ?
Quels serait les avantages ou inconvéniants...
WIDGETIZE