ホームページ > 記事 > ウェブフロントエンド > HTML Web ページにビデオを挿入する方法

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

php中世界最好的语言オリジナル: 2018-01-16 10:01:405973ブラウズ

ここで、ページ内で 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 などのいくつかの属性と、内部で使用されるタグ 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 コードを使用できます。

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