ブラウザ互換性を実現するための HTML5 ビデオ方式

この記事では、HTML5 ビデオのブラウザー互換性を実現する方法について説明します。以前は、Web ページ上のビデオを解決するには Flash が最適な方法でした。現在でも、次のようなビデオ Web サイトなどで Flash が主流です。 Youku と Xiami のオンライン音楽 Web サイトは、再生サービスを提供するために依然として Flash を使用しています。しかし、この状況は HTML5 の発展によって変わります。ビデオに関して言えば、HTML5 にはビデオが追加され、オンラインでビデオを再生する機能が実装されます。

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

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

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

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

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

マルチフォーマットブラウザを準備する際に面倒なのはフォーマットの変換です。国内の動画変換ツールは機能が比較的少なく、変換形式は上記の最後の 2 つほど優れていない可能性があり、品質はさまざまで、使用前に登録が必要なことがよくあります。海外ツールのおすすめ オンラインコンバーター、無料のオンライン動画変換ツールです。ソフトウェアをインストールする必要さえなく、対応するターゲット形式を選択してビデオをアップロードし、パラメータを設定するだけで変換できます。適切なツールがない場合は、試してみることができます。

ステップ 2: 対応する HTML5 ビデオ コードを作成する

HTML5 のビデオは、実際にはビデオ関連の情報を含む単純なタグです。以下に具体的なコードを直接示し、簡単に説明します:

<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 タグはこれがビデオであることを示し、width 属性と height 属性はそれぞれこのビデオ コンテンツの幅と高さ (単位ピクセル) を示します。ビデオ タグには、参照されるビデオ、ビデオの形式とタイプを示すために使用されるソース タグを含めることができます。下位互換性を確保するために、video タグにプロンプ​​トを追加しました。video タグがサポートされていない場合、この文は表示されません。ここでは、ビデオのダウンロード アドレスも追加されます。ブラウザがサポートしていない場合、ユーザーはダウンロードして視聴することを選択できます。

特に注意すべき点は、ホストがこれらのビデオリクエストを正しく処理できなければならないということです。これらのビデオが要求された場合、ホストが Content-Type ヘッダーで正しい MIME タイプを送信していることを確認してください。不明な場合は、ホスティング サービス プロバイダーに問い合わせるか、自分で追加することができます。ホストが .htaccess をサポートしている場合は、次のステートメントを .htaccess ファイルに追加できます:

一般的にはこれだけです。ビデオの使用方法については比較的シンプルでより具体的です。検索することもでき、詳細な説明も参照できます。この記事のリンク。ここでは説明しません。

ステップ 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タグに書き込むだけです。これにより、ビデオ機能のクロスブラウザ互換を実現します。

上記の内容は、HTML5 ビデオのブラウザー互換性を実現する方法に関するものであり、皆様のお役に立てれば幸いです。

関連する推奨事項:

HTML5およびCSS3とブラウザの互換性の問題

HTMLでの互換性検証が必要なブラウザは何か

さまざまなブラウザと互換性のある音楽再生JSコードの実装

以上がブラウザ互換性を実現するための HTML5 ビデオ方式の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。