Feeds:
文章
留言

Posts Tagged ‘SWFObject’

SWFObject 2 簡介

Posted in JavaScript, tagged on 2010/01/06| 2 Comments »

SWFObject  是什麼？

  • 提供二種已最佳化的 Flash Player 嵌入方法：一個以 HTML 標記為基礎的方法以及依靠 JavaScript 來實作的方法
  • 提供一個  JavaScript API 其目的為提供一個完整的工具集，用來嵌入 SWF 檔案以及擷取 Flash Player 相關的資訊
  • 只需利用一個很小的 JavaScript 檔案 (10Kb/GZIPed:3.9Kb)
  • 繼承了 SWFObject 1.5、UFO 以及 Adobe Flash Player Detection Kit 的功能
  • 打算整合現有的 Flash Player 嵌入方法以及為嵌入的 Adobe Flash Player 內容提供一個新的標準

為什麼你應該使用 SWFObject？

  • 比起其它的 Flash Player 嵌入方式更加優化與靈活
  • 為大家提供了一種解決方法：無論你是否是一位 HTML、Flash 或是JavaScript 開發人員，對大家來說就只有一種方法
  • 打破由廠商鎖定的特定標記，提倡使用網頁標準與替代內容
  • 使用非侵入性的 JavaScript 以及 JavaScript 最佳的解決方式
  • 易於使用

為什麼 SWFObject 要使用 JavaSCript？

SWFObject 2 主要使用 JavaScript 克服無法由標記來解決的問題：

  • 偵測 Flash Player 版本以及決定是否顯示 Flash 內容或是替代內容，以避免過時的 Flash 插件破壞了 Flash 內容
  • 如果 DOM 操作的是一個過期的 Flash 插件，提供可返迴至替代內容的功能 (註：如果未安裝 Flash 插件，HTML 的 object 元素會退回至原始方式來顯示其巢狀的替代內容)
  • 提供了一個選擇，讓你可以使用 Adobe Express Install 來下載最新的 Flash Player 版本
  • 提供了一個 JavaScript API 來執行一般的 Flash Player 以及與 Flash 內容相關的工作

我應該使用靜態或動態的發佈方法？

SWFObject 2 提供了二種不同的嵌入 Flash 內容的方法：

  1. 靜態發佈方法使用了與標準相容的標記來嵌入 Flash 內容與替代內容，並且使用 JavaScript 來解決標記無法單獨解決的問題
  2. 動態發佈方法以替代內容標記為基礎，假如已安裝了 Flash Player 最低需求版本並且有足夠的 JavaScript 支援 (像是 SWFObject 和 UFO 之前的版本)，則會使用 JavaScript 以 Flash 的內容來取代該標記內容

靜態發佈方法的好處：

  1. 推動實際來撰寫與標準相容的標記
  2. 擁有最好的嵌入效能
  3. Flash 內容的嵌入機制不會依賴所使用的指令碼語言，如此你的 Flash 內容可以獲得較多有意義的瀏覽
    • 如果你已經安裝 Flash 插件，但 JavaScript 已被關閉或是使用的瀏覽器不支援 JavaScript，你仍然可以看到 Flash 內容
    • Flash 現在也可以在像是 Sony PSP 的裝置上來執行，而它對於 JavaScript 的支援非常地差
    • 像 RSS Reader 這種自動工具可以挑選出 Flash 內容

動態發佈方法的好處：

  • 它與指令碼所撰寫的應用程式整合的非常地好並且可以使用動態變數(flashvars)
  • 它廻避了在 IE6/7 以及 Opera 9+ 裏的 click-to-activate 機制

如何使用 SWFObject 靜態發佈來嵌入 Flash Player 內容

步驟一：使用與標準相容的標記來嵌入 Flash 內容與替代內容

當要達到與標準相容以及支援替代內容時，SWFObject 的基本標記使用了巢狀 object 的方法(搭配 IE 自有的條件註解)以確保只用標記即可達到最佳的跨瀏覽器支援。

HTML 代碼：


<!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=utf-8" />
</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 is here</p>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
</body>
</html>

註：巢狀 object 方法需要二個 object 定義 (外面的 object 是針對 IE 而使用的，裏面的 object 則是針對其它的瀏覽器)，所以你需要定義 object 屬性以及巢狀的 param 元素二次。

必要的屬性：
  • classid (只有外面的 object 元素需要，其值總是為 clsid:D27CDB6E-AE6D-11cf-96B8-444553540000)
  • type (只有裏面的 object 元素需要，其值總是為 application/x-shockwave-flash)
  • data (只有裏面的 object 元素需要，定義 SWF 的 URL)
  • width (二個 object 元素都要設定，定義 SWF 的寬度)
  • height (二個 object 元素都要設定，定義 SWF 的高度)
