DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> SWFObject:JS代碼嵌入Flash媒體資源
SWFObject:JS代碼嵌入Flash媒體資源
編輯:關於JavaScript     

網頁制作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>

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved