HTML 页面载入 Flash 插件的几种方法

前言

之所以写这篇文章，主要是由于组长给提的一个新的需求——使用浏览器调用电脑的摄像头，来实现即时拍照的功能。在网上查了非常多资料，由于这样那样的原因，终于选择了使用flash插件来调用pc的摄像头。当然，这个需求是基于B/S架构的，因此，就在想怎么把它嵌入到前端的HTML页面中。

题外话

当然，这里还没有考虑到封装，主要是先以实现为目的，兴许工作再依据业务进行抽象，封装成通用的组件。好了，废话不多说，看重点。

嵌入插件

• 使用 object 和 embed 标签

代码展示

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

效果图

结束语

对照这几种方式，我更推荐使用 JS 嵌入的方式来载入 Flash 插件，这样的方式不仅能保证实现 Flash 的全部功能，同一时候在各浏览器的兼容性方面也都表现不错，而且 JS 还能够提供很多其它的扩展功能，更主要是能够被很多其它的人复用，降低不必要的冗余代码。

插件下载地址：SWFObject