プラグインを使わずに動画を再生する

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要素に対応していない場合はobject要素を、それも対応していない場合はリンクが表示されるように指定しています。（代替コンテンツはsource要素よりも後に配置します）

<video>

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

<object data="example.mpg">
<param name="src" value="example.mpg">
<a href="example.mpg">動画を見る</a>
</object>

</video>

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

poster属性について

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

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

preload属性について

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

none

先読みを必要としていない（この動画は再生されるかどうか分からない、できるだけトラフィックを抑えたい）

metadata

動画のメタデータ（サイズ、再生時間、最初のフレーム、などの情報）だけは先読みしてほしい

auto

トラフィックは気にしないから動画全体を先読みしてほしい

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

• preload属性に空文字（preload=""）を指定した場合は、auto を指定した時と同じ扱いになります。
• この属性自体が指定されなかった場合は、先読みの挙動はブラウザ側に任されることになります。

mediagroup属性について

• この属性は、HTML 5.1では廃止されました。

mediagroup属性は、その動画が属しているメディアグループの名前を指定します。複数のメディア要素（video要素とaudio要素）に同じ名前を付けることにより、それらを1つのグループとして連携させることが可能になるようです。（詳細未確認）

次の例では、movieというグループ名を指定しています。

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

width属性とheight属性について

width属性とheight属性は、動画の幅と高さをピクセル数で指定します。

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

autoplay属性について

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

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

loop属性について

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

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

muted属性について

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

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

controls属性について

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

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