Flash媒體版本檢測與嵌入JavaScript框架 - SWFObject簡介

碼頭工人 14年前發布 | 12K 次閱讀

原文：SWFObject: Javascript Flash Player detection and embed script
翻譯：Awflasher.com
漢化地址：http://www.awflasher.com/flash/articles/swfobj.htm - 更新到SWFObject 1.5官方文檔(Updated to 1.5 @ 070318)

SWFObject是一個用于在HTML中方面插入Adobe Flash媒體資源（*.swf文件）的獨立、敏捷的JavaScript模塊。該模塊中的JavaScript腳本能夠自動檢測PC、Mac機器上各種主流瀏覽器對Flash插件的支持情況。它使得插入Flash媒體資源盡量簡捷、安全。而且它是非常符合搜索引擎優化的原則的。此外，它能夠避免您的HTML、XHTML中出現object、embed等非標準標簽，從而符合更加標準。
（即：通過text/html應答頁面，而非application/xhtml+xml）

請注意: 由于法律原因，FlashObject已經更名為SWFObject，詳見這里</A>。

內容導讀

新功能

實現原理

SWFObject范例

在SWFObject中應用ExpressInstall

下載

獨特優勢

常見問題

新功能

詳細的更新記錄可以在SWFObject 1.5 blog post這里找到。

實現原理

[對于急切需要下載的用戶點擊這里直接觀看JS代碼]

SWFObject的使用是非常簡單的，只需要包含 swfobject.js這個js文件，然后在DOM中插入一些簡單的JS代碼，就能嵌入Flash媒體資源了。下面是一個最簡單的范例：

<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></CODE></PRE>
讓我們看看這些代碼是如何工作的
<div id="flashcontent">[...]</div>

首先，我們要為SWF資源預留一個HTML結點。這個HTML結點內的所有內容都會在客戶端被Flash資源替換，當客戶端沒有安裝Flash播放器的時候，這些內容會顯示出來。這一特色在SEO以及對用戶體驗方面非常有必要。
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需要的版本號，它可以詳細到 '主版本號.小版本號.細節'，例如："6.0.65"。一般地，我們只需傳入主版本即可，例如："6"。

background-color - Flash資源的背景色，16進制格式
</UL>
此外，還有如下可選參數:


quality - 畫面質量，默認為"high"。

xiRedirectUrl - 詳見ExpressInstall相關

redirectUrl - 沒有安裝相應版本的播放器后自動跳轉的目標地址

detectKey - 這是當忽略檢測時，SWFObject將去url地址中查找的變量，默認值為“detectflash”，后續有詳細介紹
</UL>so.write("flashcontent");

將Flash資源應用到DOM里，在瀏覽器顯示出來。

細節

SWFObject 的靈活性非常好。您完全可以事先寫好HTML的其他部分，最后再回過頭來添加Flash內容。這樣可以確保在客戶端沒有Flash的情況下，用戶不會一無所獲；也可以確保針對搜索引擎，做了什么樣的關鍵詞優化。您完全不用像以前那樣擔心客戶端的各種狀況

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+，各種瀏覽器的后續版本也會繼續支持

SWFObject檢測Flash播放器版本從3開始到最新的版本號，而且也消滅了IE中“激活”的麻煩。這里有相關背景。

SWFObject可以方便地檢查版本細節，例如我們需要v.6.0 r65 (or 6,0,65,0) 來處理SWF資源，就可以添加如下代碼:
var so = new SWFObject("movie.swf", "mymovie", "200", "100", "6.0.65", "#336699");

SWFObject的版本檢測可以人工忽略。如果在特定環境下您不希望SWFObject檢測版本號，那么只需要傳遞一個參數在HTML頁面中，就可以了。SWFObject可以捕獲這個參數并且跳過檢測，直接寫入Flash嵌入代碼到DOM中。用于忽略版本檢測的變量名是“detectflash”，以下是一個例子：
<a href="mypage.html?detectflash=false">Bypass link</a>

SWFObject 范例

以上我們接觸到的范例都最基礎的，接下來我們列舉一些其他功能，尤其是傳入參數、變量這些使用頻率較高的行為。

