網頁制作poluoluo文章簡介:SWFObject的使用是非常簡單的,只需要包含 swfobject.js這個js文件,然後在DOM中插入一些簡單的JS代碼,就能嵌入Flash媒體資源了。
SWFObject的使用是非常簡單的,只需要包含 swfobject.js這個js文件,然後在DOM中插入一些簡單的JS代碼,就能嵌入Flash媒體資源了。
一、優點:
1、SWFObject 的靈活性非常好。完全可以事先寫好HTML的其他部分,最後再回過頭來添加Flash內容。這樣可以確保在客戶端沒有Flash的情況下,用戶不會一無所獲;也可以確保針對搜索引擎,做了什麼樣的關鍵詞優化。完全不用像以前那樣擔心客戶端的各種狀況;
2、SWFObject兼容當前各種主流浏覽器,如:PC上的IE5/5.5/6, Netscape 7/8,Firefox, Mozilla, and Opera。Mac上的IE5.2, Safari, Firefox, Netscape 6/7, Mozilla, and Opera 7.5+,各種浏覽器的後續版本也會繼續支持;
3、SWFObject檢測Flash播放器版本從3開始到最新的版本號,而且也消滅了IE中“激活”的麻煩;
4、SWFObject可以方便地檢查版本細節,例如我們需要v.6.0 r65 (or 6,0,65,0) 來處理SWF資源,就可以添加如下代碼:
var so = new SWFObject(”movie.swf”, “mymovie”, “200″, “100″, “6.0.65″, “#336699″);
5、SWFObject的版本檢測可以人工忽略。如果在特定環境下不希望SWFObject檢測版本號,那麼只需要傳遞一個參數在HTML頁面中,就可以了。SWFObject可以捕獲這個參數並且跳過檢測,直接寫入Flash嵌入代碼到DOM中。用於忽略版本檢測的變量名是“detectflash”,以下是一個例子:
<a href=”mypage.html?detectflash=false”>Bypass link</a>
二、使用說明:
<script type=”text/javascript” src=”swfobject.js”></script>
<div id=”flashcontent”>
This text is replaced by the Flash movie.
</div>
<script type=”text/javascript”>
var so = new SWFObject(”movie.swf”, “mymovie”, “200″, “100″, “7″, “#336699″);
so.write(”flashcontent”);
</script>
詳細說明:
⑴、“<div id=”flashcontent”>[...]</div>”:
為SWF資源預留一個HTML結點。這個HTML結點內的所有內容都會在客戶端被Flash資源替換,當客戶端沒有安裝Flash播放器的時候,這些內容會顯示出來。這一特色在SEO以及對用戶體驗方面非常有必要。
(2)、“var so = new SWFObject(swf, id, width, height, version, background-color [, quality, xiRedirectUrl, redirectUrl, detectKey])”:
創建一個新的SWFObject實例,並且傳入一下參數:
swf - SWF文件路徑;
id - 為這個SWF文件分配的id值,它將用於給embed與object標簽設定name屬性,以便於可以支持swliveconnect的功能,如動態傳入變量;
width - 寬度;
height - 高度;
version - FlashPlayer需要的版本號,它可以詳細到 ‘主版本號.小版本號.細節‘,例如:“9.0.28“。一般地,我們只需傳入主版本即可,例如:“9″。
background-color - Flash資源的背景色,16進制格式
此外,還有如下可選參數:
quality - 畫面質量,默認為“high”;
xiRedirectUrl - 如果的Flash影片在彈出窗口中,或者希望用戶在完成了ExpressInstall後重定向到其他地址,可以采用xiRedirectUrl屬性,來自動完成這一步驟。例如:
<script type=”text/javascript”>
var so = new SWFObject(”movie.swf”, “mymovie”, “200″, “100″, “8″, “#336699″);
so.useExpressInstall(’expressinstall.swf’);
so.setAttribute(’xiRedirectUrl’, ‘http://www.example.com/upgradefinished.html’); // must be the absolute URL to your site
so.write(”flashcontent”);
</script>
redirectUrl - 沒有安裝相應版本的播放器後自動跳轉的目標地址;
detectKey - 這是當忽略檢測時,SWFObject將去url地址中查找的變量,默認值為“detectflash”;
(3)、so.write(”flashcontent”):
將Flash資源應用到DOM裡,在浏覽器顯示出來;
三、范例:
1、傳入Flash內聯參數的簡單范例
<script type=”text/javascript”>
var so = new SWFObject(”movie.swf”, “mymovie”, “200″, “100%”, “7″, “#336699″);
so.addParam(”quality”, “low”);
so.addParam(”wmode”, “transparent”);
so.addParam(”salign”, “t”);
so.write(”flashcontent”);
</script>
這裡可以看到Flash支持的內聯參數列表:http://kb2.adobe.com/cps/127/tn_12701.html(adobe.com官方資源)
2、采用“Flashvars”參數傳入變量
用Flashvars是在預加載Flash時傳入數據的最佳做法,語法格式與GET變量串非常類似,如:variable1=value1&variable2=value2&variable3=value3SWFObject幫助您將這項工作變得更加明確化
<script type=”text/javascript”>
var so = new SWFObject(”movie.swf”, “mymovie”, “200″, “100″, “7″, “#336699″);
so.addVariable(”variable1″, “value1″);
so.addVariable(”variable2″, “value2″);
so.addVariable(”variable3″, “value3″);
so.write(”flashcontent”);
</script>
這些變量將會保存在root這個MovieClip對象裡。
SWFObject還可以方便地直接從URL中接受參數傳入Flash中,例如你有這樣一個URL:http://www.example.com/page.html?variable1=value1&variable2=value2。采用getQueryParamValue()方法你就可以輕松獲取這些參數,並將它們傳入Flash,例如:
<script type=”text/javascript”>
var so = new SWFObject(”movie.swf”, “mymovie”, “200″, “100″, “7″, “#336699″);
so.addVariable(”variable1″, getQueryParamValue(”variable1″));
so.addVariable(”variable2″, getQueryParamValue(”variable2″));
so.write(”flashcontent”);
</script>
getQueryParamValue()方法同樣可以獲取JavaScript的Location對象的hash值“location.hash”來與swf內部進行通信。
3、在SWFObject中應用Express Install(利用官方自動升級接口)
SWFObject全面支持AdobeFlash播放器的自動升級功能(從6.0.65起的FlashPlayer支持在swf內部自動升級!),這樣用戶完全不用離開網頁就能完成播放器的升級了。
首先,上傳官方的expressinstall.swf到服務器上,然後使用useExpressInstall方法指定這個swf文件的地址就可以了,例如:
<script type=”text/javascript”>
var so = new SWFObject(”movie.swf”, “mymovie”, “200″, “100″, “8″, “#336699″);
so.useExpressInstall(’expressinstall.swf’);
so.write(”flashcontent”);
</script>
可以安裝一個低版本的Flash播放器然後測試效果;
在SWFObject原文件壓縮包中可以找到具體的使用細節,可以自己定制ExpressInstall的流程。
如果Flash影片在彈出窗口中,或者希望用戶在完成了ExpressInstall後重定向到其他地址,可以采用xiRedirectUrl屬性,來自動完成這一步驟。例如:
<script type=”text/javascript”>
var so = new SWFObject(”movie.swf”, “mymovie”, “200″, “100″, “8″, “#336699″);
so.useExpressInstall(’expressinstall.swf’);
so.setAttribute(’xiRedirectUrl’, ‘http://www.example.com/upgradefinished.html’); // must be the absolute URL to your site
so.write(”flashcontent”);
</script>