必要的 param 元素：
  • movie (只有外面的 object 元素需要，定義 SWF 的 URL)

註：給你個忠告，別使用 codebase 屬性來指向位於 Adobe 的伺服器上之 Flash plugin installer 的 URL。因為根據規範它是不合法的，而且會限制其只能在當前文件的網域來存取。建議使用較細微的訊息當作替代文字，讓使用者擁有更豐富的體驗來取代下載 Flash 插件。

要如何使用 HTML 來設定 Flash 內容？

你可以對 object 元素加入下列經常使用的選擇性屬性：

  • id
  • name
  • class
  • align

你可以使用下列 Flash 特定的 param 元素)

  • play
  • loop
  • menu
  • quality
  • scale
  • salign
  • wmode
  • bgcolor
  • base
  • swliveconnect
  • flashvars
  • devicefont
  • allowscriptaccess
  • seamlesstabbing
  • allowfullscreen
  • allownetworking
為什麼應該使用替代內容？

object 元素允許你在其內巢狀放置替代內容，當 Flash 未安裝或是未支援時會顯示出來。這內容也會被搜尋引擎挑選出來。讓它變成 search-engine-friendly 內容的好用工具。總而言之，當你想要建立對沒有使用插件來瀏覽網頁的人們具有親和性、search-engine-friendly 的內容以及告訴參訪者藉由下載 Flash 插件會有更豐富的使用者體驗的內容時，你應該使用替代內容。

步驟二：在你的 HTML 頁面的 head 區段中引入 SWFObject JavaScript library

SWFObject library 由一個外部的 JavaScript 檔案構成。SWFObject 一旦讀取並且在 DOM 載入執行所有的 DOM 操作就會立即執行。IE、Firefox、Safari 和 Opera 9+ 支援這樣子的順序，但是其它的瀏覽器則是要等到 onload 事件觸發之後才會執行。

HTML 代碼：

<!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=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/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 is here</p>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
</body>
</html>

步驟三、使用 SWFObject library 來登錄 Flash 內容並告訴 SWFObject 要做什麼

首先加入一個唯一的 ID 到外面的 object 標記用來定義你的 Flash 內容。其次加入 swfobject.registerObject 方法：

  1. 第一個參數(字串，必要的參數)指定了在標記中所使用的 ID
  2. 第二個參數(字串，必要的參數)指定了內容所使用的 Flash Player 版本。它啟動了 SWF 的 Flash 版本偵測以決定是否顯示 Flash 內容或是藉由 DOM 操作來強制顯示替代內容。當 Flash 版本號通常由 major.minor.release.build 構成，SWFObject 只會看前三組號碼，所以 “WIN 9,0,18,0″ (IE) 或 “Shockwave Flash 9 r18″ (其它的瀏覽器) 會轉換成 “9.0.18″。如果你只是想要對 major 版本來測試，可以省略 minor 和 release 版本號，像是以 “9″ 來取代 “9.0.0″。
  3. 第三個參數(字串，選擇性參數)用來啟動 Adobe express install 以及設定 express install 的 SWF 檔案之 URL。當所需要的 Flash 插件版本不適用時，Express install 會顯示一個標準的 Flash 插件下載對話視窗來取代 Flash 內容。預設的 expressInstall.swf 已包進該專案中。它也包含有對應的 expressInstall.fla 和 AS 檔案(在 SRC 目錄中)讓你可以建立屬於你的 express install。請注意 express install 只會觸發一次(第一次被呼叫的時侯)，並只在 Windows 或是 Mac 平台 Flash Player 6.0.65 以上有支援，並且需要最小 310x137px 大小的 SWF 檔案。
  4. 第四個參數(JavaScript函數，選擇性參數)用來定義在嵌入 SWF 檔案成功或失敗時會呼叫的回呼函數

HTML 代碼：

<!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=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/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 is here</p>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
</body>
</html>

小技巧：

  • 使用 SWFObject HTML and JavaScript generator 來幫助你編輯程式碼
  • 只要重覆步驟一至步驟三就可以在一個 HTML 頁面嵌入多個 SWF 檔案
  • 參照作用中的 object 元素最簡單的方法就是使用 JavaScript API： swfobject.getObjectById(objectIdStr)

如何使用 SWFObject 動態發佈來嵌入 Flash Player 內容

步驟一、使用與標準相容的標記來建立替代內容

