HTML5のvideoタグのブラウザ互換性を強化する計画の共有-H5 チュートリアル-php.cn

HTML5のvideoタグのブラウザ互換性を強化する計画の共有

不言

リリース： 2018-06-20 10:24:14

オリジナル

2068 人が閲覧しました

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 で使用できる webm 形式のビデオを準備します。クロムなど。 Webm は Google によって提案された、オープンソースで無料であり、すべてのブラウザと互換性のあるビデオ形式になる可能性があります。

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

ステップ 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 功能，点击这里下载视频： <a href=”video.webm”>下载视频</a>.   
</video>

ログイン後にコピー

video タグはこれがビデオであることを示し、width 属性と height 属性はそれぞれビデオコンテンツの幅と高さ (単位ピクセル) を示します。ビデオタグには、参照されるビデオ、ビデオの形式とタイプを示すために使用されるソースタグを含めることができます。下位互換性を確保するために、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タグに書き込むだけです。このようにして、ビデオ機能のクロスブラウザ互換性を実現しました

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語に注目してください。 Webサイト！