HTML5 を使用する場合は、デスクトップとモバイルを含むブラウザーの互換性の問題を考慮する必要があります。特にビデオの場合、ブラウザーのデコードのサポートが異なるため、HTML5 ビデオ タグのブラウザー互換性強化ソリューションを共有しましょう。それを必要とする友人はそれを参照してください。
以前は、Web ページ上のビデオを解決するには Flash が最適な方法でした。Youku などのビデオ Web サイトや Xiami などのオンライン音楽 Web サイトでは、依然として Flash が使用されています。しかし、この状況は HTML5 の発展によって変わります。ビデオに関しては、HTML5 にビデオが追加され、オンラインでビデオを再生する機能が実現されます。
HTML5 ビデオを使用すると、しかし、HTML5 には互換性の問題があり、ビデオを使用して Web ページ上でビデオを再生できますが、初期のブラウザを使用している訪問者はこのビデオを正常に視聴できない可能性があります。さらに、ビデオ エンコーダの歴史的な起源により、さまざまなブラウザがさまざまなビデオ形式をサポートしています。これらの問題に対処するには、Web ページで HTML5 ビデオ機能を使用する場合は、次の 3 つの手順を実行します。ステップ 1: マルチフォーマットのビデオ ファイルを事前に準備します
エンコーダーの著作権の問題により、ブラウザーごとにビデオ形式との互換性が異なります。現在、すべてのブラウザと互換性のあるビデオ形式はなく、唯一の解決策はビデオを複数の形式に変換することです。 まず、Apple デバイスで使用できる mp4 形式のビデオを準備します。次に、マルチフォーマットブラウザを準備する際に面倒なのはフォーマットの変換です。国内の動画変換ツールは機能が比較的少なく、変換形式は上記の最後の 2 つほど優れていない可能性があり、品質はさまざまで、使用前に登録が必要なことがよくあります。無料のオンライン動画変換ツールであるOnline Converterという海外のツールをお勧めします。ソフトウェアをインストールする必要さえなく、対応するターゲット形式を選択し、ビデオをアップロードし、パラメータを設定するだけで変換できます。適切なツールがない場合は、試してみることができます。
ステップ 2: 対応する HTML5 ビデオ コードを作成する
HTML5 のビデオは、実際にはビデオ関連の情報を含む単純なタグです。以下に具体的なコードを直接示し、それから簡単に説明します:XML/HTML コードコンテンツをクリップボードにコピーします
<video width=”800” height=”374”> <source src=”my_video.mp4” type=”video/mp4” /> <source src=”my_video.ogv” type=”video/ogg” /> <source src=”my_video.webm” type=”video/webm” /> 你浏览器不支持 video 功能,点击这里下载视频: <a href=”video.webm”>下载视频</a>. </video>
属性を示しますはそれぞれこのビデオの内容である幅と高さ(ピクセル単位)を示します。 video タグには、 によって参照されるビデオ、およびビデオの形式とタイプを示すために使用されるソース タグを含めることができます。下位互換性を確保するために、video タグにプロンプトを追加しました。video タグがサポートされていない場合、この文は表示されません。ここでは、ビデオのダウンロード アドレスも追加されます。ブラウザがサポートしていない場合、ユーザーはそれをダウンロードして視聴することを選択できます。 特に注意すべき点は、ホストがこれらのビデオリクエストを正しく処理できなければならないということです。これらのビデオが要求された場合、ホストが Content-Type ヘッダーで正しい MIME タイプを送信していることを確認してください。不明な場合は、ホスティング サービス プロバイダーに問い合わせるか、自分で追加することができます。ホストが .htaccess をサポートしている場合は、次のステートメントを .htaccess ファイルに追加できます:
コードは次のとおりです:
AddType video/ogg .ogv AddType video/mp4 .mp4 AddType video/webm .webm
おおよそ次のようなものです。比較的シンプルで、ビデオの使用方法についてより具体的に説明しています。
検索するか、この記事を参照してください。詳細については、リンクをここで繰り返しません。
ステップ 3: 古いブラウザとの互換性を確保する 前述したように、ブラウザがビデオをサポートしていない場合は、ビデオ内のプロンプト コンテンツが表示されます。したがって、古いブラウザの場合は、このプロンプト コンテンツを従来の Flash に置き換えることができます。このように、ブラウザがvideoタグに対応していない場合には、Flash版の動画が表示されます。例:
XML/HTML Code复制内容到剪贴板 <video width=”800” height=”374”> <source src=”my_video.mp4” type=”video/mp4” /> <source src=”my_video.ogv” type=”video/ogg” /> <object width="800" height="374" type="application/x-shockwave-flash" data="fallback.swf"> <param name="movie" value="fallback.swf" /> <param name="flashvars" value="autostart=true&file=video.flv" /> </object> </video>
本来の通常のFlash導入方法に従ってvideoタグに書き込むだけです。これにより、動画機能のクロスブラウザ互換を実現しました
【関連おすすめ】
4. H5 WebページのvideoタグのMP4ビデオが再生できない原因を分析します
5. HTML5オーディオとビデオを上手に活用する方法を教えます
以上がH5 でビデオ タグのブラウザ互換性を強化する方法を説明しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。