SWFObject 的動態嵌入方法遵守漸進增強的原則並且當有足夠的 JavaScript 和 Flash 插件的支援時會以 HTML 內容來取代 Flash 內容。首先定義你的替代內容並且標示一個 ID：

HTML 代碼：

<!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=utf-8" />
</head>
<body>
<div id="myContent">
<p>Alternative content</p>
</div>
</body>
</html>

步驟二：在你的 HTML 頁面的 head 區段中引入 SWFObject JavaScript library

SWFObject library 由一個外部的 JavaScript 檔案構成。SWFObject 一旦讀取並且在 DOM 載入執行所有的 DOM 操作就會立即執行。IE、Firefox、Safari 和 Opera 9+ 支援這樣子的順序，但是其它的瀏覽器則是要等到 onload 事件觸發之後才會執行。

HTML 代碼：

<!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=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
</head>
<body>
<div id="myContent">
<p>Alternative content is here</p>
</div>
</body>
</html>

步驟三、使用 JavaScript 來嵌入你的 SWF

swfobject.embedSWF(swfUrl, id, width, height, version, expressInstallSwfurl, flashvars, params, attributes, callbackFn) 擁有五個必要的參數以及五個選擇性的參數：

  1. swfUrl(字串，必要的參數) 設定 SWF 的 URL
  2. id(字串，必要的參數) 設定要以 Flash 內容來替換掉的 HTML 元素(包含有你的替代內容)之 ID
  3. width(字串，必要的參數) 設定 SWF 的寬度
  4. height(字串，必要的參數) 設定 SWF 的高度
  5. version(字串，必要的參數) 設定 SWF 播放的 Flash player 版本(格式為："major.minor.release" 或 “major")
  6. expressInstallSwfurl(字串，選擇性的參數) 設定 express install SWF 的 URL 以及啟動 Adobe express install。請注意 express install 只會觸發一次(第一次被呼叫的時侯)，並只在 Windows 或是 Mac 平台 Flash Player 6.0.65 以上有支援，並且需要最小 310x137px 大小的 SWF 檔案。
  7. flashvars(Object，選擇性的參數) 以 name:value 鍵值對來設定 flashvars
  8. params(Object，選擇性的參數) 以 name:value 鍵值對來設定巢狀的 object 元素
  9. attributes(Object，選擇性的參數) 以 name:value 鍵值對來設定 object 的屬性
  10. callbackFn(JavaScript函數，選擇性的參數) 用來定義在嵌入 SWF 檔案成功或失敗時會呼叫的回呼函數

註：只要你不破壞參數的順序，你可以省略選擇性的參數。如果你不想要使用選擇性參數，但是想要使用下面的選擇性參數，你可以只傳 flase 來當作它的值。對於 flashvars、params 和 attributes 這些 JavaScript 物件，你也可以傳入一個空的物件來替代： {}。

HTML 代碼：

<!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=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/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 is here</p>
</div>
</body>
</html>

如何設定 Flash 的內容？

你可以加入下列經常使用的選擇性屬性到 object 元素中：

  • id (註：當沒有定義時， object 元素會自動地繼承替代內容容器的 ID)
  • name
  • styleclass (用來取代 class，因為這也是 ECMA4 的保留字)
  • align

你可以使用下面選擇性的 Flash 之特定的 param 元素：

  • play
  • loop
  • menu
  • quality
  • scale
  • salign
  • wmode
  • bgcolor
  • base
  • swliveconnect
  • flashvars
  • devicefont
  • allowscriptaccess
  • seamlesstabbing
  • allowfullscreen
  • allownetworking

要如何使用 JavaScript 物件來定義 flashvars、params 和 object 的屬性？

你最好能夠使用 Object literal notation 來定義 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 鍵值對(註：請確定在物件內的最後一個鍵值對後沒有多餘的逗號)

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

或者在建立物件後使用 dot notation 來加入屬性與值：

<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 或是一個空的物件 (註：從 SWFObject 2.1 起，你也可以使用 null 或 0)

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

flashvars 物件是一個讓你便於使用的速記法。你可以忽略它並且透過 params 物件來設定你自己的 flashvars：

<script type="text/javascript">
var flashvars = false;
var params = {
menu: "false",
flashvars: "name1=hello&name2=world&name3=foobar"
};
var attributes = {
id: "myDynamicContent",
name: "myDynamicContent"
};
swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf", flashvars, params, attributes);
</script>

小技巧：

延伸閱讀：

SWFObject Documentation
Flash Embedding Cage Match

Read Full Post »