H5 でビデオタグのブラウザ互換性を強化する方法を説明します-htmlチュートリアル-php.cn

H5 でビデオタグのブラウザ互換性を強化する方法を説明します

Y2J

リリース： 2017-05-19 13:30:07

オリジナル

4468 人が閲覧しました

HTML5 を使用する場合は、デスクトップとモバイルを含むブラウザーの互換性の問題を考慮する必要があります。特にビデオの場合、ブラウザーのデコードのサポートが異なるため、HTML5 ビデオタグのブラウザー互換性強化ソリューションを共有しましょう。それを必要とする友人はそれを参照してください。

以前は、Web ページ上のビデオを解決するには Flash が最適な方法でした。Youku などのビデオ Web サイトや Xiami などのオンライン音楽 Web サイトでは、依然として Flash が使用されています。しかし、この状況は HTML5 の発展によって変わります。ビデオに関しては、HTML5 にビデオが追加され、オンラインでビデオを再生する機能が実現されます。

HTML5 ビデオを使用すると、

JavaScript を使用してビデオコンテンツなどを簡単に制御できます。これは非常に強力で、読み込みを高速化するためにコードが少なくなります。さらに、クロスプラットフォーム、特に一部のタブレット、携帯電話などは比較的良好です。たとえば、Apple の製品は Flash をサポートしておらず、HTML5 のビデオ機能のみをサポートしています。

しかし、HTML5 には互換性の問題があり、ビデオを使用して Web ページ上でビデオを再生できますが、初期のブラウザを使用している訪問者はこのビデオを正常に視聴できない可能性があります。さらに、ビデオエンコーダの歴史的な起源により、さまざまなブラウザがさまざまなビデオ形式をサポートしています。これらの問題に対処するには、Web ページで HTML5 ビデオ機能を使用する場合は、次の 3 つの手順を実行します。

ステップ 1: マルチフォーマットのビデオファイルを事前に準備します

エンコーダーの著作権の問題により、ブラウザーごとにビデオ形式との互換性が異なります。現在、すべてのブラウザと互換性のあるビデオ形式はなく、唯一の解決策はビデオを複数の形式に変換することです。

まず、Apple デバイスで使用できる mp4 形式のビデオを準備します。次に、

Firefox ブラウザで使用できる ogv 形式のビデオを準備します。 Google Chrome デバイスなどで使用されます。 Webm は Google によって提案された、オープンソースで無料であり、すべてのブラウザと互換性のあるビデオ形式になる可能性があります。

マルチフォーマットブラウザを準備する際に面倒なのはフォーマットの変換です。国内の動画変換ツールは機能が比較的少なく、変換形式は上記の最後の 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 タグにプロンプトを追加しました。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&amp;file=video.flv" />  
</object>  
</video>

ログイン後にコピー

本来の通常のFlash導入方法に従ってvideoタグに書き込むだけです。これにより、動画機能のクロスブラウザ互換を実現しました

【関連おすすめ】

1. html/cssの無料ビデオチュートリアル

4. H5 WebページのvideoタグのMP4ビデオが再生できない原因を分析します

5. HTML5オーディオとビデオを上手に活用する方法を教えます

以上がH5 でビデオタグのブラウザ互換性を強化する方法を説明しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。