Comment intégrer un fichier SWF dans une page HTML?


Réponses:


174

La meilleure approche pour intégrer un SWF dans une page HTML consiste à utiliser SWFObject .

Il s'agit d'une bibliothèque JavaScript open-source simple qui est une méthode facile à utiliser et respectueuse des normes pour intégrer du contenu Flash.

Il offre également la détection de version de Flash Player. Si l'utilisateur ne possède pas la version de Flash requise ou si JavaScript est désactivé, il verra un autre contenu. Vous pouvez également utiliser cette bibliothèque pour déclencher une mise à niveau de Flash Player. Une fois que l'utilisateur a mis à niveau, il sera redirigé vers la page.

Un exemple tiré de la documentation:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <title>SWFObject dynamic embed - step 3</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <script type="text/javascript" src="swfobject.js"></script>

    <script type="text/javascript">
        swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0");
    </script>

  </head>
  <body>
    <div id="myContent">
      <p>Alternative content</p>
    </div>
  </body>
</html>

Un bon outil à utiliser avec c'est le SWFObject HTML et JavaScript générateur . Il génère essentiellement le HTML et le JavaScript dont vous avez besoin pour intégrer le Flash à l'aide de SWFObject. Livré avec une interface utilisateur très simple pour vous permettre de saisir vos paramètres.

Il est fortement recommandé et très simple à utiliser.


11
SWFObject est bon. Cela fonctionne simplement. Une idée encore plus merveilleuse consiste à utiliser un réseau de diffusion de contenu pour obtenir le javascript. J'utilise ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js
Ardee Aram

J'ai eu des problèmes avec l'utilisation de la balise object directement avec IE9 mais cela fonctionne parfaitement avec swfobject.
AndyMcKenna

Merci pour votre réponse. Vous pouvez maintenant suggérer un lecteur pour accéder à la capacité de lecture avec un exemple de travail en html lui-même. ????
Sumit Ramteke

Cela peut-il fonctionner sur ce système où Flash Player n'est pas installé ou prend en charge tous les navigateurs.
Mohammed Javed

Le projet est maintenant déplacé vers GitHub: github.com/swfobject/swfobject et la nouvelle technique pour incorporer un objet swf estvar el = document.getElementById("my-target-element"); swfobject.embedSWF("myContent.swf", el, 300, 120, 10);
Chanceux

127
<object width="100" height="100">
    <param name="movie" value="file.swf">
    <embed src="file.swf" width="100" height="100">
    </embed>
</object>

1
Ce code n'est pas valide XHTML ... <embed> ne doit pas être dans une balise d'objet.
Anheledir

59
Aucune spécification de l'utilisateur pour être XHTML valide, il a demandé HTML
Ólafur Waage

3
cet article a une bonne explication sur l'incorporation de flash et de XHTML valide. yoast.com/articles/valid-flash-embedding
Joko Wandiro

3
pourquoi ne pas utiliser l' dataattribut dans l' élément <object> ? Citation tirée de la documentation w3c html5: au moins l'un des attributs data ou type doit être présent.
vladkras

@JokoWandiro le lien que vous avez fourni a malheureusement disparu. Voici une version archivée: web.archive.org/web/20180602024700/https://yoast.com/…
Hermann.Gruber

17

Que diriez-vous de l'intégration de balises HTML5 simples?

<!DOCTYPE html>
<html>
<body>

<embed src="anim.swf">

</body>
</html>

13

Cela convient à une application à partir de l'environnement racine.

<object type="application/x-shockwave-flash" data="/dir/application.swf" 
id="applicationID" style="margin:0 10px;width:auto;height:auto;">

<param name="movie" value="/dir/application.swf" />
<param name="wmode" value="transparent" /> <!-- Or opaque, etc. -->

<!-- ↓ Required paramter or not, depends on application -->
<param name="FlashVars" value="" />

<param name="quality" value="high" />
<param name="menu" value="false" />

</object>

Des paramètres supplémentaires devraient être / peuvent être ajoutés qui dépendent de .swf lui-même. Pas d'intégration , juste un objet et des paramètres à l'intérieur, donc, il reste valide, fonctionnel et utilisable partout, peu importe lequel! DOCTYPE est tout. :)


8
<object type="application/x-shockwave-flash" data="http://www.youtube.com/v/VhtIydTmOVU&amp;hl=en&amp;fs=1&amp;color1=0xe1600f&amp;color2=0xfebd01" 
style="width:640px;height:480px;margin:10px 36px;">

<param name="movie" value="http://www.youtube.com/v/VhtIydTmOVU&amp;hl=en&amp;fs=1&amp;color1=0xe1600f&amp;color2=0xfebd01" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="wmode" value="opaque" />
<param name="quality" value="high" />
<param name="menu" value="false" />

</object>

2
Notez que les paramètres objet> données et film> valeur sont les mêmes. Ce code devrait fonctionner pour toute vidéo gratuite à regarder et à partager - YouTube.
Spooky

3
De manière générale, il est souhaitable que les réponses expliquent le code qu'elles donnent, plutôt que de simplement laisser tomber le code sur le demandeur. L'objectif est de connaître les problèmes et de les prévenir à l'avenir plutôt que de les faire disparaître.
KRyan

7

Si vous utilisez l'une de ces bibliothèques js pour insérer Flash, je suggère d'ajouter une balise incorporée d'objet simple à l'intérieur de <noscript/>.


2

J'utilise http://wiltgen.net/objecty/ , cela aide à intégrer du contenu multimédia et à éviter le problème du «clic pour activer» d'IE.


Le problème «cliquer pour activer» est appelé «activation eolas» mais est supprimé dans les versions réelles de l'IE.
Anheledir


2

Celui-ci fonctionnera, j'en suis sûr!

<embed src="application.swf" quality="high" pluginspage="http://www.macromedia.com/go/getfashplayer" type="application/x-shockwave-flash" width="690" height="430">

1

Quel est le meilleur moyen? Des mots comme «le plus efficace», «le rendu le plus rapide», etc. sont plus spécifiques. Quoi qu'il en soit, je propose une réponse alternative qui m'aide la plupart du temps (que ce soit ou non «meilleur» n'a pas d'importance).

Autre réponse: utilisez une iframe.

Autrement dit, hébergez le fichier SWF sur le serveur. Si vous placez le fichier SWF dans le dossier racine ou public_html, le fichier SWF se trouvera dans www.YourDomain.com/YourFlashFile.swf.

Ensuite, sur votre index.html ou ailleurs, liez l'emplacement ci-dessus à votre iframe et il sera affiché autour de votre contenu où que vous mettiez votre iframe. Si vous pouvez y mettre une iframe, vous pouvez y placer un fichier SWF. Faites en sorte que les dimensions iframe soient identiques à celles de votre fichier SWF. Dans l'exemple ci-dessous, le fichier SWF est de 500 par 500.

Pseudo code:

<iframe src="//www.YourDomain.com/YourFlashFile.swf" width="500" height="500"></iframe>

La ligne de code HTML ci-dessus incorporera votre fichier SWF. Aucun autre désordre nécessaire. Avantages: Conforme au W3C, conception de page conviviale, pas de problème de vitesse, approche minimaliste.
Inconvénients: espace blanc autour de votre fichier SWF lorsqu'il est lancé dans un navigateur.

C'est une autre réponse. Que ce soit la «meilleure» réponse dépend de votre projet.


3
pour google @Stoic désolé votre erreur, il devrait //www...utiliser //signifie que si vous êtes sur HTTPS ou HTTP, cela fonctionne avec le même type de connexion
Barkermn01

1

Je sais que c'est une vieille question. Mais cette réponse sera bonne pour le moment.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>histo2</title>
        <style type="text/css" media="screen">
        html, body { height:100%; background-color: #ffff99;}
        body { margin:0; padding:0; overflow:hidden; }
        #flashContent { width:100%; height:100%; }
        </style>
    </head>
    <body>
        <div id="flashContent">
            <object type="application/x-shockwave-flash" data="histo2.swf" width="822" height="550" id="histo2" style="float: none; vertical-align:middle">
                <param name="movie" value="histo2.swf" />
                <param name="quality" value="high" />
                <param name="bgcolor" value="#ffff99" />
                <param name="play" value="true" />
                <param name="loop" value="true" />
                <param name="wmode" value="window" />
                <param name="scale" value="showall" />
                <param name="menu" value="true" />
                <param name="devicefont" value="false" />
                <param name="salign" value="" />
                <param name="allowScriptAccess" value="sameDomain" />
                <a href="http://www.adobe.com/go/getflash">
                    <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
                </a>
            </object>
        </div>
    </body>
</html>

1

Thi fonctionne sur IE, Edge, Firefox, Safari et Chrome.

<object type="application/x-shockwave-flash" data="movie.swf" width="720" height="480">
            <param name="movie" value="movie.swf" />
            <param name="quality" value="high" />
            <param name="bgcolor" value="#000000" />
            <param name="play" value="true" />
            <param name="loop" value="true" />
            <param name="wmode" value="window" />
            <param name="scale" value="showall" />
            <param name="menu" value="true" />
            <param name="devicefont" value="false" />
            <param name="salign" value="" />
            <param name="allowScriptAccess" value="sameDomain" />
            <a href="http://www.adobe.com/go/getflash">
                <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
            </a>
        </object>

0

Cela a fonctionné pour moi:

    <a target="_blank" href="{{ entity.link }}">
        <object type="application/x-shockwave-flash" data="{{ entity.file.path }}?clickTAG={{ entity.link }}" width="120" height="600" style="visibility: visible;">
            <param name="quality" value="high">
            <param name="play" value="true">
            <param name="LOOP" value="false">
            <param name="wmode" value="transparent">
            <param name="allowScriptAccess" value="true">
        </object>
    </a>

0

Utilisez l' <embed>élément:

<embed src="file.swf" width="854" height="480"></embed>

-1

Vous pouvez utiliser JavaScript si vous êtes familier avec, comme ça:

swfobject.embedSWF("filename.swf", "Title", "width", "height", "9.0.0");

--la 9.0.0 est la version flash.

Ou vous pouvez utiliser la <object>balise HTML5.


-1 swfobject ne fait pas seulement partie de JavaScript, vous ne pouvez pas simplement l'appeler sans incorporer la bibliothèque. et la plupart des fonctionnalités de la balise <object> ont été supprimées de HTML 4 à 5. Il peut toujours être utilisé, mais pas recommandé. Dans l'ensemble, une très mauvaise réponse.
rorypicko

avez-vous déjà essayé avant de dire que c'est une très mauvaise réponse? gardez à l'esprit que la très mauvaise réponse est la réponse qui ne fonctionne pas totalement ou qui ne fonctionne pas totalement.
Allan

le fait que vous informiez quelqu'un d'utiliser javascript, puis que vous
colliez du

J'ai déjà mentionné l'utilisation de Javascript et donné le script. Si j'ai donné tout le code / script de travail qui fait un spoonfeeding. Le script est bien, ce n'est qu'une logique.
Allan

Vous ne comprenez pas mon commentaire. Vous ne lui avez pas dit d'inclure le fichier Javascript
SWFObject
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.