はじめに

私がこの記事を書いた主な理由は、チーム リーダーによって提起された新しい要件のためです? ブラウザを使用してコンピュータのカメラを呼び出し、瞬時に寫真を撮る機(jī)能を?qū)g現(xiàn)します。インターネットでさまざまな情報を調(diào)べましたが、最終的には何らかの理由で、Flash プラグインを使用して PC のカメラを呼び出すことにしました。もちろん、この要件は B/S アーキテクチャに基づいているため、フロントエンドの HTML ページにどのように埋め込むかを考えています。

余談

もちろん、ここでは主に実裝のためのカプセル化は考慮されておらず、その後の作業(yè)は業(yè)務(wù)に応じて抽象化され、共通コンポーネントにカプセル化されます。さて、早速、重要なポイントに焦點(diǎn)を當(dāng)ててみましょう。

埋め込みプラグイン

オブジェクトと埋め込みタグを使用する

コード表示

<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 を使用しますおよび Emb ed タグでは、多くのパラメータと embed の多くの屬性が表示されます。繰り返した。ブラウザの互換性。一部のブラウザはオブジェクトをサポートし、一部のブラウザは埋め込みをサポートします。そのため、Flash パラメータを変更する場合は両方の場所を変更する必要があります。この方法は常に Macromedia の公式方法であり、互換性の問題を発生させることなく Flash の機(jī)能を最大限に保証します。

しかし、今見てみると、まだ大きな問題を抱えています。

まず、互換性のために埋め込まれたembedタグがW3Cの仕様に準(zhǔn)拠していないため検証を通過できません。もちろん、ルールや規(guī)制を気にしないのであれば、それは別の問題です。

次に、さまざまな理由により、Microsoft は sp2 以降、IE の ActiveX の使用モードを制限しました。つまり、ページ上の ActiveX には仮想ボックスがあり、通常の操作にはユーザーが 1 回クリックする必要があります。 Flash は ActiveX として Web ページに埋め込まれているため、JS を介して Flash を埋め込むことのみがこの問題の影響を受けます。

繰り返しになりますが、ブラウザの Flash プラグインのバージョンが不十分な場合、または swf ファイルが正常に表示されない場合、または ActiveX のインストールを確認(rèn)するボックスが表示されます。非常に怖いので、多くのユーザーには適していません。

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タグのみを使用します。ああ。 embed タグがないので、標(biāo)準(zhǔn)的な Flash 埋め込み方法であり、ほぼ完璧に見えますが、まだ問題があります。

まず、IE でストリーム機(jī)能を確保するために、ターゲット swf をロードするためのホルダー swf が必要です。flashvars 経由でパラメータを渡したり、ページの JS を操作したりする必要がある場合、非常に面倒になります。

次に、最初の方法と同様に、バージョン検出なしで ActiveX プロンプト ボックスがポップアップ表示されます。

繰り返しになりますが、一部の下位バージョンのブラウザ (Safari の下位バージョンなど) はこの方法に同意せず、互換性が低くなります。

埋め込みタグのみを使用

コード表示

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

このメソッドは Emb のみを使用しますed タグ、効果と比較すると、まだ非常に優(yōu)れています、ブラウザ互換性もかなり良く、何でも読み込めます。もちろん、embed タグは W3C 仕様に準(zhǔn)拠していないため、この方法は推奨されません。

JavaScript を使用して埋め込む

JS を使用して Flash プラグインをロードする インターネットには多くの方法があり、誰もが選択できる優(yōu)れた JS プラグインもたくさんあります。ここでは SWFObject を簡単に紹介するためにのみ使用します。

首先，你需要下載一個 SWFObject 插件包，該插件包中包含一個 JS 腳本，這個是你需要引入的腳步文件。還包括兩個 html 的例子，大家可以模仿一下。當(dāng)然，你還可以去 SWFObject 的網(wǎng)站了解一下，網(wǎng)址請點(diǎn)擊? 這里?。

代碼展示

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

效果圖

結(jié)束語

對比這幾種方式，我更推薦使用 JS 嵌入的方式來加載 Flash 插件，這種方式不僅能保證實現(xiàn) Flash 的所有功能，同時在各瀏覽器的兼容性方面也都表現(xiàn)不錯，并且 JS 還可以提供更多的擴(kuò)展功能，更主要是可以被更多的人復(fù)用，減少不必要的冗余代碼。

插件下載地址：SWFObject?