swfobject - 網頁輕鬆嵌入Flash

Flash在網頁上的應用已經越來越普遍了,未來一樣占有一席之位,但是從以前到現在,對於發佈Flash到網頁上常常碰到一些不必要的問題,例如XP SP2更新後,IE瀏覽器上方會出現檔掉的訊息,或是Flash外框出現虛線,需要滑鼠點一下才能開始動作等...,而且使用者並未安裝Flash Player的情況下或版本太低都會無法順利的瀏覽。
最近剛好看到一個不錯的東西,就是這次要介紹的swfobject,一般我們要嵌入swf到HTML時,通常會寫的語法如下:

<object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="300" height="120">
<param name="movie" value="test.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />
</object>

上面的程式碼使用到<object>標籤,早一點的甚至還要再寫<embed>才能動作,因為IE跟其他瀏覽器的種種原因,使得這種寫法不但又臭又長,也不符合標準。
那使用swfobject有什麼好處呢?我們繼續看下去吧。
首先我們得先去swfobject的網頁http://code.google.com/p/swfobject/,然後下載目前的最新版本swfobject_2_2.zip





下載解壓縮後可以看到以下檔案:
 
swfobject
├ src (原始碼資料夾)
│  ├ expressInstall.as (flash player版本升級原始碼)
│  ├ expressInstall.fla (flash player版本升級原始碼)
│  └ swfobject.js (swfobject javascript)

expressInstall.swf (flash player版本升級程式)
index.html (HTML範例檔)
index_dynamic.html (HTML範例檔)
swfobject.js (swfobject javascript)
test.swf (測試用swf檔)

上面灰色的檔案是比較不重要的範例檔,我們只需要swfobject.js跟expressInstall.swf就可以了。
在這裡先解釋一下,expressInstall.swf是用來幫助使用者升級flash player用的swf檔,如果你發佈了一個版本為10的swf到網頁,而使用者的瀏覽器版本只到9或更低,網頁就會自動載入expressInstall.swf協助使用者升級player的版本。

下面我們開始使用swfobject,先建立一個資料夾,暫時命名為MySwfobject,然後在資料夾裡在建立一個js資料夾,我們把swfobject.js複製到js資料夾內,然後將expressInstall.swf複製到MySwfobject資料夾內,再來我們需要一個測試用的flash,就把剛剛下載的test.swf一樣複製到MySwfobject資料夾內,最後建立一個空白的HTML檔index.html,程式碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MySwfobject</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
</body>
</html>

這時我們的目錄應該如下的結構:
MySwfobject
├ js
│ └swfobject.js

├ expressInstall.swf
├ index.html
└ test.swf

我們開始把test.swf嵌入到index.html,先在<head>標籤內導入swfobject.js:

<script src="js/swfobject.js" type="text/javascript"></script>
然後在底下加上這幾行javascript:
<script type="text/javascript">
swfobject.embedSWF("test.swf", "mySwfobjectDiv", "300", "120", "9.0.0", "expressInstall.swf");
</script>

最後在<body>內加入id="mySwfobjectDiv"的<div>標籤:

<div id="mySwfobjectDiv"></div>

這時候用你的瀏覽器開啟index.html就會發現test.swf成功被嵌入了。


大家可以發現程式碼非常的簡短,而且不需要一堆<object><embed>標籤,只需要一個<div>就可以輕鬆嵌入Flash,其中的核心就是swfobject.embedSWF("test.swf", "mySwfobjectDiv", "300", "120", "9.0.0", "expressInstall.swf");這行,這裡我們介紹一下swfobject.embedSWF的幾個參數:
 
swfobject.embedSWF(swfUrl, id, width, height, version, expressInstallSwfurl, flashvars, params, attributes, callbackFn)


swfUrl 要嵌入的swf檔的位置 (例如在這裡我們是test.swf)
id 要嵌入在哪的HTML標籤id (在這裡我們是嵌入在<div id="mySwfobjectDiv">)
width Flash的寬
height Flash的高
version Flash Player的版本 (可直接輸入整數 ex:9 or 10)
expressInstallSwfurl
expressInstall.swf的位置
flashvars 要傳給Flash的變數
params Flash的參數 ex:menu,wmode,quality等...
attributes Flash本身的一些屬性 ex:id,name...
callbackFn 要callback給javascript的function
最後這裡附上加了flashvars,paramsattributes的index.html程式碼:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MySwfobject</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script src="js/swfobject.js" type="text/javascript"></script>
<script type="text/javascript">
var flashvars = {
};
var params = {
menu: "false"
};
var attributes = {
id:"MySwfobject"
};
swfobject.embedSWF("test.swf", "mySwfobjectDiv", "300", "120", "9.0.0", "expressInstall.swf", flashvars, params, attributes);
</script>
</head>
<body>
<div id="mySwfobjectDiv">
<a href="http://www.adobe.com/go/getflashplayer">請安裝Flash Player</a>
</div>
</body>
</html>

我們新增了關閉player menu的參數給swfobject,然後將id命名為MySwfobject,並且在mySwfobjectDiv的div標籤內加入一個Flash Plyer的安裝連結,如果使用者的瀏覽器沒有安裝Flash Player,swfobject就不會將test.swf嵌入到mySwfobjectDiv,而是直接顯示這行連結通知使用者安裝。
更多進階的使用文件可以參考swfobject的documentation
範例程式:
參考資料:

這個網誌中的熱門文章

DevOps:持續整合&持續交付(Docker、CircleCI、AWS)

Factory pattern 工廠模式

如何使用 Docker 切換不同的 MongoDB