HTML Web ページにビデオを挿入する方法をまとめます。

この記事では、主に HTML Web ページにビデオを挿入する方法の概要を紹介します。必要な友達は参考にしてください。

ページ内で video タグを使用したい場合は、3 つの状況を考慮する必要があります。 Ogg Theora または VP8 (何も問題がなければ) (Opera、Mozilla、Chrome)、H.264 をサポートします (Safari、IE 9、Chrome)、およびサポートしません (IE6、7、8)。それでは、ビデオ タグ、ビデオ オブジェクトで使用できるメディア属性とメソッド、メディア イベントの使用など、HTML 5 ビデオを技術レベルから理解しましょう。

Video タグの使用法

Video タグには、src、poster、preload、autoplay、loop、controls、width、height などのいくつかの属性と、内部で使用されるタグ が含まれています。 タグに加えて、Video タグには、指定されたビデオが再生できない場合に返されるコンテンツを含めることもできます。

(1) src属性とposter属性

src属性が何に使われるかは想像できると思います。 タグと同様に、この属性はビデオのアドレスを指定するために使用されます。 ｐｏｓｔｅｒ属性は、現在のビデオデータが無効な場合に表示する画像（プレビュー画像）を指定するために使用される。無効なビデオ データは、ビデオがロード中であること、ビデオ アドレスが正しくないことなどを意味する可能性があります。

<video width="658"
 height="444"  poster="http://www.php.cn/images/first.png" autoplay="autoplay"></video>

(2) preload 属性

この属性は、ビデオがプリロードされるかどうかを定義するために使用されます。この属性には、none、metadata、auto の 3 つのオプションの値があります。この属性が使用されない場合、デフォルトは auto です。

<video width="658"
 height="444" src="http://www.php.cn/images/first.mp4" poster="http://www.php.cn/images/first.png" autoplay="autoplay" preload="none"></video>

なし: プリロードはありません。この属性値を使用すると、ユーザーがこのビデオを期待していないとページ作成者が判断したり、HTTP リクエストを削減したりすることができます。

メタデータ: 部分的にプリロードされています。この属性値を使用することは、ユーザーがこのビデオを期待していないとページ作成者が信じていることを意味しますが、ユーザーに何らかのメタデータ (サイズ、最初のフレーム、トラック リスト、再生時間など) を提供します。

自動: すべてプリロードされています。

(3) autoplay 属性

も名前を見れば用途が分かる属性です。 Autoplay 属性は、ビデオを自動的に再生するかどうかを設定するために使用されます。これはブール型の属性です。表示されている場合は、自動再生されていないことを意味します。

<video width="658"
 height="444" src="http://www.php.cn/images/first.mp4" poster="http://www.php.cn/images/first.png" autoplay="autoplay" preload="none"></video>

HTML のブール属性の値は true と false ではないことに注意してください。正しい使用方法は、この属性をタグ内で使用して true を示すことです。このとき、属性には値がないか、その値が名前と同じです (ここでは、自動再生は または ); タグ内でこの属性を使用しない場合は false を意味します (ここで自動再生しないのは です)。

(4) ループ属性

<video width="658"
 height="444" src="http://www.php.cn/images/first.mp4" poster="http://www.php.cn/images/first.png" autoplay="autoplay" loop="loop"></video>

は、ビデオがループで再生されるかどうかを指定するために使用されます。これもブール属性です。

(5) コントロール属性

<video width="658"
 height="444" src="http://www.php.cn/images/first.mp4" poster="http://www.php.cn/images/first.png" autoplay="autoplay" preload="none" controls="controls"></video>

Controls 属性は、ページ作成者が再生コントローラーを生成するためにスクリプトを使用していないこと、およびブラウザーが独自の再生コントロール バーを有効にする必要があることをブラウザーに示すために使用されます。

コントロール バーには、再生と一時停止のコントロール、再生の進行状況のコントロール、音量コントロールなどを含める必要があります。

各ブラウザのデフォルトの再生コントロールバーはインターフェースが異なります。私のブラウザに奇妙な問題が発生したため、Firefox と Safari の Video タグが正しく機能していないため、オンラインでこれら 2 つのスクリーンショットしか見つけることができません。

(6) width属性とheight属性

はタグの共通属性なので言うまでもありません。

(7) ソースタグ

<video width="658"
 height="444" poster="http://www.php.cn/images/first.png" autoplay="autoplay" preload="none" controls="controls"><source src="http://www.php.cn/images/first.ogv"
 /><source src="http://www.php.cn/images/first.ogg"
 /></video>

ソースタグはメディアの複数の選択項目を指定するために使用されます (オーディオタグにもこのタグを含めることができるため、ここではビデオの代わりにメディアが使用されます) (ブラウザーは選択のみ可能です) 1) ファイル アドレス。メディア タグが src 属性を使用しない場合にのみ使用できます。

ブラウザは、タグで指定された動画がソースタグの順に再生可能かどうかを確認します（再生できない場合は、動画形式がサポートされていない、動画が存在しないなどの可能性があります）。次のものと交換してください。この方法は、さまざまなブラウザとの互換性を保つために主に使用されます。 Source タグ自体には何の意味もないため、単独で使用することはできません。

このタグには、src、type、media の 3 つの属性が含まれています。

src 属性: video タグと同様に、メディアのアドレスを指定するために使用されます。

Type 属性: src 属性で指定されたメディアのタイプを記述するために使用され、ブラウザがメディアを取得する前にこのカテゴリのメディア形式をサポートしているかどうかを判断するのに役立ちます。

Media 属性: メディアが使用されるメディアを記述するために使用されます。設定されていない場合、デフォルト値は all で、すべてのメディアがサポートされていることを示します。

(8) 完全な例

<video width="658"
 height="444" poster="http://www.php.cn/images/first.png" autoplay="autoplay" preload="none" controls="controls"><source src="http://www.php.cn/images/first.ogv"
 /><source src="http://www.php.cn/images/first.ogg"
 /></video>

このコードは、ページ上のビデオを定義し、このビデオのプレビュー画像がポスターの属性値であり、ブラウザのデフォルトのメディア コントロール バーを表示し、ビデオの要素をプリロードします。データ、ループ、幅 900 ピクセル、高さ 240 ピクセル。

最初に選択されたビデオ アドレスは最初のソース タグの src 属性値、ビデオ カテゴリは Ogg ビデオ、ビデオ コーデックは Theora、オーディオ コーデックは Vorbis、2 番目に選択されたビデオ アドレスはモニターです。二度とない。それでも IE との互換性を維持したい場合は、最後のソース タグの後に Flash プレーヤー タグ セットを追加するか、小さな JavaScript コードを使用できます。

以上がHTML Web ページにビデオを挿入する方法をまとめます。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。