HTML Webページに動画を挿入する方法をまとめます。

ここで、ページ内で video タグを使用したい場合は、Ogg Theora または VP8 をサポートする状況 (これに何も起こらない場合) (Opera、Mozilla、Chrome) と、H をサポートする状況の 3 つの状況を考慮する必要があります。 264 (Safari、IE 9、Chrome)、サポートされていません (IE6、7、8)。さて、ビデオ タグの使用、ビデオ オブジェクトで使用できるメディア属性とメソッド、メディア イベントなど、技術的な観点から HTML 5 ビデオを理解しましょう。この記事では主に HTML にビデオを挿入する方法の概要を紹介します。困っている友達が参考になれば幸いです。

Video タグの使用法

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

(1) src属性とposter属性

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

<video width="658"
 height="444" src="http://www.youname.com/images/first.mp4" 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 を示すことです。このとき、属性には値がないか、その値が名前と同じです (ここでは、自動再生は 88395cc09d20900dd400beb3fbdab712 または ba7a01034e4bb3636d00f67d94d04b0c); タグ内でこの属性を使用しない場合は false を意味します (ここで自動再生しないのは 19e1f8ade8f7b36b7291bedfcc4c695e です)。

(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 で、すべてのメディアがサポートされていることを示します。 c9ccee2e6ea535a969eb3f532ad9fe89 タグの media 属性について考えたことはありますか?同じ同じ同じ。

(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 コードを使用できます。

H5 を使用してオーディオとビデオを操作する方法

html5 ビデオ再生チュートリアル

HTML5 ビデオとオーディオの実装手順

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