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


175

SWFファイルをHTMLページに埋め込むにはどうすればよいですか?

回答:


174

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

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

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

ドキュメントの例:

<!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 ジェネレーターです。基本的に、SWFObjectを使用してFlashを埋め込むために必要なHTMLとJavaScriptを生成します。パラメータを入力するための非常にシンプルなUIが付属しています。

これは非常に推奨されており、使用方法は非常に簡単です。


11
SWFObjectは良いです。それは単に機能します。さらにすばらしいアイデアは、コンテンツ配信ネットワークを使用してJavaScriptを取得することです。私はGoogleのajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js
Ardee Aram

IE9で直接オブジェクトタグを使用することに問題がありましたが、swfobjectで完全に動作します。
AndyMcKenna 2012

ご回答有難うございます。次に、HTML自体の実際の例とともに、再生機能にアクセスするためのプレーヤーも提案できます。????
Sumit Ramteke 2013

これは、Flash Playerがインストールされていない、またはすべてのブラウザーをサポートしているシステムで機能しますか?
Mohammed Javed

プロジェクトはGitHub:github.com/swfobject/swfobjectに移動されました。swfオブジェクトを埋め込むための新しい手法はvar 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>

1
そのコードはXHTMLに対応していません... <embed>はオブジェクトタグ内にあってはなりません
Anheledir 2008年

59
有効なXHTMLするユーザーのない仕様で、彼はHTMLを求めない
オラフルWaage

3
この記事では、フラッシュと有効なXHTMLの埋め込みについて説明しています。yoast.com/articles/valid-flash-embedding
Joko Wandiro 2013年

3
<object>要素でdata属性を使用しないのはなぜですか?w3c html5ドキュメントからの引用:データ属性またはタイプ属性のいずれかが少なくとも1つ存在している必要あります。
vladkras 2014年

@JokoWandiroあなたが提供したリンクは残念ながらなくなっています。ここでアーカイブされたバージョンです:web.archive.org/web/20180602024700/https://yoast.com/...
Hermann.Gruber

17

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

<!DOCTYPE html>
<html>
<body>

<embed src="anim.swf">

</body>
</html>

13

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

<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自体に依存する追加のパラメーターを追加する必要があります。埋め込みありません。オブジェクトとパラメータのみが含まれているため、有効であり、機能し、どこでも使用できます。どの!DOCTYPEが重要であるかは関係ありません。:)


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
object> dataおよびmovie> valueパラメータは同じであることに注意してください。このコードは、無料で見たり共有したりできる-youtubeビデオで機能します。
不気味な

3
一般的に言って、回答者がコードをドロップするだけでなく、回答者が与えるコードを説明することが望ましいです。目標は、問題を消滅させるのではなく、問題について学び、将来的に防止することです。
KRyan 2012年

7

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





1

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

代替回答: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ファイルの周囲の空白。

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


3
グーグル@Stoic申し訳ありませんが、あなたの間違ったことはしなければならない//www...使用して//の手段を、もしあなたにHTTPSまたはHTTP、それは同じ接続タイプ使用して動作します
Barkermn01

1

私はこれが古い質問であることを知っています。しかし、この答えは今のところ良いでしょう。

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

これは私のために働きました:

    <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

<embed>要素を使用します。

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

-1

使い慣れている場合は、次のようにJavaScriptを使用できます。

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

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

または<object>、HTML5 のタグを使用できます。


-1 swfobjectはJavaScriptの一部ではなく、ライブラリを埋め込まずに呼び出すことはできません。また、<object>タグのほとんどの機能はHTML 4から5から削除されています。これは引き続き使用できますが、お勧めできません。全体として非常に悪い答えです。
rorypicko 14

非常に悪い答えを言う前に、すでにそれを試しましたか?非常に悪い答えは、完全に機能しないか間違っている答えであることを覚えておいてください。
アラン

javascriptを使用するように誰かに通知していて、まだ言及していないjavascriptライブラリを使用してコードを貼り付けるという事実は、悪い答えです
rorypicko

私はすでにJavascriptの使用について言及し、スクリプトを提供しました。スプーンフィードを作成する作業コード/スクリプト全体を提供した場合。スクリプトはそれだけの論理で結構です。
アラン2014年

あなたは私のコメントを誤解しています。あなたはSWFObject Javascriptファイルを含めるように彼に言っていません
rorypicko '
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.