• RSS
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

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

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

SWFObject のダウンロード

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


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>



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください