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

ここで、ページ内で video タグを使用したい場合は、Ogg Theora または VP8 をサポートする状況 (これに何も起こらない場合) (Opera、Mozilla、Chrome) と、H をサポートする状況の 3 つの状況を考慮する必要があります。 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.youname.com/images/first.png" autoplay="autoplay"></video>

(2) preload 属性

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

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

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

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

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

(3) autoplay 属性

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

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

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

(4) ループ属性

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

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

(5) Controls 属性

<video width="658"
 height="444" src="http://www.youname.com/images/first.mp4" poster="http://www.youname.com/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.youname.com/images/first.png" autoplay="autoplay" preload="none" controls="controls"><source src="http://www.youname.com/images/first.ogv"
 /><source src="http://www.youname.com/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.youname.com/images/first.png" autoplay="autoplay" preload="none" controls="controls"><source src="http://www.youname.com/images/first.ogv"
 /><source src="http://www.youname.com/images/first.ogg"
 /></video>

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

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

これらの事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

関連書籍:

H5の画像のズレを解決する方法

HTML5のシングルページでジェスチャースライド画面切り替えを実装する方法

H5のカレンダー確認機能の作り方

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