HTML にビデオを挿入し、すべてのブラウザと互換性を持たせる方法_HTML/Xhtml_Web ページの作成

HTML にビデオを挿入する最も一般的に使用される方法は 2 つあり、1 つは昔ながらの タグ、もう 1 つは HTML5 の タグです。

前者は互換性はありますが、あまり使いにくいです。後者は非常に便利ですが、互換性が頭の痛い問題です。

後者は互換性に関して多くの問題がありますが、非常に使いやすく、今後の Web デザインの開発トレンドに適合しているため、後者を主なビデオ挿入方法として使用しています。互換性の問題があるため、前者は補助として使用されます。

例は次のとおりです:

コードをコピーします

コードは次のとおりです:

<ビデオ幅="602px" 高さ="345px" コントロール="コントロール">
<ソース src="public/video/test.mp4" type="video/mp4 ">
お使いのブラウザは video タグをサポートしていません

現在、video 要素は次の 3 つのビデオ形式をサポートしています:
形式 IE Firefox Opera Chrome Safari
Ogg いいえ 3.5 10.5 5.0 いいえ
MPEG 4 9.0 × × 5.0 3.0
WebM × 4.0 10.6 6.0 ×

Ogg = Theora ビデオ エンコーディングと Vorbis オーディオ エンコーディングを備えた Ogg ファイル

MPEG4 = H.264 ビデオ エンコーディングと MPEG 4 ファイルAAC オーディオ エンコーディング

WebM = VP8 ビデオ エンコーディングと Vorbis オーディオ エンコーディングを使用した WebM ファイル

注: 形式は、H でなければならない MPEG 4 など、上記の 3 つの詳細な要件に準拠する必要があります。 264 ビデオと AAC オーディオ。

この場合、ビデオ形式が正しければ、ほとんどのブラウザの互換性結果には非常に満足していますが、IE678 はサポートしておらず、そのユーザーは依然として中国で非常に大きなグループです。それらをサポートする別のソリューションを考える必要があります:

コードをコピーします

コードは次のとおりです:

ビデオを除くいくつかのファイルがここで紹介されていますflv 形式のファイルといくつかの swf または js ファイルはすべて DW ソフトウェアで生成されます。 タグを学習したくない場合は、DW ソフトウェアにアクセスして生成することができます。これらは賢く組み合わせることができます

これら 2 つのコードを使用すると、すべての主要なブラウザと互換性のある最終コードを取得できます。

それで、これを行うことができます:

jquery を使用して、ブラウザが IE であるかどうかを判断します (IE はサーバーの都合により、より高いバージョンを渡さない可能性があるため、特定の IE バージョンを判断する必要はありません)そのため、当面は < for all IE ;object> タグを使用し、バージョンに応じて異なるタグをロードします。コードは次のとおりです:

コードをコピー コードは次のとおりです:

<script> <br>if($.browser.msie){ <br>document.write('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width= "624" height="351" style="margin-top: -10px;margin-left: -8px;" id="FLVPlayer1">' <br>'<param name="movie" value="FLVPlayer_Progressive .swf" />' <br>'<param name="quality" value="high" />' <br>'<param name="wmode" value="opaque" />' 🎜>'<param name="scale" value="noscale" />' <br>'<param name="salign" value="lt" />' <br>'<param name= "FlashVars" value="&MM_ComponentVersion=1&skinName=public/swf/Clear_Skin_3&streamName=public/video/test&autoPlay=false&autoRewind=false" />' <br>'<param name= swfversion" value="8,0,0,0" />' <br>'<!-- このパラメータ タグは、Flash Player 6.0 r65 以降を使用しているユーザーに、Flash Player の最新バージョンをダウンロードするよう求めます。このプロンプトをユーザーに表示したくない場合は、削除してください。 -->' <br>'<param name="expressinstall" value="expressInstall.swf" />' <br>'</object&gt ; '); <br />}else{ <br />document.write('<video width="602px" height="345px"controls="コントロール">' <br>'<source src="public /video/test.mp4" type="video/mp4"></source>' <br>'<source src="public/video/test.ogg" type="video/ogg"< ; /source>' <br>'あなたのブラウザはビデオタグをサポートしていません' <br>'</video>'); <br></script> > このコードを記述する前に、jquery ファイル

を導入することを忘れないでください。この時点で、すべてのブラウザーと互換性のある HTML ビデオ コードを作成できます。