Wie binde ich eine SWF-Datei in eine HTML-Seite ein?

175

Wie bettet man eine SWF-Datei in eine HTML-Seite ein?

html embed flash MetaGuru
quelle

Antworten:

174

Der beste Ansatz zum Einbetten einer SWF in eine HTML-Seite ist die Verwendung von SWFObject .

Es handelt sich um eine einfache Open-Source-JavaScript-Bibliothek, die eine benutzerfreundliche und standardfreundliche Methode zum Einbetten von Flash-Inhalten darstellt.

Es bietet auch eine Flash Player-Versionserkennung. Wenn der Benutzer nicht über die erforderliche Flash-Version verfügt oder JavaScript deaktiviert ist, wird ein alternativer Inhalt angezeigt. Sie können diese Bibliothek auch verwenden, um ein Flash Player-Upgrade auszulösen. Sobald der Benutzer ein Upgrade durchgeführt hat, wird er zurück zur Seite geleitet.

Ein Beispiel aus der Dokumentation:

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

Ein gutes Werkzeug dafür ist der SWFObject HTML- und JavaScript- Generator . Grundsätzlich werden HTML und JavaScript generiert, die Sie zum Einbetten des Flashs mit SWFObject benötigen. Kommt mit einer sehr einfachen Benutzeroberfläche, über die Sie Ihre Parameter eingeben können.

Es ist sehr zu empfehlen und sehr einfach zu bedienen.

Ronnie Liew
quelle
11
SWFObject ist gut. Es funktioniert einfach. Eine noch schönere Idee ist es, ein Content Delivery Network zu verwenden, um das Javascript zu erhalten. Ich benutze Googles ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js
Ardee Aram
Ich hatte Probleme mit der Verwendung des Objekt-Tags direkt mit IE9, aber es funktioniert perfekt mit swfobject.
AndyMcKenna
Danke für deine Antwort. Jetzt können Sie auch einen Player für den Zugriff auf die Wiedergabefunktion vorschlagen, zusammen mit einem Arbeitsbeispiel in HTML. ????
Sumit Ramteke
Kann dies auf dem System funktionieren, auf dem der Flash Player nicht installiert ist oder das alle Browser unterstützt?
Mohammed Javed
Das Projekt wird jetzt auf GitHub verschoben: github.com/swfobject/swfobject und die neue Technik zum Einbetten von SWF-Objekten istvar el = document.getElementById("my-target-element"); swfobject.embedSWF("myContent.swf", el, 300, 120, 10);
Lucky
127 
<object width="100" height="100">
    <param name="movie" value="file.swf">
    <embed src="file.swf" width="100" height="100">
    </embed>
</object>
Ólafur Waage
quelle
1
Dieser Code ist nicht XHTML-gültig ... <embed> darf sich nicht in einem Objekt-Tag befinden.
Anheledir
59
Keine Angabe des Benutzers, um XHTML gültig zu sein, er bat um HTML
Ólafur Waage
3
Dieser Artikel enthält eine gute Erklärung zum Einbetten von Flash und gültigem XHTML. yoast.com/articles/valid-flash-embedding
Joko Wandiro
3
Warum nicht das dataAttribut im <Objekt> -Element verwenden? Zitat aus w3c html5-Dokumenten: Mindestens eines der
Vladkras
@JokoWandiro Der von Ihnen bereitgestellte Link ist leider weg. Hier ist eine archivierte Version: web.archive.org/web/20180602024700/https://yoast.com/…
Hermann.Gruber
17

Wie wäre es mit einer einfachen HTML5-Tag-Einbettung?

<!DOCTYPE html>
<html>
<body>

<embed src="anim.swf">

</body>
</html>
Jan Desta
quelle
13

Dies ist für die Anwendung aus der Root-Umgebung geeignet. 

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

Zusätzliche Parameter sollten / können hinzugefügt werden, was von .swf selbst abhängt. Keine Einbettung , nur Objekt und Parameter darin, also bleibt es gültig, funktioniert und kann überall verwendet werden, egal um welche! DOCTYPE es geht. :) :)

Gruslig
quelle
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>
Gruslig
quelle
2
Beachten Sie, dass die Parameter Objekt> Daten und Film> Wert identisch sind. Dieser Code sollte für jedes kostenlose Youtube-Video zum Ansehen und Teilen funktionieren.
Spooky
3
Im Allgemeinen ist es wünschenswert, dass Antworten den von ihnen angegebenen Code erklären, anstatt nur Code auf den Fragesteller zu legen. Ziel ist es, Probleme kennenzulernen und zu verhindern, anstatt sie verschwinden zu lassen.
KRyan
7

