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.








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...