HTMLにビデオを挿入してすべてのブラウザと互換性を持たせる方法

HTML にビデオを挿入するために最もよく使用される方法は 2 つあります。1 つは古い <object></object> タグで、もう 1 つは HTML5 の <video></video> タグです。

前者は互換性は申し分ないですが、使い勝手はあまり良くありません。後者は使い勝手はとても良いですが、互換性が問題です。

後者は互換性の問題が多いですが、使い勝手が非常に良く、Web デザインの今後の発展傾向にも合致しています。そのため、後者をビデオ挿入の主な方法として使用します。前者は互換性の問題があるため、補助的な方法として使用されます。

次に例を示します。

コードをコピー

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

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

現在、ビデオ要素は次の 3 つのビデオ形式をサポートしています。
フォーマット IE Firefox Opera Chrome Safari
オッグいいえ 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 ファイル

注: 形式は、MPEG 4、H.264 ビデオ、AAC オーディオなど、上記の 3 つの詳細な要件を満たす必要があります。

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

コードをコピー

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

ここでいくつかのファイルを紹介しています。flv形式のビデオに加えて、いくつかのswfまたはjsファイルもありますが、すべてDWソフトウェアによって生成されています。<object></object>タグを勉強したくない友人は、DWソフトウェアを使用してそれらを生成できます。巧みに統合できれば

これら 2 つのコードにより、すべての主要ブラウザと互換性のある究極のコードが得られます。

つまり、次のようになります:

jQuery を使用して、ブラウザが IE であるかどうかを判別します (特定の IE バージョンを判別する必要はありません。サーバーが IE の上位バージョンを渡さない可能性があるためです。一時的に、すべての IE は <object></object> タグを使用します)。バージョンに応じて異なるタグを読み込みます。コードは次のとおりです。

コードをコピー

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

<スクリプト>
ブラウザで
document.write('<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="&MM_ComponentVersion=1&skinName=public/swf/Clear_Skin_3&streamName=public/video/test&autoPlay=false&autoRewind=false" />'+
'<param name="swfversion" value="8,0,0,0" />'+
''+
'<param name="expressinstall" value="expressInstall.swf" />'+
'</object>');
}それ以外{
document.write('<ビデオ幅="602px" 高さ="345px" コントロール="コントロール">'+
'<source src="public/video/test.mp4" type="video/mp4"></source>'+
'<source src="public/video/test.ogg" type="video/ogg"></source>'+
'お使いのブラウザはビデオタグをサポートしていません'+
'</ビデオ>');
}
</スクリプト>

このコードを書く前にjqueryファイルをインポートすることを忘れないでください

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

<<: Dockerにlogstashをインストールする詳細な手順

>>: DIV の一般的なタスク (パート 1) — 一般的なタスク (スクロールバーの表示、div の非表示、イベントバブリングの無効化など)