ホームページ > 記事 > ウェブフロントエンド > HTML にビデオを挿入し、すべてのブラウザと互換性を持たせる方法
HTML にビデオを挿入し、すべてのブラウザと互換性を持たせる方法
- 不言オリジナル
- 2018-05-07 17:57:422230ブラウズ
この記事は主に HTML にビデオを挿入する方法を紹介しており、すべてのブラウザと互換性がありますので、必要な友達に参考にしてください。 HTML の 1 つは古代の object タグで、もう 1 つは HTML5 の video タグです。前者の互換性は比較的優れていますが、後者の互換性は頭痛の種です
HTML にビデオを挿入する最も一般的に使用される方法は 2 つあります。は古代の 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 SafariOgg No 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="&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>
ここでは、flv 形式のビデオに加えて、いくつかの swf または js ファイルも紹介されています。 、すべて DW ソフトウェアを使用して生成されます。273238ce9338fbb04bee6997e5552b95eb50c9ec568c9b96871b9e94a1ff3fd1 タグを学習したくない場合は、DW ソフトウェアにアクセスしてこれら 2 つのコードを巧みに結合することができます。すべての主流ブラウザと互換性のある究極のコード。
それで、これを行うことができます: jquery を使用して、ブラウザが IE であるかどうかを判断します (サーバーの理由により、IE のより高いバージョンが通過しない可能性があるため、特定の IE バージョンを判断する必要はありません。当面は、すべての IE が使用します273238ce9338fbb04bee6997e5552b95eb50c9ec568c9b96871b9e94a1ff3fd1 タグ)、バージョンに応じて異なるタグをロードします。コードは次のとおりです:
コードは次のとおりです:
<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>Don'このコードを書く前に、jquery ファイルを導入することを忘れないでくださいこの時点で、すべてのブラウザの HTML ビデオ コードと互換性のあるコードを書くことができます。 以上がHTML にビデオを挿入し、すべてのブラウザと互換性を持たせる方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。