1. 程式人生 > >HTML 頁面載入 Flash 外掛的幾種方法

HTML 頁面載入 Flash 外掛的幾種方法

<span style="font-family:Microsoft YaHei;"><div style="margin-top:-30px;margin-left:-120px;">
    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" 
       codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" 
       width="490" height="390" id="Untitled-1" align="middle">
    <param name="allowScriptAccess" value="sameDomain" />
    <param name="movie" value="cam.swf" />
    <param name="quality" value="high" />
    <param name="bgcolor" value="#ffffff" />
    <embed src="cam.swf" quality="high" bgcolor="#ffffff" width="490" height="390" name="cam" align="middle" allowScriptAccess="sameDomain" 
       type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
    </object>
</div></span>

這種方法用到的是 Object 和 Embed 標籤,可以看到 object 的很多引數和 embed 裡面的很多屬性是重複的。瀏覽器相容性,有的瀏覽器支援 object,有的支援 embed,這也是為什麼要修改 Flash 的引數時兩個地方都要改的原因。這種方法是 Macromedia 一直以來的官方方法,最大限度的保證了 Flash 的功能,沒有相容性問題。 但現在來看,它還是存在很大問題的。 首先,無法通過驗證,由於為了相容性而嵌入的 embed 標籤是不符合 W3C 的規範的。當然,如果你不在乎什麼規範不規範,另當別論。 其次,微軟由於種種原因,在 sp2 後限制了 IE 的 ActiveX 的使用模式,就是在頁面中的 ActiveX 有一個虛框,需要使用者點選一次才能正常互動。Flash是作為一個 ActiveX 嵌入到網頁中的,所以它也會受牽連,只有通過 JS 嵌入 Flash 才能解決這個問題。 再次,沒有 Flash 版本檢測,如果版本瀏覽器的flash外掛版本不夠,或者不能正常顯示你的 swf 檔案,或者會彈出一個 ActiveX 的確認安裝的框——這個框對很多使用者來說是很恐怖的。
  • 只使用 object 標籤
程式碼展示
<span style="font-family:Microsoft YaHei;"><div style="margin-top:-30px;margin-left:-120px;">
    <object type="application/x-shockwave-flash data="c.swf?path=cam.swf" width="490" height="390">
    <param name="cam" value="c.swf?path=cam.swf" />
    <img src="defqr.png" 
    width="550" height="400" alt="" />
    </object>
</div></span>

這種方法只用到了 Object 標籤,其實也就是 Flash satay。由於沒有了 embed 標籤,可以通過驗證,是標準的嵌入 Flash 的方法,瀏覽器相容性也不錯,看起來幾乎完美,不過還是有問題的。 首先,需要一個 holder swf 來載入你的目標 swf 以保證 IE 中的 stream 能力,如果你需要通過 flashvars 來傳參,或者和頁面的 JS 互動,會很麻煩。 其次,和第一種方法一樣,也會彈出一個ActiveX的提示框,沒有版本檢測。 再次,一些低版本的瀏覽器(如低版本的Safari等)不認同這種方式,對它的相容性不好。
  • 只使用 embed 標籤
程式碼展示
<span style="font-family:Microsoft YaHei;"><div style="margin-top:0px;margin-left:-70px;">
	<embed id="cam" src="cam.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="450" height="350" name="webcam" align="middle" wmode="transparent" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="width=490&height=390&objid=cameradialog">
</div></span>

這種方法只用到了 Embed 標籤,對比效果來說,還是很不錯的,瀏覽器的相容性也還不錯,都是可以載入的。當然,由於 embed 標籤是不符合 W3C 的規範的,所以也不推薦使用這種方法。
  • 使用JavaScript嵌入
使用 JS 來載入 Flash 外掛,網上已經有很多的方法了,而且也有很多不錯的 JS 外掛供大家選擇。我這裡只拿 SWFObject 來簡單的介紹一下。 首先,你需要下載一個 SWFObject 外掛包,該外掛包中包含一個 JS 指令碼,這個是你需要引入的腳步檔案。還包括兩個 html 的例子,大家可以模仿一下。當然,你還可以去 SWFObject 的網站了解一下,網址請點選 這裡 。 程式碼展示
<span style="font-family:Microsoft YaHei;"><script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
	swfobject.registerObject("myId", "9.0.0", "cam.swf");
</script></span>

<span style="font-family:Microsoft YaHei;"><div style="margin-top:-30px;margin-left:-120px;">	
	<object id="myId" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="490" height="390">
		<param name="movie" value="cam.swf" />
		<!--[if !IE]>-->
		<object type="application/x-shockwave-flash" data="cam.swf" width="490" height="390">
		<!--<![endif]-->
			<div>
				<h1>Alternative content</h1>
				<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
			</div>
		<!--[if !IE]>-->
		</object>
	<!--<![endif]-->
	</object>
</div></span>


效果圖