Wenn Sie eine dieser js-Bibliotheken zum Einfügen von Flash verwenden, empfehle ich, ein einfaches Objekt-Einbettungs-Tag in hinzuzufügen <noscript/>.

Brian Kim
quelle
2

Ich verwende http://wiltgen.net/objecty/ . Es hilft, Medieninhalte einzubetten und das IE-Problem "Klicken zum Aktivieren" zu vermeiden.

Eduardo Campañó
quelle
Das Problem "Click to Activate" heißt "Eolas-Aktivierung", wird jedoch in aktuellen Versionen des IE entfernt.
Anheledir
2

Wie bereits erwähnt, ist SWF Object großartig. Auch UFO ist einen Blick wert

Phatduckk
quelle
2

Dieser wird funktionieren, da bin ich mir sicher!

<embed src="application.swf" quality="high" pluginspage="http://www.macromedia.com/go/getfashplayer" type="application/x-shockwave-flash" width="690" height="430">
Stefan Đorđević
quelle
1

Was ist der "beste" Weg? Wörter wie "am effizientesten", "am schnellsten rendern" usw. sind spezifischer. Wie auch immer, ich biete eine alternative Antwort an, die mir die meiste Zeit hilft (ob "am besten" ist oder nicht, ist irrelevant).

Alternative Antwort: Verwenden Sie einen Iframe.

Hosten Sie also die SWF-Datei auf dem Server. Wenn Sie die SWF-Datei im Ordner root oder public_html ablegen, befindet sich die SWF-Datei unter www.YourDomain.com/YourFlashFile.swf.

Verknüpfen Sie dann auf Ihrer index.html oder wo auch immer den oben genannten Speicherort mit Ihrem Iframe, und er wird überall dort um Ihren Inhalt angezeigt, wo Sie Ihren Iframe platzieren. Wenn Sie dort einen Iframe einfügen können, können Sie dort eine SWF-Datei einfügen. Passen Sie die Iframe-Abmessungen an Ihre SWF-Datei an. Im folgenden Beispiel ist die SWF-Datei 500 x 500.

Pseudocode:

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

Die obige HTML-Codezeile bettet Ihre SWF-Datei ein. Kein anderes Durcheinander nötig. Vorteile: W3C-konform, seitendesignfreundlich, kein Geschwindigkeitsproblem, minimalistischer Ansatz.
Nachteile: Leerraum um Ihre SWF-Datei beim Start in einem Browser.

Das ist eine alternative Antwort. Ob dies die beste Antwort ist, hängt von Ihrem Projekt ab.

Syed
quelle
3
für Google @Stoic leider Ihre falsch ist zu //www...verwenden , //bedeutet , dass , wenn Ihr auf HTTPS oder HTTP funktioniert es die gleiche Verbindungstyp
Barkermn01
1

Ich weiß, dass dies eine alte Frage ist. Aber diese Antwort wird für die Gegenwart gut sein.

<!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>
Isuru Dilshan
quelle
1

Dies funktioniert unter IE, Edge, Firefox, Safari und 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>
xxnull
quelle
0

Das hat bei mir funktioniert:

    <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>
gtb
quelle
0

Verwenden Sie das <embed>Element:

<embed src="file.swf" width="854" height="480"></embed>
aaron34weston
quelle
-1

Sie können JavaScript verwenden, wenn Sie damit vertraut sind:

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

- Die 9.0.0 ist die Flash-Version.

Oder Sie können das <object>Tag von HTML5 verwenden.

Allan
quelle
-1 swfobject ist nicht nur Teil von JavaScript, Sie können es auch nicht einfach aufrufen, ohne die Bibliothek einzubetten. Die meisten Funktionen für das <object> -Tag wurden von HTML 4 auf 5 entfernt. Sie können weiterhin verwendet, aber nicht empfohlen werden. Alles in allem eine sehr schlechte Antwort.
Rorypicko
Haben Sie es bereits versucht, bevor Sie sagten, es sei eine sehr schlechte Antwort? Denken Sie daran, dass diese sehr schlechte Antwort die Antwort ist, die nicht völlig funktioniert oder falsch ist.
Allan
Die Tatsache, dass Sie jemanden über die Verwendung von Javascript informieren und dann Code mit einer Javascript-Bibliothek einfügen, die Sie noch nicht einmal erwähnt haben, macht es zu einer schlechten Antwort
Rorypicko
Ich erwähnte bereits, Javascript zu verwenden und gab das Skript. Wenn ich den gesamten Arbeitscode / das gesamte Skript geben würde, der / das einen Löffel füttert. Das Skript ist in Ordnung, es ist nur eine Logik.
Allan
Du verstehst meinen Kommentar falsch. Sie haben ihm nicht gesagt, dass er die SWFObject Javascript-Datei
rorypicko