Le bon code HTML pour insérer du Flash
Il faut dire qu'on est pas aidé, partout on nous propose d'inclure des vidéos ou des animations Flash avec du code erroné. À part quelques développeurs pointilleux, la plupart des gens copie-colle le code donné sans même savoir que la balise <embed> n'existe pas en HTML!
En plus le code correct est beaucoup plus simple et plus court.
Voilà par exemple un code donné par Dailymotion:
<div><object width="420" height="357"><param name="movie" value="http://www.dailymotion.com/swf/xqhfz&related=1"></param><param name="allowFullScreen" value="true"></param><param name="allowScriptAccess" value="always"></param><embed src="http://www.dailymotion.com/swf/xqhfz&related=1" type="application/x-shockwave-flash" width="420" height="357" allowFullScreen="true" allowScriptAccess="always"></embed></object></div>
J'ai enlevé les liens de fin pour ne garder que la vidéo.
Voilà la même vidéo avec le code correct d'un point de vue HTML:
<div><object type="application/x-shockwave-flash" data="http://www.dailymotion.com/swf/xqhfz&related=1" width="420" height="357"><param name="movie" value="http://www.dailymotion.com/swf/xqhfz&related=1" /><param name="allowFullScreen" value="true" /></object></div>
Remarque 1: la ligne <param name="movie" ...> où on répète l'adresse est pour IE qui ne la trouve pas au bon endroit.
Remarque 2: le <param> pour l'accès par script, on s'en fout. Si vous ne savez pas à quoi ça sert, c'est que vous n'en avez pas besoin.
Remarque 3: on peut centrer la vidéo en mettant à la place du <div> initial <div style="text-align:center">. D'ailleurs ce <div> peut être remplacé par un banal <p>.
~
En résumé:
- je copie-colle le passage type="application/x-shockwave-flash" src="adresse" de <embed> vers <object> et je remplace src par data
- je supprime toute la balise <embed>
- je modifie les ...></param> en ... />
~
Le bon code pour un Flash doit être ceci, à garder précieusement:
<object type="application/x-shockwave-flash" data="ADRESSE" width="LARGEUR" height="HAUTEUR"><param name="movie" value="ADRESSE" /><param name="allowFullScreen" value="true" /></object>
On peut comprendre la démarche des sites de partages de vidéo (ou autres) car ce code s'adresse avant tout aux blogueurs, et malheureusement l'éditeur WYSIWYG de Wordpress abime ce code. Même si on insère le bon code en mode HTML, quand on repasse l'éditeur en mode visuel il le saccage.
Ma méthode consiste à faire les 3 étapes ci-dessus en mode HTML et à valider l'article sans repasser en mode visuel. Comme ça le code n'est pas modifié par l'éditeur visuel (TinyMCE).
Mini FAQ: À quoi ça sert d'avoir du code correct? Le code incorrect marche quand même!
Ça sert à respecter les règles de l'HTML. Comme quand on écrit en français. Si jécri kom sa on kompren kan m^, pourtan c pa bo!
Et ça marche actuellement. Mais combien de temps les navigateurs vont-ils supporter ce code? À l'heure où des efforts sont faits pour respecter les standards (même IE 8 sera 100% correct parait-il), il faut que les créateurs de sites soient les premiers à montrer l'exemple.
~
PS: Il y a une solution pour du Flash valide dans TinyMCE et Wordpress.

Cet article vous a aidé? 




