HTML 页面载入 Flash 插件的几种方法 前言 嵌入插件 效果图 结束语



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


题外话


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


嵌入插件

  • 使用 object 和 embed 标签

代码展示


这样的方法用到的是 Object 和 Embed 标签,能够看到 object 的非常多參数和 embed 里面的非常多属性是反复的。浏览器兼容性,有的浏览器支持 object,有的支持 embed,这也是为什么要改动 Flash 的參数时两个地方都要改的原因。这样的方法是 Macromedia 一直以来的官方方法,最大限度的保证了 Flash 的功能,没有兼容性问题。


但如今来看,它还是存在非常大问题的。

首先,无法通过验证,因为为了兼容性而嵌入的 embed 标签是不符合 W3C 的规范的。当然,假设你不在乎什么规范不规范,另当别论。

其次,微软因为种种原因,在 sp2 后限制了 IE 的 ActiveX 的使用模式,就是在页面中的 ActiveX 有一个虚框,须要用户点击一次才干正常交互。Flash是作为一个 ActiveX 嵌入到网页中的,所以它也会受牵连,仅仅有通过 JS 嵌入 Flash 才干解决问题。

再次,没有 Flash 版本号检測,假设版本号浏览器的flash插件版本号不够,或者不能正常显示你的 swf 文件,或者会弹出一个 ActiveX 的确认安装的框——这个框对非常多用户来说是非常恐怖的。


  • 仅仅使用 object 标签

代码展示


这样的方法仅仅用到了 Object 标签,事实上也就是 Flash satay。因为没有了 embed 标签,能够通过验证,是标准的嵌入 Flash 的方法,浏览器兼容性也不错,看起来差点儿完美,只是还是有问题的。

首先,须要一个 holder swf 来载入你的目标 swf 以保证 IE 中的 stream 能力,假设你须要通过 flashvars 来传參,或者和页面的 JS 交互,会非常麻烦。

其次,和第一种方法一样,也会弹出一个ActiveX的提示框,没有版本号检測。

再次,一些低版本号的浏览器(如低版本号的Safari等)不认同这样的方式,对它的兼容性不好。


  • 仅仅使用 embed 标签

代码展示


这样的方法仅仅用到了 Embed 标签,对照效果来说,还是非常不错的,浏览器的兼容性也还不错,都是能够载入的。当然,因为 embed 标签是不符合 W3C 的规范的,所以也不推荐使用这样的方法。

  • 使用JavaScript嵌入

使用 JS 来载入 Flash 插件,网上已经有非常多的方法了,并且也有非常多不错的 JS 插件供大家选择。我这里仅仅拿 SWFObject 来简单的介绍一下。

首先,你须要下载一个 SWFObject 插件包,该插件包中包括一个 JS 脚本,这个是你须要引入的脚步文件。还包括两个 html 的样例,大家能够模仿一下。当然,你还能够去 SWFObject 的站点了解一下,网址请点击 这里 。

代码展示




效果图


HTML 页面载入 Flash 插件的几种方法
前言
嵌入插件
效果图
结束语


结束语


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


插件下载地址:SWFObject