Several methods for loading Flash plug-ins in HTML pages_html/css_WEB-ITnose

Foreword

The reason for writing this article is mainly because of a new requirement raised by the team leader? Use the browser to call the computer’s camera to achieve it Instant photo taking function. I checked a lot of information on the Internet, and for one reason or another, I finally chose to use a flash plug-in to call the PC's camera. Of course, this requirement is based on B/S architecture, so I am thinking about how to embed it into the front-end HTML page.

Digression

Of course, encapsulation has not been taken into account here, The main purpose is to implement it first, and then the subsequent work is abstracted according to the business and encapsulated into general components. Okay, without further ado, let’s focus on the key points.

Code display

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

This method uses the Object and Embed tags. You can see that many parameters of object and many attributes of embed are repeated. . Browser compatibility, some browsers support object, and some support embed, which is why you need to change both places when you want to modify Flash parameters. This method has always been the official method of Macromedia, ensuring the functionality of Flash to the greatest extent without compatibility issues.

But now, it still has big problems.

First of all, it cannot pass validation because the embed tag embedded for compatibility does not comply with the W3C specification. Of course, if you don’t care about the rules or regulations, that’s another matter.

Secondly, due to various reasons, Microsoft restricted the usage mode of IE's ActiveX after sp2. That is, there is a virtual box in the ActiveX on the page, which requires the user to click once. Normal interaction. Flash is embedded into the web page as an ActiveX, so it will also be affected. Only embedding Flash through JS can solve this problem.

Again, there is no Flash version detection. If the version of the flash plug-in in the browser is not enough, or it cannot display your swf file normally, or an ActiveX confirmation message will pop up to confirm the installation. Box??This box is very scary to many users.

Code display

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

This method only uses the Object tag, which is actually Flash satay. Since there is no embed tag, it can pass verification. It is a standard method of embedding Flash. The browser compatibility is also good. It looks almost perfect, but there are still problems.

First, you need a holder swf to load your target swf to ensure the stream capability in IE. If you need to pass parameters through flashvars, or interact with the JS of the page , it will be very troublesome.

Secondly, like the first method, an ActiveX prompt box will pop up without version detection.

Again, some lower version browsers (such as lower versions of Safari, etc.) do not agree with this method and have poor compatibility with it.

Code Showcase

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

This method only uses the Embed tag. In terms of comparative effects, it is still very good, and the browser compatibility is also pretty good. All can be loaded. Of course, since the embed tag does not comply with W3C specifications, this method is not recommended.

Use JS to load the Flash plug-in. There are many methods on the Internet, and there are also many good ones. JS plug-ins are available for everyone to choose from. I will only use SWFObject to briefly introduce it here.

首先，你需要下载一个 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