web-dev-qa-db-de.com

Wie kann man eine SWF-Datei in eine HTML-Seite einbetten?

Wie binden Sie eine SWF-Datei in eine HTML-Seite ein?

172
BigOmega

Die beste Methode zum Einbetten einer SWF-Datei in eine HTML-Seite ist die Verwendung von SWFObject .

Es handelt sich um eine einfache Open-Source-JavaScript-Bibliothek, die eine benutzerfreundliche und standardmäßige 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, das dazu verwendet werden kann, ist das SWFObject HTML und JavaScript generator . Im Wesentlichen werden HTML und JavaScript generiert, die Sie zum Einbetten von Flash mit SWFObject benötigen. Kommt mit einer sehr einfachen Benutzeroberfläche für die Eingabe Ihrer Parameter.

Es ist sehr zu empfehlen und sehr einfach zu bedienen.

170
Ronnie Liew
<object width="100" height="100">
    <param name="movie" value="file.swf">
    <embed src="file.swf" width="100" height="100">
    </embed>
</object>
122
Ólafur Waage

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 hinzugefügt werden/können, abhängig von .swf selbst. Keine Einbettung , nur Objekt und Parameter innerhalb, also bleibt es gültig, funktioniert und ist überall einsetzbar, egal was! :)

12
Spooky

Wie wäre es mit einem einfachen HTML5-Tag-Embed?

<!DOCTYPE html>
<html>
<body>

<embed src="anim.swf">

</body>
</html>
12
Jan Desta
<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>
7
Spooky

Wenn Sie eine dieser js-Bibliotheken zum Einfügen von Flash verwenden, empfiehlt es sich, ein einfaches object-embed-Tag in <noscript/> hinzuzufügen.

7
Brian Kim

Das 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">
2

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

2

Wie gesagt, SWF Object ist großartig. UFO lohnt auch einen Blick

2
phatduckk

Was ist der "beste" Weg? Wörter wie "am effizientesten", "schnellstes Rendern" usw. sind spezifischer. Wie auch immer, ich biete eine alternative Antwort an, die mir meistens hilft (ob das 'Beste' ist oder nicht, ist irrelevant).

Alternative Antwort: Verwenden Sie einen iframe.

Hosten Sie 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 in Ihrer index.html oder wo auch immer den obigen Speicherort mit Ihrem iframe, und der Inhalt wird überall dort angezeigt, wo Sie Ihren iframe ablegen. Wenn Sie einen iframe dort ablegen können, können Sie eine SWF-Datei dort ablegen. Passen Sie die iframe-Dimensionen an Ihre SWF-Datei an. Im folgenden Beispiel ist die SWF-Datei 500 x 500 groß.

Pseudo-Code:

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

Die HTML-Codezeile wird Ihre SWF-Datei einbetten. Kein anderes Durcheinander erforderlich . Vorteile: W3C-konform, freundliches Design, kein Geschwindigkeitsproblem, minimalistischer Ansatz. 
Nachteile: Leerraum um Ihre SWF-Datei, wenn Sie in einem Browser gestartet werden.

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

1
Syed

Ich weiß, das ist eine alte Frage. 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>
1
Isuru Dilshan

Sie können JavaScript verwenden, wenn Sie so 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.

0
Allan

Dies funktioniert auf 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>
0
densider

Das hat für mich 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>
0
gtb