mardi 29 Juil 2008

Le bon code HTML pour insérer du Flash

HTMLIl 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é:

  1. je copie-colle le passage type="application/x-shockwave-flash" src="adresse" de <embed> vers <object> et je remplace src par data
  2. je supprime toute la balise <embed>
  3. 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! :-p

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.


café Cet article vous a aidé? 
Offrez-moi un café!
Agrégateur informatique

56 réponses à “Le bon code HTML pour insérer du Flash”

  1. 1
    No_Stress a dit:

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

  2. 2
    David (azur-dev.kizone.net) a dit:

    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.

  3. 3
    No_Stress a dit:

    La 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,

  4. 4
    No_Stress a dit:

    Correction*
    ... est remplacée par la balise .

  5. 5
    No_Stress a dit:

    grr par la balise "object"
    dsl des posts pour rien :x

  6. 6
    Grucho a dit:

    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!

  7. 7
    David (azur-dev.kizone.net) a dit:

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

  8. Rétrolien de Flash avec du HTML valide dans TinyMCE et Wordpress - Azur Dev
  9. 8
    Pierre (skins-party.winnerforum.net) a dit:

    Merci beaucoup !

  10. 9
    Gwen a dit:

    merci super !

  11. 10
    Adil a dit:

    Pour insérer du flash dans une page je préfère utiliser le script swfobject : http://blog.deconcept.com/swfobject/
    Merci.

  12. 11
    David (azur-dev.kizone.net) a dit:

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

  13. 12
    VanVan (BlagueSMS.fr) a dit:

    Bonjour,
    je 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é.

  14. 13
    David (azur-dev.kizone.net) a dit:

    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.
    On 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. :-)

  15. 14
    Lj a dit:

    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)

  16. 15
    David (azur-dev.kizone.net) a dit:

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

  17. 16
    Alex a dit:

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

  18. 17
    David (azur-dev.kizone.net) a dit:

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

  19. 18
    romain a dit:

    Tout à 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:

  20. 19
    NoFear (forum-addict.fr) a dit:

    Hello 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 ;)

  21. 20
    NoFear (forum-addict.fr) a dit:

    Désolé du double post !

  22. 21
    David (azur-dev.kizone.net) a dit:

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

  23. 22
    Petit Chat a dit:

    Merci, ça faisait un moment que je ne parvenais pas à faire fonctionner des flash dans IE8.
    Excellent article.

  24. 23
    Avyaso (createurindustriel.com) a dit:

    En tt k, il y a peut-être des erreurs, MAIS QUEL PLAISIR DE ENFIN TROUVER LE BON CODDDDEEEEE!!!!! :) :) :)

  25. 24
    la_musicos (lemerleblanc.fr) a dit:

    Bonjour,

    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! :)
    Merci beaucoup à celui ou celle qui pourra m'éclairer!

  26. 25
    David (azur-dev.kizone.net) a dit:

    J'ai regardé ton site, il faut data="filmpagedaccueil.swf".

  27. 26
    Bruno a dit:

    Super tout çà !
    Comment peut-on ajouter un lien vers une page php ?
    J'essaye, mais çà marche pas...

  28. 27
    David (azur-dev.kizone.net) a dit:

    Oui, on peut ajouter un lien qui entoure le Flash. En cliquant sur le Flash, on devrait changer de page.

  29. 28
    Luis a dit:

    Bonjour, 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" ?
    J'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.

  30. 29
    David (azur-dev.kizone.net) a dit:

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

  31. 30
    Bra a dit:

    Bonjour,
    Je veux ajouter une image dans la page html qui sera affichée sur la vidéo. Est-ce que ce là est faisable? Merci

  32. 31
    David (azur-dev.kizone.net) a dit:

    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.

  33. 32
    Emmanuelle a dit:

    Bonjour, 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

  34. 33
    David (azur-dev.kizone.net) a dit:

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

  35. 34
    Ivan (ivanmadonia.com) a dit:

    Bonjour 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

  36. 35
    Ivan (ivanmadonia.com) a dit:

    J'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:

  37. 36
    David (azur-dev.kizone.net) a dit:

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

  38. 37
    Ivan (ivanmadonia.com) a dit:

    Merci David je vais essayer,
    si 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?

  39. 38
    David (azur-dev.kizone.net) a dit:

    Je connais MonoSlideshow mais il en existe d'autre.

  40. 39
    Jérôme (jeromephilbert.net) a dit:

    Bonjour David.
    Merci pour cet article intéressant.
    Une question cependant : comment indiquer un contenu alternatif (lien et/ou image) quand Flash n'est pas détecté ?

  41. 40
    David (azur-dev.kizone.net) a dit:

    Il faut mettre ça avant la fin de la balise object. On peut mettre une image, un texte, un lien...
    Par exemple:
    Vous devez avoir le lecteur Flash pour voir cette animation.‹/object›

  42. 41
    Nyx a dit:

    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 ?

  43. 42
    David (azur-dev.kizone.net) a dit:

    Il 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!).

  44. 43
    Abeille (lamonteetsue.fr) a dit:

    Alors moi ça fait 2 mois que je rame et je n'arrive plus à faire afficher les .swf dans IE8.
    Tout 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>

  45. 44
    dom denis a dit:

    Merci !!!!!

  46. 45
    ToutiWeb (toutiweb.free.fr) a dit:

    Personnellement 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
    bon été à tous !

  47. 46
    David (azur-dev.kizone.net) a dit:

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

  48. 47
    ToutiWeb (toutiweb.free.fr) a dit:

    euhhhhh 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 !

  49. 48
    deeper (web-micro.fr) a dit:

    Enfin un code simple et efficace !!!

    Merci à toi !

  50. 49
    fournier a dit:

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

  51. 50
    Evala a dit:

    Merci beaucoup pour vos codes vidéos. Félicitations pour la recherche.

  52. 51
    Pauline (adresse-inconnue.fr) a dit:

    Merci beaucoup pour cette info précieuse !
    Mon code était compliqué, et la plupart des lignes servait à rien ! :)
    Merci !

  53. 52
    Thibo (popstickers.fr) a dit:

    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.

  54. 53
    David (azur-dev.kizone.net) a dit:

    Oui, 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. ;-)

  55. 54
    didi a dit:

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

  56. 55
    David (azur-dev.kizone.net) a dit:

    Bien sûr.

Laisser un commentaire

Azur Dev