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

Video タグの使用

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

(1) src属性とposter属性

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

<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 を示すことです。このとき、この属性には値がないか、その値が名前と同じです (ここで、自動再生は

(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 で、すべてのメディアがサポートされていることを示します。