Le blog de Guillaume Bizet

Le blog de Guillaume BIZET : Blogging, iPhone, Webdesign, XHTML, CSS, Web2.0, Dotclear et Dotclear2, ...

Aller au contenu | Aller au menu | Aller à la recherche

Intégration d'une animation flash valide

Logo FlashIl y a quelques temps je me suis retrouvé confronté à un problème d'intégration d'une animation flash dans les billets de mon blog.
Mon but premier étant bien sûr d'intégrer cette animation, mais surtout qu'elle respecte les standard W3C.
Après quelques tests, elle fonctionnait sur IE (Internet Explorer) mais pas sous mon navigateur préféré Firefox.

Au début j'avais tenté ce code

<object type="application/x-shockwave-flash" data="fichierflash.swf" width="604" height="20">
<param name="movie" value="fichierflash.swf" />
<param name="wmode" value="transparent" />
<embed>src="fichierflash.swf" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="604" height="20"></embed>
</object>

Quelques petites explication :

  • En Xhtml strict l'élément embed est déprécié et il faut utiliser l'élément object
  • la combinaison des deux éléments embed et object est possible (voir l'exemple ci-dessus)

Mais il se peut, et c'était mon cas, que cela ne s'affiche pas dans Firefox. Après moults essais voici un solution valide et qui marche aussi bien dans Internet Explorer et Firefox, cette solution m'a été donnée sur le forum de Dotclear :

Ayant tourné le problème dans tous les sens avec les connaissances que j'avais acquises, je ne m'en sortait pas. Après les recherches que j'ai fait sur le web j'ai trouvé une première solution sur le forum et la FAQ d'Alsacréations.

Alsacréations propose ce code :

<object type="application/x-shockwave-flash" data="fichierflash.swf" width="604" height="20">
<param name="movie" value="fichierflash.swf" />
<param name="wmode" value="transparent" />
<p>Image ou texte alternatif</p>
</object>

Et là : bingo cette solution fonctionne sur les 2 navigateurs.

Voici un petite liste de liens qui pourra vous aider pour toutes ces normes :

  • le site d'OpenWeb : site offrant à la fois un regard expert sur le web et des exemples concrets d'utilisation des normes du W3C en français
  • le site d'Alsacréations : communauté d'entraide spécialiste des css et des normes éditées par le W3C
  • le forum Alsacréations : le forum hyper réactif des css principalement

Voilà, j'espère que vous aurez appréciés mes explications.
Alors bonne intégration ;) ...

Edit : Corrections des liens

Guillaume BIZET

Auteur: Guillaume BIZET

Restez au courant de l'actualité et abonnez-vous au Flux RSS du blog ou du Flux RSS de cette catégorie

Lucio Lucio ·  06 septembre 2006, 10:02

Mister Guizounours,

T'es super bien placé sur ce post dans google... http://www.google.fr/search?hl=fr&q=flash+int%C3%A9gration+internet+explorer&btnG=Recherche+Google&meta= Bravo !

8-)

Guillaume Guillaume ·  06 septembre 2006, 11:17

Salut mon petit luc,

tu sais je n'ai rien fais du tout, c'est simplement dotclear qui est super bien foutu et qui permet un bon référencement ;)

A très bientôt j'espère, bises à cécile

zboo zboo ·  11 novembre 2006, 14:18

Hello
À noter une petite coquille dans le début de code que tu proposes :
Il faut lire <object type
et non <object>type

;-)

z.

Guillaume Guillaume ·  11 novembre 2006, 15:08

Euh oui, bien vu Zboo. Merci !!!

C'est corrigé

Dem Dem ·  24 juillet 2007, 14:01

Super enfin un site qui dit pas que c'est impossible de mettre des vidéos compatible W3C, IE et Firefox ! super cool !

par contre tu peux rajouter un petit

<object codebase="http://download.macromedia.com/pub/...">
Comme ça si le client n'a pas le plugin flash ça lui propose de l'installer ^^

(et biensur c'est compatible W3C)

Merci bien pour ces lignes de codes et bonne continuation

Nat Nat ·  25 novembre 2008, 12:31

:( non désolé ça ne marche pas sous firefox.

;-(

aucune annexe



À Voir Également

Prpriétés CSS texte et police

La propriété CSS de texte à la loupe

J'ai découvert hier cette fiche récapitulative de toutes les valeurs et options pour les propriétés ...

Lire la suite

Menu pointillé

[CSS] Enlever les pointillés des liens

Dans l'optimisation d'un site web ou d'un blog, il faut parfois penser aux petits détails qui font ...

Lire la suite