ホームページ > 記事 > ウェブフロントエンド > ビデオを HTML に挿入し、ブラウザーと互換性を持たせる
この記事では主に CSS のカスタムの緑色のチェックボックス ボタンのスタイルを紹介します。必要な方はそれを参考にしてください。 1 つは 2 つの方法です。は古代の object タグで、もう 1 つは HTML5 の video タグです。前者は比較的互換性が優れていますが、後者の互換性は問題です。HTML にビデオを挿入する最も一般的な方法は 2 つあります。 object> タグ、1 つは HTML5 の タグです。
前者は互換性はありますが、あまり使いにくいです。後者は非常に便利ですが、互換性が頭の痛い問題です。後者は互換性に多くの問題がありますが、非常に使いやすく、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>
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="&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 标签提示使用 Flash Player 6.0 r65 和更高版本的用户下载最新版本的 Flash Player。如果您不想让用户看到该提示,请将其删除。 --> <param name="expressinstall" value="expressInstall.swf" /> </object>
<script> if($.browser.msie){ 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 标签提示使用 Flash Player 6.0 r65 和更高版本的用户下载最新版本的 Flash Player。如果您不想让用户看到该提示,请将其删除。 -->'+ '<param name="expressinstall" value="expressInstall.swf" />'+ '</object>'); }else{ document.write('<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>'); } </script>
このコードを記述する前に jquery ファイルを導入することを忘れないでください
この時点で、すべてのブラウザと互換性のある HTML ビデオ コードを作成します。
以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。
関連する推奨事項:
主要ブラウザと互換性のあるプレーヤーのHTML5実装
H5の新しい属性オーディオオーディオとビデオの制御分析について
WeChatとアプリにHTML5ページのオーディオとビデオを実装する方法次に自動的に再生
以上がビデオを HTML に挿入し、ブラウザーと互換性を持たせるの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。