在WEB標準中嵌入Flash 的最佳方法

來源:互聯網
上載者:User

一、傳統的方法。


<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromed...,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.macromedia.com/... />
</object>


這方法是使用 object 和 embed 標籤來嵌入,細心的會發現,object 的很多參數和 embed 裡面的很多屬性是重複的,為什麼這樣做?為了瀏覽器安全色性,有的瀏覽器支援 object,有的支援 embed,這也是為什麼要修改 Flash 的參數時兩個地方都要改的原因。這種方法是 Macromedia 一直以來的官方方法,最大限度的保證了 Flash 的功能,沒有相容性問題。但是它現在不那麼好用了:

無法通過驗證,由於為了相容性而嵌入的 embed 標籤是不符合 W3C的規範的。當然,如果你不在乎什麼規範不規範,另當別論。

微軟由於種種原因,在 sp2 後限制了 IE 的 ActiveX 的使用模式,就是在頁面中的 ActiveX 有一個虛框,需要使用者點擊一次才能正常互動。Flash是作為一個 ActiveX 嵌入到網頁中的,所以它也會受牽連,只有通過 JS 嵌入 Flash 才能解決這個問題。

沒有 Flash 版本檢測,如果版本瀏覽器的flash外掛程式版本不夠,或者不能正常顯示你的 swf 檔案,或者會彈出一個 ActiveX 的確認安裝的框——這個框對很多使用者來說是很恐怖的。

二、只用 object 的方法,這種方法的名字叫做 Flash satay,最早是2002年由 Drew McLellan 發表在 A List Apart 上,後來又經過了幾次完善:


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


這方法沒 embed 了,可以通過驗證,是標準的嵌入 Flash 的方法,瀏覽器安全色性也不錯,看起來幾乎完美,不過還是有問題的:

需要一個 holder swf 來載入你的目標 swf 以保證 IE 中的 stream 能力,如果你需要通過 flashvars 來傳參,或者和頁面的 JS 互動,會很麻煩。

同上面第二點,ActiveX的虛框問題。

繼續同上沒有版本檢測

還是有少數使用者代理程式(比如一些版本的 safari 和一些螢幕助讀程式)不認這種方式,有 bug。

三、用JS嵌入的方法。
用JS嵌入就是各有各的嵌入方法了,有嵌得好的有嵌得不好的。有人用 document.write 直接寫,這法子說實話不大好,感覺 hack 成分多了,有點為了驗證而驗證的意思,而且沒有體現出什麼 JS 的優勢。我覺得一個好的 JS 嵌入指令碼,在保證 Flash 應有功能的基礎上,要發揮 JS 的優勢應該要有版本檢測,要能很好解決可訪問性問題(也就是使用者在無法瀏覽 Flash 內容或禁用 JS 的時候應該如何處理的問題),要易於重複使用。

我 SWFObject 用的比較多,就挑它來說一些這種方法的優點:

IE中沒有討厭的虛框問題了。

提供了完善的版本檢測功能,如果版本不夠則顯示其他東西,比片或文字。

便於使用,只要在頁面頭載入一個 .js 檔案,然後 HTML 寫一個容器,裡面放普通的文本或圖片(用於無法顯示 Flash 時顯示),最後用指令碼來替換這個元素裡面的內容為 Flash。

可以通過驗證——當然這個不是重點,只是順帶效果罷了。

四、結論。
現階段用 JS 嵌入 Flash 是最完美的方法,雖然這法子這也是由於瀏覽器的種種問題而作出的妥協。
但它在保證 Flash 功能的前提下還利用 JS 提供了額外的好處,再者又已經有人寫了很完善的嵌入指令碼可以方面地下載使用(推薦 SWFObject),我們還有什麼理由不用它呢?

SWFObject 那網頁是英文的,這裡寫個簡單的用法教程:

下載它的.js檔案,在這裡: http://blog.deconcept.com/... (如果連結失效可能是版本有更新,請用上面給出的地址去首頁下載最新版本)

在你的 HTML 頁面頭部<head>區嵌入這個指令檔:


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


在你的 HTML 中寫一個用來放 Flash 的容器,比如<div>,並隨便給一個 id 比如 flashcontent。然後在裡面放上你的替換內容。
<div id="flashcontent">
這裡放替換內容,用來在 Flash 無法顯示時顯示。
</div>

使用指令碼替換這個內容:

<script type="text/javascript">
var so = new SWFObject("movie.swf", "mymovie", "200", "100", "7", "#336699");
//

參數意思:地址,Flash 的 id(不是容器的 id),寬,高,版本需求,背景顏色
//這是最基本的,如果你要進階的設定,就仔細翻翻說明吧。
so.write("flashcontent");
</script>

 

 

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.