傳入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支持的內聯參數列表：full list of the current parameters and their possible values（adobe.com官方資源）

采用"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內部進行通信。這里是一個采用SWFObject的應用程序，其中用到了location.hash對象：鏈接地址

在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>

<DIV class=note>
下載

SWFObject基于MIT License，您可以免費任意使用。

下載 SWFObject 1.5 - Zip 文件, 包含 swfobject.js 和其他范例。

更多鏈接：


標準Flash嵌入 - 符合XHTML 1.0 Strict.*

全屏Flash嵌入 - 符合XHTML 1.0 Strict.*

含Express Install的標準Flash嵌入 - 從6.0.65起的FlashPlayer才支持此功能
</UL>
* 頁面全部是 text/html格式，不是 application/xhtml+xml.

更多問題可以訪問我們的論壇：SWFObject論壇!
</DIV>
獨特優勢

多年以來，各種各樣的Flash播放器版本檢測代碼層出不窮，包括嵌入腳本也有許多。我們在這一部分針對流行的幾種方法進行一個比較。

1) Adobe官方做法

這就是經典的Object標簽和Embed標簽配合做法，也是目前最常用的做法： 
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" 
   codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" 
   width="550" height="400" id="Untitled-1" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="mymovie.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src="mymovie.swf" quality="high" bgcolor="#ffffff" width="550" 
   height="400" name="mymovie" align="middle" allowScriptAccess="sameDomain" 
   type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" />
</object>

雖然是目前最常用的方法，但仍然有一些問題。


缺乏播放器版本檢測 沒有播放器插件版本檢測，用戶會獲得非常糟糕的體驗，他們會在不知情的情況下看到ActiveX插件安裝入口，這樣會導致大部分用戶離開。而且，用低版本播放器播放高版本的swf文件，會導致更多潛在問題，而用戶會將一切問題歸咎于您的產品

Eolas專利糾紛導致IE的近期發行版中需要進行一次“激活”點擊才可以完成和Flash內容的交互。詳細內容

不符合XHTML規范 - 在HTML和XHTML中都沒有embed標簽HTML or XHTML。因為object標簽在不同瀏覽器中的詭異表現，我們不得不用embed標簽來完善最終效果。
</UL>
2) 僅采用Object標簽 / Flash satay

這種方法在2002年的A List Apart article出現之后開始大面積流行，這里有兩個例子：

'僅含Object標簽'
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
   codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"
   width="300" height="120">
 <param name="movie" value="http://www.macromedia.com/shockwave/download/triggerpages_mmcom/flash.swf"> 
 <param name="quality" value="high">
 <param name="bgcolor" value="#FFFFFF">
 <!--[if !IE]> <-->
 <object data="http://www.macromedia.com/shockwave/download/triggerpages_mmcom/flash.swf"
         width="300" height="120" type="application/x-shockwave-flash">
  <param name="quality" value="high">
  <param name="bgcolor" value="#FFFFFF">
  <param name="pluginurl" value="http://www.adobe.com/go/getflashplayer">
  FAIL (the browser should render some flash content, not this).
 </object>
 <!--> <![endif]-->
</object>

Flash satay
<object type="application/x-shockwave-flash
data="c.swf?path=movie.swf" 
width="400" height="300">
<param name="movie" 
value="c.swf?path=movie.swf" />
<img src="noflash.gif" 
width="200" height="100" alt="" />
</object>


可用性問題 - 采用 Flash Satay 的話， 一些屏幕閱讀器會忽略swf內容.

Eolas專利糾紛導致IE的近期發行版中需要進行一次“激活”點擊才可以完成和Flash內容的交互。詳細內容

缺乏播放器版本檢測 沒有播放器插件版本檢測，用戶會獲得非常糟糕的體驗，他們會在不知情的情況下看到ActiveX插件安裝入口，這樣會導致大部分用戶離開。而且，用低版本播放器播放高版本的swf文件，會導致更多潛在問題，而用戶會將一切問題歸咎于您的產品

早期的的Safari會忽略param標簽 - 在這些版本：2.0 (Tiger) 或者 1.3 (Panther) 或者可能 1.2.8 (前Panther) 之前，Safari 完全忽略param 標簽。這將會讓你的Flashvars等參數無法傳入。
</UL>
3) 'small flash movie on the index page' 檢測方法

