石頭閒語:用 JavaScript 切換網頁的 Flash

我在部落格的首頁上放了一個 Blog 音樂盒的欄位 (為部落格加上合法授權的音樂盒)，今天想加個選單選擇要播放的音樂盒。原本理所當然地直接改變 embed 元素的 src 屬性的內容，結果毫無反應。上網查了一下發現這功能的支援依瀏覽器而異，最通用方式竟然是用 innerHTML 重新寫入 HTML code 的傳統用法。

Macromedia Flash Support Center 的《Flash Methods》中提到，可以用 HTML DOM 的 getElementById() 取得 Flash object 後調用 Flash object 的方法，其中 LoadMovie() 可以指派 (改變) Flash object 播放的內容，還有 Play(), StopPlay(), Rewind() 等播放行為可用。 Mozilla developer center 的《Scripting Plugins: Macromedia Flash》附和 Macromedia Flash Support Center 的說法。於是我寫下下列的程式。

<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>
<body>
<script type="text/ecmascript">
var musicBoxSet=[
    {
        "boxName":"五月風潮",
        "providerUrl":"http://blog.xuite.net/wm_dsc/music/6430893",
        "src":"http://blog.xuite.net/_public/put/WindMusic/windmusic48.swf",
        "width":"163",
        "height":"350"
    },
    
    {
        "boxName":"美麗時光",
        "providerUrl":"http://www.travelrich.com.tw/members/lisaono/media.aspx",
        "src":"http://www.travelrich.com.tw/members/lisaono/mp3/lisaono.swf?autoStart=no",
        "width":"140",
        "height":"350"
    }
];

function renderMusicBoxHtmlCode(n) {
    var m = musicBoxSet[n];
    return ''.concat(
    '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"',
    ' codebase="http://active.macromedia.com/flash5/cabs/swflash.cab#version=5,0,0,0"',
    ' id="mymusicbox" width="',m.width,'" height="',m.height,'">',
    '<param name="movie" value="',m.src,'">',
    '<param name="play" value="false">',
    '<embed name="mymusicbox" src="',m.src,
    '" width="',m.width,'" height="',m.height,
    '" play="false">',
    '</object>');
}

function changeMusicBox() {
    var s = document.getElementById('musicBoxSelect');
    var n = s.options[s.selectedIndex].value;
    var mymusicbox = document.getElementById('mymusicbox');
    mymusicbox.LoadMovie(0, musicBoxSet[n].src);
    mymusicbox.width = musicBoxSet[n].width;
    mymusicbox.height = musicBoxSet[n].height;
}

document.write('<div id="musicBox" width="220" align="center">'.concat(
    renderMusicBoxHtmlCode(0),'</div>'));

document.write('<div id="musicBoxMenu" align="center">');
document.write('<select id="musicBoxSelect" onchange="changeMusicBox();">');
for (var i=0; i<musicBoxSet.length; ++i) {
    document.write('<option value="'.concat(i,
        '"',(i==0?'selected="selected"':''),'>',
        musicBoxSet[i].boxName,'</option>'));
}
document.write('</select></div>');
</script>
</body>
</html>

然而測試結果令人遺憾，我在 Firefox v1.5 版中發生錯誤， Firefox 回報 mymusicbox.LoadMovie() 不是一個函數方法。包括 Play(), Rewind() 等方法都不能用。但是這些方法在 IE6 中可以運作。

既然官方文件推蔫的方法行不通，那還是走傳統路子，用 innerHTML 重新寫入 HTML code 吧。於是將上面的程式再改寫，改寫部份列於下。

Ok, 這個傳統方法果然有效， Firefox 跟 IE 都接受了， Opera 應該也行。雖然 innerHTML 不在 W3C HTML DOM 的規範中，但出現甚早 (IE4 首見) ，使用方式直覺，各瀏覽器普遍實作。目前看來，相容性應該沒問題。只是互動性差了些，不能用 JavaScript 控制 Flash object 的播放動作。

姓名 :
Email :
URL :
回應狀態:	公開私密
驗證碼 :	( 請依顯示文字填入 ) 重新產生驗證碼
	記住我的資訊顯示我的圖像 ( 登入或申請個人圖像 )
回應內容 :

石頭閒語

2006年12月15日

用 JavaScript 切換網頁的 Flash

引用URL