SWFObject2

1.什麼是SWFObject2?

SWFObject2:

提供兩種優化的嵌入Flash Player的方法:一種基於標籤的方法和一種依賴於Javascript的方法。

提供一套Javascript API,目的是提供一套完整的工具來嵌入SWF文件和獲得Flash Player的相關信息。

只利用一個很小的Javascript文件(size:10Kb,GZIPed:3.9Kb)。

是SWFObject1.5、UFO和Adobe Flash Player Detection Kit的繼承者。

準備整合所有已存的Flash Player嵌入方法,並且嵌入Adobe Flash Player內容提供一個新的標準。

2. 爲什麼應該使用SWFObject2?

SWFObject2:

比任何其他的Flash Player嵌入方法更完善更靈活。

爲每個人提供一種解決方案:無論你是一個HTML、Flash或者Javascript開發者,你都能從中發現適合你的東西。

打破了使用瀏覽器專有標籤的惡性循環,促進了web標準和替換內容(指Flash內容無法正常顯示時需要顯示的內容,使用替換內容通常是因爲Flash插件沒有安裝或者Flash插件版本過低)的使用。

採用分離式的Javascript和最合理的Javascript實踐。

容易使用

3. 爲什麼SWFObject2使用JavaScript?

SWFObject主要使用Javascript來解決一些僅靠標籤無法解決的問題;它“

通過探測Flash Player的版本,來決定顯示Flash內容還是替換內容,避免了過時的Flash插件影響Flash內容的正常顯示。

提供了恢復到替換內容的功能:當Flash內容因爲過時的Flash Player而無法正常顯示時,SWFObject通過DOM操作用替換內容代替Flash內容。(注意:如果Flash Player沒有安裝,HTML Object元素會自動被替換內容所替代。)

提供了一個選擇來使用Adobe Express Install下載最新版本的Flash Player。

通過使用專有的embed元素的辦法,解決老版的Webkit引擎會忽略嵌套在object元素中的param元素問題。

提供了一個詳盡的Javascript API來完成一些常見的與Flash Player和Flash內容相關的操作。

4. 靜態還是動態?

SWFObject提供了兩種不同的方法來嵌入Flash內容:

靜態發表方法用符合標準的標籤來嵌入Flash內容和替換內容。並且用Javascript來解決一些僅僅靠標籤無法解決的問題。

動態發表方法基於用標準標籤插入替換內容,如果瀏覽器安裝了最低版本要求的Flash插件並且擁有足夠的Javascript支持,SWFObject會用Javascript將替換內同換成Flash內容。(和以前版本的SWFObject和UFO很相似)

靜態發表方法優勢在於:

促進對符合標準標籤的創作

插入Flash內容的機制不再依賴腳本語言,所以你的Flash內容有更多”聽衆“

如果你的安裝了Flash插件,但是javascript禁用了或者瀏覽器並不支持javascript,你仍然能看到你的Flash內容

Flash能夠在那些對javascript支持較弱的設備上運行,例如sony psp

像RSS閱讀器這樣的自動化的工具能偶讀取Flash內容

動態發表方法優勢在於:

避免了通過點擊激活的機制來激活Flash內容

它能很好的與基於腳本的應用整合


5. 怎麼用SWFObject2的靜態發表方法來嵌入Flash內容?

1). 使用符合標準的標籤同事嵌入Flash內容和替換內容。

SWFObject的基本標籤使用了嵌套object標籤的方法(帶有專用於Internet Explorer的條件註釋)http://www.alistapart.com/articles/flashembedcagematch/ 來保證僅通過標籤實現最優化的跨瀏覽器支持,同時使其符合標準,並且支持替換內容 http://www.bobbyvandersluis.com/flashembed/testsuite/ :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <title>SWFObject - step 1</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  </head>
  <body>
    <div>

      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="780" height="420">
        <param name="movie" value="myContent.swf" />
        <!--[if !IE]>-->
        <object type="application/x-shockwave-flash" data="myContent.swf" width="780" height="420">
        <!--<![endif]-->
          <p>Alternative content</p>
        <!--[if !IE]>-->
        </object>
        <!--<![endif]-->
      </object>

    </div>
  </body>
</html>

注意:嵌套object標籤要求兩次定義object標籤(外層object爲Internet Explorer定義,內層object爲其他瀏覽器定義),所以你也需要兩次定義你的object屬性和嵌套的param元素。

必須的屬性:

classid(只需外層object元素定義,值總是等於clsid:D27CDB6E-AE6D-11cf-96B8-444553540000

type(只需內層object元素定義,值總是等於"application/x-shockwave-flash")

width(內外層object都需要定義,指定這個SWF的寬)

height(內外層object都需要定義,指定這個SWF的高)

必須的param元素:

movie(只需爲外層object元素定義,指定SWF文件的URL)

注意:我們建議不適用codebase屬性來指向Adobe服務器上的Flash插件安裝地址,因爲它違背了只將訪問限制在當前文檔域的規範。我們推薦使用帶有精巧提示信息的替換內容,這樣用戶將獲得更好的Flash插件下載體驗。


怎麼使用HTML來配置你的Flash內容?

你可以爲Object元素添加下面這些常用的可選屬性http://www.w3schools.com/tags/tag_object.asp

id

name

class

align

你可以使用下面這些專用於Flash的可選param元素http://kb2.adobe.com/cps/127/tn_12701.html:

play

loop

menu

quality

scale

salign

wmode

bgcolor

base

swliveconnect

flashvars

devicefont

allowscriptaccess http://kb2.adobe.com/cps/164/tn_16494.html

seamlesstabbing 

allowfullscreen

allownetworking

爲什麼應該使用替換內容?

object元素允許你將替換內容嵌套其中,如果Flash插件沒有安裝或者不支持那麼這些替換內容就會被顯示出來,由於這些替換內容能被搜索引擎很好的識別,這使它成爲一個創建對搜索引擎友好的網頁內容的好工具。總之,當你想創建一個能讓不使用插件的用戶也可以訪問的網頁內容,創建一個對搜索引擎友好的網頁內容,或者告訴他們能通過下載Flash插件獲得更好的用戶體驗,你就應該使用替換內容。

2). 在HTML的head標籤中包括SWFObject的Javascript類庫

SWFObject的Javascript類庫由一個外部Javascript文件組成。SWFObject會在外部Javascript文件被加載後立即被執行,並且對於那些支持DomLoad事件的瀏覽器,例如IE、FireFox、Safari和opera 9+,SWFObject將會在DOM被加載完成後完成所有的DOM操作,而瀏覽器不支持DomLoad事件,所有DOM操作將會在頁面的load事件被觸發執行。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <title>SWFObject - step 2</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

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

  </head>
  <body>
    <div>
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="780" height="420">
        <param name="movie" value="myContent.swf" />
        <!--[if !IE]>-->
        <object type="application/x-shockwave-flash" data="myContent.swf" width="780" height="420">
        <!--<![endif]-->
          <p>Alternative content</p>
        <!--[if !IE]>-->
        </object>
        <!--<![endif]-->
      </object>
    </div>
  </body>
</html>

3). 用SWFObject類庫註冊你的Flash內容並告訴SWFObject怎麼樣處理這些內容

首先爲Flash內容的外層object標籤添加一個獨特的id屬性,然後添加swfobjcet.registerObject方法:

第一個參數(string,必須的)指定object標籤中使用的id

第二個參數(string,必須的)指定你發佈的Flash內容對應的Flash Player版本,它將激活Flash 版本監測,用來決定是顯示Flash內容還是通過一些DOM操作來顯示替換內容。表示Flash版本的數字通常由四部分組成。

第三個參數(string,可選的)可以用來激活Adobe express install,並指定express install swf文件的URL,Express install將會在所需要的Flash Player版本不可用的時候,顯示一個標準的Flash插件下載對話框,用來替代你的Flash內容。一個默認的expressInstall.swf文件被一起打包到項目中,項目中也包含了expressInstall.fla和其他AS源文件。你可以用它們創建自定義歌express install體驗,express install只會被觸發一次,只在win和mac平臺上Flash Player6.065或更高版本所支持。

第四個參數(javascript函數,可選的)可以用定義當嵌套一個SWF文件成功或失敗的回調函數。http://code.google.com/p/swfobject/wiki/api

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <title>SWFObject - step 3</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <script type="text/javascript" src="swfobject.js"></script>

    <script type="text/javascript">
    swfobject.registerObject("myId", "9.0.115", "expressInstall.swf");
    </script>

  </head>
  <body>
    <div>

      <object id="myId" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="780" height="420">

        <param name="movie" value="myContent.swf" />
        <!--[if !IE]>-->
        <object type="application/x-shockwave-flash" data="myContent.swf" width="780" height="420">
        <!--<![endif]-->
          <p>Alternative content</p>
        <!--[if !IE]>-->
        </object>
        <!--<![endif]-->
      </object>
    </div>
  </body>
</html>

6. 怎麼用SWFObject2的動態發表方法來嵌入Flash內容?

1). 用符合標準的標籤來創建替換內容

SWF的動態嵌入方法遵循漸進增強的原則,當瀏覽器對javascript和Flash插件有足夠的支持的時候,SWFObject會用Flash內容替換HTML內容。首先定義你的替換內容,並且爲它添加一個id屬性:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <title>SWFObject dynamic embed - step 1</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  </head>
  <body>
    
    <div id="myContent">
      <p>Alternative content</p>
    </div>
    
  </body>
</html>

2). 在HTML頁面的head變遷標籤中包括SWFObject的Javascript類庫

同靜態發表方法。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <title>SWFObject dynamic embed - step 2</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  
    <script type="text/javascript" src="swfobject.js"></script>

  </head>
  <body>
    <div id="myContent">
      <p>Alternative content</p>
    </div>
  </body>
</html>

3). 用Javascript嵌入你的swf

