文書に動画コンテンツを埋め込む

video要素は、動画コンテンツを文書内に埋め込みます。この要素に対応しているブラウザでは、プラグインを使わずに動画を再生することができます。

動画ファイルの指定方法

動画ファイルは、video要素のsrc属性で指定することができます。

<video src="example.mp4"></video>

複数の再生候補（形式の異なる動画データ）を用意する場合は、video要素内にsource要素を配置して、そのsrc属性で動画ファイルを指定します。

<video>

<source src="example.mp4">
<source src="example.webm">
<source src="example.ogv">

</video>

上記の例では、3タイプの動画ファイルを指定しています（内容は全て同じ）。このように指定しておくことで、ブラウザ側が対応している形式で再生されるようになります。例えば、MP4形式に対応しているブラウザであれば、example.mp4 が再生されることになります。

• ブラウザが複数の形式に対応している場合は、先に記述された動画データが使用されます。

代替コンテンツについて

video要素の内容には、この要素に対応していないブラウザ向けの代替コンテンツを配置できます。

次の例では、video要素に対応していない場合は、動画ファイルへのリンクが表示されるように指定しています。（代替コンテンツはsource要素よりも後に配置します）

<video>

<source src="example.mp4">
<source src="example.webm">
<source src="example.ogv">

<a href="example.mpg">動画を見る</a>

</video>

• video要素は、親要素のコンテンツ・モデルを継承します（トランスペアレント）。そのため、親要素の種類によっては、代替コンテンツとして配置できない要素もあるので注意が必要です。

poster属性について

poster属性は、動画の再生前に表示される静止画を指定します。動画の内容が連想できるような画像が適しています。

<video src="example.mp4" poster="example.jpg"></video>

preload属性について

preload属性は、事前ロードに関する情報をブラウザ側に伝えます。指定できる値は次の3つです。（ただし、必ずしも指定した通りの挙動になるとは限らないようです）

none

ページが表示された時点では、動画データの読み込みは行いません。（動画を再生する時にデータの読み込みが開始されます）

metadata

ページが表示された時に、動画のメタデータ（サイズ、再生時間、最初のフレーム、等の情報）だけを読み込みます。

auto

ページが表示された時に、動画データの読み込みを開始します。

<video src="example.mp4" preload="metadata"></video>

• preload属性の値に空文字（preload=""）を指定した場合は、auto を指定した時と同じ扱いになります。
• この属性自体が指定されなかった場合は、事前ロードの挙動はブラウザ側に任されます。
• 同時にautoplay属性が指定されている場合は、上記の指定にかかわらず、ページが表示され時に動画データの読み込みが開始されます。

width属性とheight属性について

width属性とheight属性は、表示領域の横幅と高さをピクセル数で指定します。

<video src="example.mp4" width="640" height="360"></video>

autoplay属性について

autoplay属性は、動画の自動再生を指定します。この属性を指定すると、ページを読み込んだ時点で自動的に再生されるようになります。

<video src="example.mp4" autoplay></video>

• この属性を指定する場合は、同時にmuted属性を指定することをおすすめします。（ブラウザによっては、muted属性がないと自動再生されない場合があります）

loop属性について

loop属性は、動画のループ再生を指定します。この属性を指定すると、その動画が繰り返し再生されるようになります。

<video src="example.mp4" loop></video>

muted属性について

muted属性は、音声を出さずに再生することを指定します。

<video src="example.mp4" muted></video>

controls属性について

controls属性は、動画のコントローラ（再生、停止、ボリューム、等）を表示することを指定します。

<video src="example.mp4" controls></video>

playsinline属性について

playsinline属性は、動画をインライン（表示領域内）で再生することを指定します。

<video src="example.mp4" playsinline></video>

• これは、デフォルトで全画面表示するようなブラウザに向けた指定となります。
• 状況によっては、この属性がないと動画が再生されない場合があるようなので、表示領域内で再生する場合は指定しておいた方が良いでしょう。