[JavaScript] 在 IE 中隱藏/顯示 DIV 中的 Flash 不會重新播放的解法

Standard

在某個案件中,需求是點擊 HTML 頁面上的 button 便會以 BlockUI 方式顯示一個包含 SWF 動畫的 DIV 出來,點擊 SWF 上的叉叉可隱藏此 DIV,若使用者再次點擊 HTML button,該 DIV 又會顯示出來並且從頭再播放 SWF 動畫。

在 Chrome 以及 Firefox 上都可以達到上述需求,但到了 IE 上,隱藏 DIV 後再顯示,其中的 SWF 似乎並不會被重新載入,因此會停留在上次播放的最後一格,尚不知這是 IE 對於 Flash 的 Bug 或這才是正常的,經過一番討論跟摸索後試出了解決方法。

※當然也可以採用 JavaScript 呼叫 SWF 中的重新播放事件來解決,但此次並不是採用此方法解決。

下面是範例原始 HTML(節錄):
[code language=”HTML”]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" language="javascript">
google.load("jquery", "1");
</script>
<script src="Scripts/swfobject.js" type="text/javascript"></script>
<script src="Scripts/jquery.blockUI.js" type="text/javascript"></script>
<style type="text/css">
#swf { display:none; }
</style>
</head>

<body>
<div id="swf">
<div id="swfcontent"></div>
</div>

<a href="#">播放動畫</a>
</body>
</html>
[/code]

接著,要將使用 SWFObject 嵌入 SWF 播放物件的 JavaScript 寫成一個 Function:
[code language=”javascript”]
function showSwf() {
var flashvars = { };
var params = {};
params.wmode = "transparent";
params.menu = "true";
params.quality = "high";
var attributes = {id:"FlashID",name:"FlashID"};

swfobject.embedSWF("flash.swf", "swfcontent", "698", "608", "10.0.0","expressInstall.swf", flashvars, params, attributes);
}
[/code]

思路大概是這樣的:
開啟:頁面載入後,嵌入 SWF 播放物件(CSS 中此物件是隱藏的)到 swf DIV 中,當使用者點擊播放動畫按鈕後,以 BlockUI 方式顯示 swf DIV。
關閉:點擊 SWF 中的關閉按鈕,呼叫關閉 BlockUI 的 Close JavaScript 事件,關閉 swf DIV,此時也移除掉嵌入的 swfobject 播放物件,並再次嵌入(以確保 IE 可以重新播放)。

依此思路,寫出了第一版的解決方案:
[code language=”HTML”]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" language="javascript">
google.load("jquery", "1");
</script>
<script src="Scripts/swfobject.js" type="text/javascript"></script>
<script src="Scripts/jquery.blockUI.js" type="text/javascript"></script>
<script type="text/javascript">
// 嵌入 SWF
function showSwf() {
var flashvars = { };
var params = {};
params.wmode = "transparent";
params.menu = "true";
params.quality = "high";
var attributes = {id:"FlashID",name:"FlashID"};

swfobject.embedSWF("flash.swf", "swfcontent", "698", "608", "10.0.0","expressInstall.swf", flashvars, params, attributes);
}

// 關閉 Flash
function closeUI(){
$.unblockUI();

// 清掉 swf DIV 的內容
$("#swf").html("<div id=’swfcontent’></div>");
// 再嵌入一次
showSwf();
}

$(document).ready(function() {
showSwf();

$(‘#clickme’).click(function() {
$.blockUI({ message: $(‘#swf’) });
});
});
</script>
<style type="text/css">
#swf { display:none; }
</style>
</head>

<body>
<div id="swf">
<div id="swfcontent"></div>
</div>

<a id="clickme" href="#">播放動畫</a>
</body>
</html>
[/code]

但是很弔詭的事情,依然發生在 IE 上,在這樣開開關關幾次 DIV 後,有時 SWF 動畫就會卡住不動,但用滑鼠在 SWF 上點幾下,又或是等個幾秒它又自己開始動起來 …
看起來得針對 IE 特別做處理了。

最後跟同事討論出的最終解決方案 Code 如下:
[code language=”HTML”]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" language="javascript">
google.load("jquery", "1");
</script>
<script src="Scripts/swfobject.js" type="text/javascript"></script>
<script src="Scripts/jquery.blockUI.js" type="text/javascript"></script>
<script type="text/javascript">
// 嵌入 SWF
function showSwf() {
var flashvars = { };
var params = {};
params.wmode = "transparent";
params.menu = "true";
params.quality = "high";
var attributes = {id:"FlashID",name:"FlashID"};

swfobject.embedSWF("flash.swf", "swfcontent", "698", "608", "10.0.0","expressInstall.swf", flashvars, params, attributes);
}

// 關閉 Flash
function closeUI(){
$.unblockUI();

// 判斷 IE,用 swfobject 方法來移除嵌入物件
if ( $.browser.msie ) {
swfobject.removeSWF("FlashID");

$("#swf").hide();
$("#swf").html("<div id=’swfcontent’></div>");

var att = { data:"flash.swf", width:"698", height:"608" };
var par = { flashvars:"" };
var id = "swfcontent";
var myObject = swfobject.createSWF(att, par, id);
} else {
// 清掉 swf DIV 的內容
$("#swf").html("<div id=’swfcontent’></div>");
// 再嵌入一次
showSwf();
}
}

$(document).ready(function() {
showSwf();

$(‘#clickme’).click(function() {
$.blockUI({ message: $(‘#swf’) });
});
});
</script>
<style type="text/css">
#swf { display:none; }
</style>
</head>

<body>
<div id="swf">
<div id="swfcontent"></div>
</div>

<a id="clickme" href="#">播放動畫</a>
</body>
</html>
[/code]

也許用了笨方法來解決,先記下此次解法,有時間再來研究為什麼會有這些問題吧 Orz

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *