網頁嵌入 Flash 的四種方案對比與 SWFObject 最佳實踐

背景

早期 Web 專案常需嵌入 Flash (SWF) 以實現攝像頭調用、視頻播放等功能。隨著 HTML5 普及，Flash 已淘汰，但維護舊專案時仍需理解嵌入方案差異。

方案對比

SWFObject 2.x 使用指南

1. 最簡單嵌入

<div id="flashContent"></div>
<script src="swfobject.js"></script>
<script>
swfobject.embedSWF("test.swf", "flashContent", "300", "120", "9.0.0", "expressInstall.swf");
</script>

參數：swf路徑、容器ID、寬、高、最低版本、expressInstall路徑（可省略）。

2. 傳遞變數、參數、屬性

<script>
var flashvars = { name1: "hello", name2: "world" };
var params = { menu: "false", wmode: "transparent" };
var attributes = { id: "myFlash", name: "myFlash" };

swfobject.embedSWF("test.swf", "flashContent", "300", "120", "9.0.0", "expressInstall.swf", flashvars, params, attributes);
</script>

• flashvars：傳給 Flash 內部的變數（ActionScript 可用 loaderInfo.parameters 讀取）。
• params：Flash Player 參數（如 wmode, allowScriptAccess）。
• attributes：生成的 <object> 標籤屬性。

3. 同頁多 Flash

重複呼叫 embedSWF，指定不同容器 ID 即可。

SWFObject 核心優勢

1. 解決 IE ActiveX 點擊激活：透過 JS 動態寫入標籤繞過專利限制。
2. 版本檢測與自動升級：檢測不到要求版本時自動載入 expressInstall.swf 引導用戶更新。
3. 優雅降級：容器內可放置替代內容（圖片、文字、下載連結），無 Flash 環境自動顯示。
4. 標準合規：生成符合 W3C 的標籤，無驗證錯誤。

資源連結

• 官方文檔（中文）：SWFObject 2.0 官方文檔
• GitHub：swfobject/swfobject

現代替代方案

新專案請優先使用 HTML5 原生 API：

• 攝像頭/麥克風：navigator.mediaDevices.getUserMedia()
• 視頻播放：<video> 標籤 + HLS/DASH
• 動畫/圖表：Canvas / SVG / WebGL / CSS Animation