HTMLページに動画を挿入する方法

Video タグの使用

Video タグには、src、poster、preload、autoplay、loop、controls、width、height などのいくつかの属性も含まれています。内部的に使用されるタグ として。 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>

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

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

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

(推奨チュートリアル: html 入門チュートリアル )

(3) autoplay 属性

は、名前を見れば用途がわかるもう 1 つの属性です。 。 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 または 51de4309daaa2bcb5dd97e62ed583586); タグ内でこの属性を使用しないことは 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>

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

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

推奨される関連ビデオ チュートリアル: html ビデオ チュートリアル

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