web-dev-qa-db-ja.com

SWFファイルをHTMLページに埋め込む方法

どのようにしてHTMLページにSWFファイルを埋め込むのですか?

173
MetaGuru

SWFをHTMLページに埋め込むための最善の方法は、 SWFObject を使用することです。

これは、Flashコンテンツを埋め込むための使いやすく標準に準拠した方法である、シンプルなオープンソースのJavaScriptライブラリです。

また、Flashプレーヤーのバージョン検出も提供しています。ユーザーがFlashのバージョンを必要としていないか、JavaScriptを無効にしている場合は、代替コンテンツが表示されます。このライブラリを使用してFlash Playerのアップグレードを開始することもできます。ユーザーがアップグレードすると、ページにリダイレクトされます。

ドキュメントからの例:

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

これと共に使用するのに適したツールは、SWFObject HTMLとJavaScript generator です。基本的にはSWFObjectを使ってFlashを埋め込むために必要なHTMLとJavaScriptを生成します。あなたがあなたのパラメータを入力するための非常にシンプルなUIが付属しています。

それは強く推奨されていると非常に使いやすいです。

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

単純なHTML5タグの埋め込みはどうですか?

<!DOCTYPE html>
<html>
<body>

<embed src="anim.swf">

</body>
</html>
13
Jan Desta

これはルート環境からのアプリケーションに適しています。

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

.swfそれ自身に依存する追加のパラメータを追加することができます。 埋め込みなし、ちょうどobjectとその中のパラメータなので、どこでも有効で機能し、使用可能であり、どちらを使用しても構いません。 :)

12
Spooky
<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>
8
Spooky

Flashを挿入するためにこれらのjsライブラリのいずれかを使用している場合は、<noscript/>の内側にプレーンなオブジェクト埋め込みタグを追加することをお勧めします。

7
Brian Kim

これでうまくいくでしょう、きっと!

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

私は http://wiltgen.net/objecty/ を使用します、それはメディアコンテンツを埋め込み、IE "クリックしてアクティブにする"問題を回避するのに役立ちます。

2

前述したように、SWFオブジェクトは素晴らしいです。 UFO も一見の価値があります

2
phatduckk

「最善」の方法は何ですか? 「最も効率的」、「最速のレンダリング」などの単語がより具体的です。とにかく、私はほとんどの場合私を助けてくれる代替の答えを提供しています(「最善」かどうかは無関係です)。

代替回答:iframeを使用してください。

つまり、サーバー上でSWFファイルをホストします。 SWFファイルをルートフォルダまたはpublic_htmlフォルダに配置すると、SWFファイルはwww.YourDomain.com/YourFlashFile.swfに配置されます。

次に、あなたのindex.htmlかどこでも、あなたのiframeに上記の場所をリンクすれば、あなたのiframeを置いたところはどこでもあなたのコンテンツの周りに表示されるでしょう。そこにiframeを入れることができれば、そこにSWFファイルを置くことができます。 iframeの寸法をSWFファイルと同じにします。次の例では、SWFファイルは500 x 500です。

擬似コード

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

上記のHTMLコードの行は、SWFファイルを埋め込みます。他の混乱は必要ありません。長所:W3C準拠、ページデザインにやさしい、スピードの問題がない、最小限のアプローチ。
短所:ブラウザで起動したときのSWFファイルの周囲の空白。

それは別の答えです。それが「最善」の答えであるかどうかは、プロジェクトによって異なります。

1
Syed

これは古い質問です。しかし、この答えは今のところ良いでしょう。

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

あなたが精通していれば、JavaScriptを使うことができます。

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

- 9.0.0はフラッシュバージョンです。

あるいは、HTML5の<object>タグを使うこともできます。

0
Allan

これは、IE、Edge、Firefox、Safari、および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

これは私のために働いた:

    <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