返回列表 發帖

使用 SWFObject 來做 Flash 的漸進增強

最近 Google AJAX Libraries API 加上了好用的 SWFObject 這支 js (詳見這裡),興起了我寫個簡易教學的念頭。

SWFObject 是用無侵入的腳本方式(unobtrusive JavaScript)將 Flash Player 安插到原本的 HTML 內容裡面,通常看到相關的文章都是講到 SWFObject 比起直接在 HTML 內安插 <object> 的方式還簡潔,或者是比 Adobe 官方釋出的 AC_RunActiveContent.js 還好用等等的。但是在網頁前端開發的工作中,SWFObject 更是拿來做 SEO 以及 Flash 漸進增強(progressive enhancement)的好用工具。

直接來看個範例吧,假設在網頁上的某一處設計要播放 Flash 的內容,可以先以一個 div 元素加上內容的描述如下:
<div id="flashContent">
  <img src="thanksalot.jpg" alt="Thanks a lot!" />
  <p>Thank you very much!</p>
</div>
這是一段表示感謝的內容,以標準 HTML 標記呈現,沒有 CSS、沒有 JavaScript,相信任何的訪客都可以正常瀏覽或讀取到,即使是搜尋引擎的機器人也可以精確地收錄網頁內容。

透過 SWFObject 可以進一步地把 id="flashContent" 的內容轉換為 Flash,這就是 Flash 的漸進增強,讓可以執行 JavaScript 並且有安裝 Flash Player 的訪客可以看到更多彩多姿的 Flash 內容。使用方式如下:
<div id="flashContent">
  <img src="thanksalot.jpg" alt="Thanks a lot!" />
  <p>Thank you very much!</p>
</div>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("http://h.vctu.com/1000000.swf", "flashContent", "300", "200", "7.0.0");
</script>
首先在第 5 行的地方引用了 swfobject.js,接著在第 7 行的地方使用 swfobject.embedSWF(),帶入的第 1 個參數是 Flash 檔案的位置,第 2 個參數是要把 Flash 放到哪個 containter 內,接著是寬、高,以及要偵測的 Flash 版本,若 Client 端有這個版本已上的 Flash Player,才會用 Flash 取代原本的 HTML 內容。

試想,若網站的訪客或搜尋引擎的機器人無法執行 JavaScript 或無法瀏覽網站的 Flash 內容,則仍可看到 HTML 內原本預設的內容,這樣的設計是不是比較完善一點呢? 多替那些未知的訪客們著想,他們就會多感謝你一點~~

This is Flash Content!


此外,如果要另外帶參數給 Flash 也是可以的,請參考官方網站的文件,有詳細的描述:
http://code.google.com/p/swfobject/wiki/documentation


P.S. 這是引用 Google AJAX Libraries API 的 SWFObject 的完整程式:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js"></script>
To infinity and beyond!

返回列表 回復 發帖