swfobject.embedSWF(swfUrl, id, width, height, version, expressInstallSwfurl, flashvars, params, attributes, callbackFn)有5個必須參數,四個可選參數:

swfUrl(String,必須的)指定SWF的URL

id(String,必須的)指定將會被Flash內容替換的HTML元素的id

width(sting,必須的)寬

height(Sting,必須的)高

version(String,必須的)指定你發佈的SWF對應的Flash Player版本

expressInstallSwfurl(String,可選的)指定express install SWF的URL並激活Adobe express install

flashvars(String,可選的)用name:value對指定

params(String,可選的)用name:value對指定

attributes(String,可選的)用name:value指定

注意:在不破壞參數順序的情況下,你可以忽略可選參數。如果你不想使用一個可選參數,但是會使用後面的一個可選參數,你可以簡單的傳入false作爲參數的值。對於flashvas,params,attributes這些javascript對象來說,你可以相應傳入一個空對象{}。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <title>SWFObject dynamic embed - step 3</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <script type="text/javascript" src="swfobject.js"></script>
    
    <script type="text/javascript">
    swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0");
    </script>

  </head>
  <body>
    <div id="myContent">
      <p>Alternative content</p>
    </div>
  </body>
</html>

怎樣配置Flash內容?

你可以爲你的ojbect元素添加下面這些常用的可選屬性

id

name

styleclass

align

play

loop

menu

quality

scale

salign

wmode

bgcolor

base

swliveconnect

flashvars

devicefont

allowscriptaccess

allowfullsreen

allownetworking

怎麼用Javascript對象來定義你的flashvars, params attributes?

你最好用對象的字面量來定義Javascript對象,例如:

<script type="text/javascript">

var flashvars = {};
var params = {};
var attributes = {};

swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf", flashvars, params, attributes);

</script>

你可以在定義對象的時候添加你的name:value對(注意:確保不要在對象中的最後一個name;value對後面加上逗號):

<script type="text/javascript">

var flashvars = {
  name1: "hello",
  name2: "world",
  name3: "foobar"
};
var params = {
  menu: "false"
};
var attributes = {
  id: "myDynamicContent",
  name: "myDynamicContent"
};

swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf", flashvars, params, attributes);

</script>

或者在對象創建之後用點號添加屬性和值:

<script type="text/javascript">

var flashvars = {};
flashvars.name1 = "hello";
flashvars.name2 = "world";
flashvars.name3 = "foobar";

var params = {};
params.menu = "false";

var attributes = {};
attributes.id = "myDynamicContent";
attributes.name = "myDynamicContent";

swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf", flashvars, params, attributes);

</script>

也可以寫成:

<script type="text/javascript">

swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf", {name1:"hello",name2:"world",name3:"foobar"}, {menu:"false"}, {id:"myDynamicContent",name:"myDynamicContent"});

</script>

如果你不想使用一個參數,你可以將它定義爲false或者一個空對象。

<script type="text/javascript">

var flashvars = false;
var params = {};
var attributes = {
  id: "myDynamicContent",
  name: "myDynamicContent"
};

swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf", flashvars, params, attributes);

</script>

7. 從SWFObject1.5遷移到SWFObject2的注意事項

SWFObject2不向後兼容SWFObject1.5

現在更傾向於在HTML頁面的head標籤中插入所有的腳本文件

現在的類庫使用的是小寫

現在只能通過類庫(的類)來訪問方法(即靜態方法),而不是從SWFObject1.5中那樣通過實例來訪問。

API跟以前完全不同了

如果瀏覽器對Javascript和Flash有足夠的支持,SWFObject2將會將整個替換內容,包括引用的HTML容器元素,替換爲Flash內容,而不是像SWFObject1.5那樣,只把被引用容器裏面的內容替換爲Flash內容,你可以這樣轉移你的CSS規則:爲你的Flash內容定義與替換內容的容器元素相同的id(前者將替換後者,所以你的id不會重複)。


8. 從UFO遷移到SWFObject2的注意事項

如果瀏覽器對Javascript和Flash有足夠的支持,SWFObject2將會將整個替換內容,包括引用的HTML容器元素,替換爲Flash內容,而不是像UFO那樣,只把被引用容器裏面的內容替換爲Flash內容,你可以這樣轉移你的CSS規則:爲你的Flash內容定義與替換內容的容器元素相同的id(前者將替換後者,所以你的id不會重複)。

UFO的setcontainercss特性沒有合併到SWFObject2中。

9. SWFObject支持MIME類型applicaiton/xhtml+xml嗎?

出於設計上的考慮,SWFObject不支持MIME類型。

不提供支持的理由很多:

只有很少一部分web開發者使用它

我們不確定那是否是今後發展的方向。Internet Explorer並不支持它,而其它主流的瀏覽器將它們的目標定在了一種新的HTML解析標準,而這將偏離目前W3C所提倡的將HTML解析爲XML。

考慮到節省文件大小,以及時間、精力



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章