Bonjour,
votre article est intressant mais partiellement faux!
En effet la balise existe en html !!!!
La balise HTML EMBED permet d'insérer, une vidéo ou du son ou du flash.
La balise HTML EMBED est généralement associée avec la balise HTML
Jeudi 31 juillet 2008 à 9:34Les attributs Html cités sont les attributs principaux de la balise HTML EMBED.
Chaque plugin a ses propres attributs.
Pour la balise HTML OBJECT, ces attributs seront mis dans la balise HTML PARAM dans l'attribut HTML NAME. Pour la balise HTML EMBED, ils seront insérés en temps qu'attributs.
Alors montrez la moi dans la liste des éléments...
Ou montrez-moi une page avec la balise <embed> qui passe le validateur du W3C.
Jeudi 31 juillet 2008 à 9:57La balise n'a pas été reprise dans les spécifications officielles du HTML 4.0 (W3C) : elle est remplacée par la balise .
http://developer.mozilla.org/fr/docs/HTML:Element
Cdt,
Jeudi 31 juillet 2008 à 10:58Correction*
Jeudi 31 juillet 2008 à 10:59... est remplacée par la balise .
grr par la balise "object"
Jeudi 31 juillet 2008 à 11:00dsl des posts pour rien
Donc l'article n'est pas du tout faux, EMBED n'existe pas dans la dernière spécification d'HTML (celle que tout le monde devrait suivre) et il faut bien utiliser OBJECT... Where is the problem? No Stress!
Jeudi 31 juillet 2008 à 12:16En effet Grucho!
Le but est justement de se passer d'<embed> pour ne garder que <object>.
Mais en fait, <embed> n'a jamais été dans les balises officielles. Même dans les plus anciennes version d'HTML.
C'est une balise inventé par Netscape en son temps. Mais le W3C ne l'a jamais officialisée et il a préconisé <object> qui est beaucoup plus puissante (Flash, Java, son, image, page HTML externe...).
Jeudi 31 juillet 2008 à 15:52Dimanche 24 août 2008 à 16:21
Merci beaucoup !
Samedi 20 septembre 2008 à 0:49merci super !
Lundi 27 octobre 2008 à 20:21Pour insérer du flash dans une page je préfère utiliser le script swfobject : http://blog.deconcept.com/swfobject/
Lundi 17 novembre 2008 à 9:26Merci.
Dans l'article il s'agissait principalement de corriger le code donné par les sites de vidéo.
Et puis quel intérêt? SWFObject alourdit la page et on perd le référencement des Flash par les moteurs.
Lundi 17 novembre 2008 à 20:36Bonjour,
Jeudi 26 mars 2009 à 13:11je pense que votre code est imcomplet.
La balise embed existe en XHTML (http://www.aliasdmc.fr/balise/zone_html_embed.html par exemple), mais n'est effectivement pas valide W3C, mais on peut considerer son existance du fait de sa prise en charge par certains navigateurs.
De plus des arguments comme pluginspage sont utile au navigateur pour trouver le plugin nécessaire s'il n'est pas déjà présent.
Dans cette version light, certains navigateur peuvent être dans l'impossibilité de savoir comment récupérer le plugin si celui-ci n'est pas installé.
La balise ‹embed› fonctionne, mais n'a jamais été officielle, donc ça ne durera peut-être pas.
Les navigateurs savent quel extension utiliser grâce au type="application/x-shockwave-flash".
‹object› permet beaucoup plus de choses, notamment d'indiquer un contenu alternatif.
Lundi 30 mars 2009 à 14:06On peut mettre par exemple un texte avec lien pour indiquer où télécharger le plugin. Ce texte sera en plus vu par les moteurs et les navigateurs textes, ce qui est une très bonne chose.
Est ce que ce code est bon si je veux bien replacer mon fichier flash dans ma page grâce aux positions en pixels avec le fichier css ? ‹object id="banniereswf" type="application/x-shockwave-flash" data="anim/banniere.swf" width="320" height="240"›‹param name="movie" value="anim/banniere.swf" /›‹/object› (j'ai fait expres de ne pas mettre les signes ‹› dans le code car sinon il n'apparaissait pas dans le commentaire, donc ne pas prendre en compte ces deux pseudo erreurs en début et fin de code)
Mardi 28 avril 2009 à 23:47J'ai remplacé tes balises par des guillemets ‹› parce que ça ne marchait pas, même comme tu avais fait.
Si j'ai bien compris ta question, oui bien sûr. On peut mettre un id ou une classe à un objet pour lui donner des propriétés en CSS.
Mercredi 29 avril 2009 à 18:11Bonjour, j'arrive un peu tard sur le sujet. Mais avec le code ci dessus, le SWF fonctionne très bien sur FF mais pas sur IE8 (ça n'affiche rien). Une idée? d'avance merci.
Jeudi 8 octobre 2009 à 17:57Je n'ai aucune certitude, mais je soupçonne un réglage de sécurité d'IE. Les questions à se poser sont:
est-ce que ça fonctionne sur d'autres sites? Si oui, quelle est la différence?
Au pire, utiliser SWFObject cité plus haut...
Samedi 10 octobre 2009 à 16:09Tout à fait juste, pas mal de codes un peu partout mais pour la plupart du grand n'importe quoi, merci beaucoup pour ce précieux petit bout de code:
Lundi 12 octobre 2009 à 22:04Hello tout le monde ,
est ce que quelqu'un aurait un début de solution sur comment retirer les pointillés au clic droit sur le swf avec ce code ? je fais des fautes volontaires pour que le code s'affiche !
object type="application/x-shockwave-flash" data="http://www.pouette.swf" width="1001" height="301" param name="movie" value="http://www.pouette.swf" /param name="wmode" value="transparent" //object
C'est le "wmode" qui produit ces pointillés et j'ai dù être obligé de le rajouter pour que la transparence soit prise en compte sous FF et IE(8)
Je vous remercie de m'éclairer sur le sujet car pour le moment personne a trouvé !
encore désolé du double post j'avais pas vu qu'on pouvait éditer !
Enjoy
Samedi 26 décembre 2009 à 12:40Désolé du double post !
Samedi 26 décembre 2009 à 12:42Je ne vois pas les pointillés dont tu parles.
Même sur ton site, quand je fais un clic droit sur le Flash, j'ai le menu habituel, bien propre.
Vendredi 1 janvier 2010 à 15:29Merci, ça faisait un moment que je ne parvenais pas à faire fonctionner des flash dans IE8.
Lundi 25 janvier 2010 à 6:35Excellent article.
En tt k, il y a peut-être des erreurs, MAIS QUEL PLAISIR DE ENFIN TROUVER LE BON CODDDDEEEEE!!!!!
Mercredi 17 février 2010 à 14:28Bonjour,
J'ai essayé depuis 3 jours en vain le code que vous avez proposé, mais je n'arrive pas à comprendre comment écrire le chemin, la vidéo ne s'affiche pas. Mon code donne ceci:
Impossible de le faire marcher!! C'est la seule chose que je n'ai pas réussie à faire, j'ai construit ce site en n'y connaissant rien, mais là, je sèche!
Jeudi 18 février 2010 à 19:49Merci beaucoup à celui ou celle qui pourra m'éclairer!
J'ai regardé ton site, il faut data="filmpagedaccueil.swf".
Samedi 20 février 2010 à 18:03Super tout çà !
Jeudi 11 mars 2010 à 21:28Comment peut-on ajouter un lien vers une page php ?
J'essaye, mais çà marche pas...
Oui, on peut ajouter un lien qui entoure le Flash. En cliquant sur le Flash, on devrait changer de page.
Samedi 27 mars 2010 à 19:18Bonjour, j'ai une petite question qui me trotte là, pourquoi doit-on mettre 2 fois l'adresse ? La première fois dans le "data" et la seconde dans le "value" du "param name movie" ?
Lundi 26 avril 2010 à 14:10J'ai remarqué qu'avec Safari par exemple l'animation s'affiche rien qu'avec le "data" de renseigné, alors que ce n'est pas le cas pour Firefox et IE.
En fait la 2e fois est seulement pour IE (au moins jusqu'au 6, ensuite je ne sais pas). La première fois est pour les autres (même Firefox, ça suffit normalement).
Lundi 26 avril 2010 à 15:50Bonjour,
Vendredi 21 mai 2010 à 10:50Je veux ajouter une image dans la page html qui sera affichée sur la vidéo. Est-ce que ce là est faisable? Merci
Ajouter une image sur la vidéo? Si c'est une sorte d'image d'accueil au départ de la vidéo, c'est au lecteur en Flash de le gérer.
Dimanche 23 mai 2010 à 18:41Bonjour, merci pour le code cité tout au début car ça fonctionne pour moi par contre comment mettre les boutons stop/play/pause etc... car ma video joue en boucle? merci d'avance pour les réponses
Dimanche 25 juillet 2010 à 17:33Même chose: ça n'a rien à voir avec l'HTML, c'est votre animation Flash qui peut avoir des boutons et qui gère la vidéo.
Vendredi 6 août 2010 à 15:46Bonjour David,
J'ai mis ce code dans le HTML Wordpress :
Je souhaiterai mettre des photos qui tourne en boucle, ça serait possible? Mon FTP filezilla.
Merci d'avance
Mardi 31 août 2010 à 22:58J'ai juste repris david ce que tu as marqué en dessous de ça : Le bon code pour un Flash doit être ceci, à garder précieusement:
Mardi 31 août 2010 à 22:59Le code sert à insérer un module en Flash existant et que l'on héberge avec le site. Ce n'est pas si simple. Il faut donc d'abord trouver un diaporama photos en Flash et le configurer.
Samedi 4 septembre 2010 à 22:03Merci David je vais essayer,
Mardi 7 septembre 2010 à 15:23si dans 3 jours je n'y arrive tj pas, est-ce que tu pourrais me donner un lien d'un diaporama que je pourrai configurer?
Je connais MonoSlideshow mais il en existe d'autre.
Dimanche 12 septembre 2010 à 19:05Bonjour David.
Vendredi 22 octobre 2010 à 11:58Merci pour cet article intéressant.
Une question cependant : comment indiquer un contenu alternatif (lien et/ou image) quand Flash n'est pas détecté ?
Il faut mettre ça avant la fin de la balise object. On peut mettre une image, un texte, un lien...
Jeudi 28 octobre 2010 à 12:51Par exemple:
Vous devez avoir le lecteur Flash pour voir cette animation.‹/object›
Bonjour,
Je tente désespérément d'insérer cette galerie en Flash/XML (à noter que le code qu'ils fournissent avec SWFObject ne fonctionne pas sur IE8 mais marche sous MF). Je viens d'essayer votre méthode, mais sans succès j'en ai bien peur :s (que ce soit MF ou IE). Quelqu'un aurait une idée ?
Jeudi 28 octobre 2010 à 14:06Il doit manquer des paramètres. Quand on regarde le code généré par leur script (avec Firefox, code source de la sélection) on voit ceci: (j'ai remplacé les débuts/fins de balises par des guillemets ‹›)
‹object data="/data/live-demo/liveDemo.swf" type="application/x-shockwave-flash" height="891" width="600"›‹param value="noscale" name="scale" /›‹param value="tl" name="salign" /›‹param value="transparent" name="wmode" /›‹param value="true" name="allowFullScreen" /›‹param value="folderPath=/data/items/components/3d-stack/swfs/live-demo/" name="flashvars"/›‹object›
Donc il ne faut pas oublier les paramètres. Peut-être vaut-il mieux s'en tenir à leur doc.
Il doit bien y avoir moyen de le faire marcher partout (en plus n'oubliez pas les autres navigateurs!).
Samedi 6 novembre 2010 à 22:36Alors moi ça fait 2 mois que je rame et je n'arrive plus à faire afficher les .swf dans IE8.
Mardi 1 février 2011 à 22:56Tout marche bien sur Chrome mais écran blanc sur IE8.
Si quelqu'un a une solution, je suis preneur. Après des dizaines de code différents, actuellement j'ai le code suivant : <OBJECT data="Defil_marcheurs.swf" width=400 height=325 type=application/x-shockwave-flash></OBJECT>
Merci !!!!!
Mardi 5 juillet 2011 à 17:01Personnellement j'ai réussis pour mon site avec la balise object depuis quelques temps...donc je suis encore étonnée de vois certains utiliser la balise embed sachant qu'on m'avait dit comme certains l'ont écrit qu'il valait mieux pour les normes ne pas l'utiliser.
par contre quelqu'un aurait-il une solution de code pour certaines fois où l'on a pas le fichier swf mais juste une url ?
en effet j'aimerais afficher en bannière un fichier que j'ai sous url seulement (mais qui est déjà hébergé)
merci d'avance
Jeudi 21 juillet 2011 à 17:12bon été à tous !
Une URL contenant une page HTML? Alors il suffit de changer le type en type="text/html" (et d'enlever le param bien sûr).
Jeudi 21 juillet 2011 à 19:55euhhhhh merci mais pour valider voir si j'ai bien expliqué,
je voudrais afficher ici :
http://www.comboutique.com/shop/homeboutique-21722.html
en bannière,
ce fichier là : http://toutiweb.free.fr/presentation-mascotte/presentation-mascotte.html
que j'ai uniquement sur mon site pour l'instant en page html sans avoir le fichier .swf (à cause de ce fichu logiciel qui me fait un fichier .swf vide si je n'héberge pas tout...hors sur ma boutique je ne peux pas héberger..)
merci d'avance !
Jeudi 21 juillet 2011 à 20:40Enfin un code simple et efficace !!!
Merci à toi !
Dimanche 6 novembre 2011 à 11:57merci pour vos conseils je suis un apprenant du site web et je pense qu'avec votre expérience je pourrais mieux m'en sortir.merci encore une fois d'avance...
Dimanche 18 décembre 2011 à 14:25Merci beaucoup pour vos codes vidéos. Félicitations pour la recherche.
Jeudi 23 août 2012 à 22:18Merci beaucoup pour cette info précieuse !
Mardi 12 février 2013 à 20:58Mon code était compliqué, et la plupart des lignes servait à rien !
Merci !
En ce qui concerne le référencement de son site quand on a du flash dedans. Tu peux nous donner des conseils stp ? Par exemple, j'ai lu il y a plusieurs jours de cela qu'on pouvait donner aux moteurs de recherche des indications, car je pense qu'ils ne peuvent pas lirent le flash et savoir ce qu'il y a dans telle ou telle application en flash.
Jeudi 4 avril 2013 à 10:52Oui, juste avant de refermer la balise ‹/object›, on peut rajouter des choses: une image alternative et/ou un texte.
C'est expliqué dans la spécification HTML du W3C.
Jeudi 4 avril 2013 à 11:34Bonjour a tous, j'ai parcouru le forum et j'aimerais savoir David si l'object est efficace avec FF et chrome en meme temps. Et au cas ou on ajoute un flashvars? Merci.
Vendredi 26 avril 2013 à 21:48Bien sûr.
Samedi 27 avril 2013 à 11:50