這個方法會通過在首頁放一個swf文件去訪問$version 變量來返回版本信息。

問題在于：


內頁無檢測 - 內頁如果不放著這個swf就無法檢測

“激活”問題

不符合HTML或者XHTML規范

影響搜索引擎索引排名
</UL>
4) Adobe官方 Flash Player Detection 模塊

Adobe官方這個模塊非常不錯，然而仍然有一些不足，它采用兩種方法來檢測


Flash自身檢測，如上面提到的"small Flash movie on the index page" - 缺點已經提過了

Javascript - 混亂的代碼讓你的HTML變得非常難以維護
</OL>
深入討論在這里。

5) 用純粹的JS來檢測、嵌入

這種方法看起來不錯，但是仍然缺乏規范，而且消耗開發成本


檢測不夠完善 - 通常只能檢測到當前的Flash播放器發行版，而且升級也需要手工參與

增加了 更多 代碼 - 難以維護的DOM結構

解決方案太笨重 - SWFObject進行了多次優化，非常輕量
</UL>
常見問題

這里進入論壇可以與其他用戶交流

<DIV class=faq>

問. 到底什么是 'IE的激活內容升級' 我聽說過這件事情，SWFObject能應對它么？

答. 可以，更多詳細信息可以看：這里。
</DL>

問. 在Flash資源加載前，相關區域的內容會有閃爍(僅IE有)

答. 這與 FOUC bug有關。
</DL>

問. 用 SWFObject 嵌入多個SWF該怎么做?

答. 只要給每一個HTML結點唯一的id就可以了。
</DL>

問. 如何使SWFObject兼容Netscape 4.x?

答. 這條評論包含相關信息。
</DL>

問. 我如何在blog中使用SWFObject?

答. 這里有針對WordPress的插件： 這里。
</DL>

問. SWFObject 是否可以與 Dreamweaver 、 Golive協同工作?

答. 這里可以得到一個Dreamweaver 擴展在CommunityMX。目前還沒有GoLive擴展。
</DL>

問. 哪里可以找到其他語言的翻譯?

答. 法語 ,瑞典語, 意大利語, 德語, 西班牙語, 波蘭語(部分), 日語, 葡萄牙語,和 芬蘭語。
</DL>

問. 有支持FlashIDE的發布插件么？

答. 有！你可以在這里得到： Fluid Flash Blog。
</DL>

問. 誰在使用SWFObject/FlashObject?

答. 這些網站： The Library of Congress, Adobe.com (制定的輕量版本), Amazon.com, Windows.com, 油Tube.com, skype.com, Snapple.com, 包括 Adobe Photoshop (在Flash畫廊中的) 和大量其他的網站. Colin Moock 也 推薦這種解決方案。
</DL></DIV>
仍然有疑問? 這里有我之前的一些文章[1, 2, 3] 這些日志，以及評論含有許多豐富的解決思路。

致謝

Toby Boudreaux給了我大量的建議，讓我的代碼更加快捷可靠。
</DIV>
轉自：http://www.awflasher.com/flash/articles/swfobj.htm


                    
                         本文由用戶 碼頭工人 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
                         轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
                         本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！
                         本文地址：http://www.baiduhome.net/blog/5035946681926074259.html

新功能

實現原理

細節

SWFObject 范例

傳入Flash內聯參數的簡單范例

采用"Flashvars"參數傳入變量

在SWFObject中應用Express Install（利用官方自動升級接口）

下載

獨特優勢

1) Adobe官方做法

2) 僅采用Object標簽 / Flash satay

3) 'small flash movie on the index page' 檢測方法

4) Adobe官方 Flash Player Detection 模塊

5) 用純粹的JS來檢測、嵌入

常見問題

致謝

Flash媒體版本檢測與嵌入JavaScript框架 - SWFObject簡介

博客分類

目錄

推薦閱讀

Flash媒體版本檢測與嵌入JavaScript框架 - SWFObject簡介

AJAX技術簡介與DWR框架應用入門

百度的Javascript框架Tangram

10個最好的開源JavaScript框架