ビデオを HTML に挿入し、すべてのブラウザと互換性があります

HTML にビデオを挿入するには 2 つの方法があり、1 つは古代の object タグ、もう 1 つは html5 の video タグです。前者は比較的互換性が高く、後者は互換性が問題です。 HTML にビデオを挿入する最も一般的に使用される方法は 2 つあり、1 つは昔ながらの 273238ce9338fbb04bee6997e5552b95eb50c9ec568c9b96871b9e94a1ff3fd1 タグ、もう 1 つは HTML5 の 39000f942b2545a5315c57fa3276f220a6a9c6d3f311dabb528ad355798dc27d タグです。

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

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

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

<video width="602px" height="345px" controls="controls"> 
<source src="public/video/test.mp4" type="video/mp4"></source> 
<source src="public/video/test.ogg" type="video/ogg"></source> 
your browser does not support the video tag 
</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 ビデオ エンコーディングと AAC オーディオ エンコーディングを備えた MPEG 4 ファイル

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

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

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

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

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="624" height="351" style="margin-top: -10px;margin-left: -8px;" id="FLVPlayer1"> 
<param name="movie" value="FLVPlayer_Progressive.swf" /> 
<param name="quality" value="high" /> 
<param name="wmode" value="opaque" /> 
<param name="scale" value="noscale" /> 
<param name="salign" value="lt" /> 
<param name="FlashVars" value="&amp;MM_ComponentVersion=1&amp;skinName=public/swf/Clear_Skin_3&amp;streamName=public/video/test&amp;autoPlay=false&amp;autoRewind=false" /> 
<param name="swfversion" value="8,0,0,0" /> 
<!-- 此 param 标签提示使用 Flash Player 6.0 r65 和更高版本的用户下载最新版本的 Flash Player。如果您不想让用户看到该提示，请将其删除。 --> 
<param name="expressinstall" value="expressInstall.swf" /> 
</object>

これでは、flv 形式のビデオに加えて、いくつかの swf または js ファイルも紹介されており、すべて DW ソフトウェアで生成されています。 273238ce9338fbb04bee6997e5552b95 タグが好きな人は、DW ソフトウェアにアクセスしてこの 2 つのコードをうまく融合できれば、互換性のある究極のコードを得ることができます。すべての主流ブラウザ。

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

jquery を使用して、ブラウザが IE であるかどうかを判断します (サーバーの理由により、IE のより高いバージョンが通過しない可能性があるため、特定の IE バージョンを判断する必要はありません。当面はすべてIE は 273238ce9338fbb04bee6997e5552b95eb50c9ec568c9b96871b9e94a1ff3fd1 タグを使用します)、バージョンに応じて異なるタグをロードします。コードは次のとおりです:
コードは次のとおりです:

<script> 
if($.browser.msie){ 
document.write(&#39;<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="624" height="351" style="margin-top: -10px;margin-left: -8px;" id="FLVPlayer1">&#39;+ 
&#39;<param name="movie" value="FLVPlayer_Progressive.swf" />&#39;+ 
&#39;<param name="quality" value="high" />&#39;+ 
&#39;<param name="wmode" value="opaque" />&#39;+ 
&#39;<param name="scale" value="noscale" />&#39;+ 
&#39;<param name="salign" value="lt" />&#39;+ 
&#39;<param name="FlashVars" value="&amp;MM_ComponentVersion=1&amp;skinName=public/swf/Clear_Skin_3&amp;streamName=public/video/test&amp;autoPlay=false&amp;autoRewind=false" />&#39;+ 
&#39;<param name="swfversion" value="8,0,0,0" />&#39;+ 
&#39;<!-- 此 param 标签提示使用 Flash Player 6.0 r65 和更高版本的用户下载最新版本的 Flash Player。如果您不想让用户看到该提示，请将其删除。 -->&#39;+ 
&#39;<param name="expressinstall" value="expressInstall.swf" />&#39;+ 
&#39;</object>&#39;); 
}else{ 
document.write(&#39;<video width="602px" height="345px" controls="controls">&#39;+ 
&#39;<source src="public/video/test.mp4" type="video/mp4"></source>&#39;+ 
&#39;<source src="public/video/test.ogg" type="video/ogg"></source>&#39;+ 
&#39;your browser does not support the video tag&#39;+ 
&#39;</video>&#39;); 
} 
</script>

書き込む前に jquery ファイルを導入することを忘れないでください。このコード

この時点で、すべてのブラウザと互換性のある HTML ビデオ コードを作成できます。


HTML へのビデオの挿入とすべてのブラウザーとの互換性に関するその他の関連記事については、PHP 中国語 Web サイトに注目してください。