[JS]Flashを埋め込む際の便利なJavascript「SWFObject」｜jQueryプラグイン・ライブラリ｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」

[JS]Flashを埋め込む際の便利なJavascript「SWFObject」

スポンサード

サイトにSWFファイル（Flash）を埋め込む際の便利なJavascriptが「SWFObject」です。

設置が簡単な点はもちろんですが、Flash に対応していない環境（iPad とか iPhone とか）向けに、画像やテキストで代替表示できる点も、未だにSWFObject が手放せない要因です。

SWFObject のダウンロード

以下のページより swfobject.js のファイルをダウンロードします。

SWFObject

SWFObject の設置

ダウンロードした swfobject.js ファイルを<head> 内に設置します。

<script type="text/javascript" src="./swfobject.js"></script>

Flashファイルの読み込み

Flashファイル（SWF）を埋め込む場所を以下のように記述します。

<div id="content">
ここに、Flashが見れないiPad や iPhone 用に画像やテキストを置きます。
</div>
<script type="text/javascript">
   var so = new SWFObject("./flashmovie.swf", "mymovie", "700", "200", "8", "#ffffff");
   so.write("content"); 
</script>

SWFObject のカスタマイズ

Flashファイルのパスやサイズなどを指定していきます。

var so = new SWFObject(
    "Flashファイルのパス",
    "embedの任意のID",
    "Flashファイルの横幅（px）",
    "Flashファイルの高さ（px）",
    "Flashのバージョン",
    "背景色"
);
so.write(
    "Flashを表示させるエリア（要素）"
);

上記方法で動かない場合

上記方法でうまく動かない場合は、以下のようにHTMLに埋め込むなんてこともできます。

<head>
<script type="text/javascript" src="./_swfobject.js"></script>
</head>
<body>

<div>	
<object id="myId" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="700" height="200">
<param name="movie" value="./flashmovie.swf" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="./flashmovie.swf" width="700" height="200">
<!--<![endif]-->
<div>
<p>ここに、Flashが見れないiPad や iPhone 用に画像やテキストを置きます。</p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>

</body>

スポンサード