盘点HTML页面加载Flash插件的几种方法
小标 2018-05-29 来源 : 阅读 1733 评论 0

摘要:在Flash学习中,主要是因为一个新的需求——使用浏览器调用电脑的摄像头,来实现即时拍照的功能。在网上查了很多资料,由于这样那样的原因,最终选择了使用flash插件来调用pc的摄像头。当然,这个需求是基于B/S架构的,因此,就在想怎么把它嵌入到前端的HTML页面中。希望对大家学习Flash有所帮助。

    在Flash学习中,主要是因为一个新的需求——使用浏览器调用电脑的摄像头,来实现即时拍照的功能。在网上查了很多资料,由于这样那样的原因,最终选择了使用flash插件来调用pc的摄像头。当然,这个需求是基于B/S架构的,因此,就在想怎么把它嵌入到前端的HTML页面中。希望对大家学习Flash有所帮助。

题外话

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

嵌入插件

· 使用 object 和 embed 标签

代码展示

[html] view plain copy
1. <span style="font-family:Microsoft YaHei;"><div style="margin-top:-30px;margin-left:-120px;">  
2.     <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"   
3.        codebase="//fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0"   
4.        width="490" height="390" id="Untitled-1" align="middle">  
5.     <param name="allowScriptAccess" value="sameDomain" />  
6.     <param name="movie" value="cam.swf" />  
7.     <param name="quality" value="high" />  
8.     <param name="bgcolor" value="#ffffff" />  
9.     <embed src="cam.swf" quality="high" bgcolor="#ffffff" width="490" height="390" name="cam" align="middle" allowScriptAccess="sameDomain"   
10.        type="application/x-shockwave-flash" pluginspage="//www.macromedia.com/go/getflashplayer" />  
11.     </object>  
12. </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 标签

代码展示

[html] view plain copy
1. <span style="font-family:Microsoft YaHei;"><div style="margin-top:-30px;margin-left:-120px;">  
2.     <object type="application/x-shockwave-flash data="c.swf?path=cam.swf" width="490" height="390">  
3.     <param name="cam" value="c.swf?path=cam.swf" />  
4.     <img src="defqr.png"   
5.     width="550" height="400" alt="" />  
6.     </object>  
7. </div></span>

这种方法只用到了 Object 标签,其实也就是 Flash satay。由于没有了 embed 标签,可以通过验证,是标准的嵌入 Flash 的方法,浏览器兼容性也不错,看起来几乎完美,不过还是有问题的。

首先,需要一个 holder swf 来加载你的目标 swf 以保证 IE 中的 stream 能力,如果你需要通过 flashvars 来传参,或者和页面的 JS 交互,会很麻烦。

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

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

· 只使用 embed 标签

代码展示

[html] view plain copy
1. <span style="font-family:Microsoft YaHei;"><div style="margin-top:0px;margin-left:-70px;">  
2.     <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="//www.macromedia.com/go/getflashplayer" flashvars="width=490&height=390&objid=cameradialog">  
3. </div></span>

这种方法只用到了 Embed 标签,对比效果来说,还是很不错的,浏览器的兼容性也还不错,都是可以加载的。当然,由于 embed 标签是不符合 W3C 的规范的,所以也不推荐使用这种方法。

· 使用JavaScript嵌入

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

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

代码展示

 

[javascript] view plain copy
1. <span style="font-family:Microsoft YaHei;"><script type="text/javascript" src="swfobject.js"></script>  
2. <script type="text/javascript">  
3.     swfobject.registerObject("myId", "9.0.0", "cam.swf");  
4. </script></span>

 

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

 

效果图

盘点HTML页面加载Flash插件的几种方法

结束语

对比这几种方式,我更推荐使用 JS 嵌入的方式来加载 Flash 插件,这种方式不仅能保证实现 Flash 的所有功能,同时在各浏览器的兼容性方面也都表现不错,并且 JS 还可以提供更多的扩展功能,更主要是可以被更多的人复用,减少不必要的冗余代码。

本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标常用软件Flash频道!


本文由 @小标 发布于职坐标。未经许可,禁止转载。
喜欢 | 7 不喜欢 | 1
看完这篇文章有何感觉?已经有8人表态,88%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程