HTML5 videoタグのブラウザ互換性強化計画について詳しく解説-H5 チュートリアル-php.cn

HTML5 videoタグのブラウザ互換性強化計画について詳しく解説

黄舟

リリース： 2017-05-19 17:16:43

オリジナル

1724 人が閲覧しました

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 Code复制内容到剪贴板
<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版の動画が表示されます。例:

<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. html5のvideoタグテストアプリの詳しい説明

2. HTML5でvideo要素を使って動画プレーヤーを作成する

3. videoタグが再生できない問題と解決策を共有するmp4

H5 video タグがサウンドのみを再生でき、ビデオを再生できない問題の解決策

IIS の MIME が MP4 タイプを登録しないため、ビデオタグを認識できません

以上がHTML5 videoタグのブラウザ互換性強化計画について詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。