<video></video>

更新日
仕様 HTML Living Standard
分類 フロー・コンテンツ / フレージング・コンテンツ / エンベッディッド・コンテンツ / インタラクティブ・コンテンツ(controls属性がある場合) / パルパブル・コンテンツ
利用場所 エンベッディッド・コンテンツが置ける場所
内容 src属性がある場合:0個以上のtrack要素、その後にトランスペアレント(親要素のコンテンツモデルを継承) / src属性がない場合:0個以上のsource要素、その後に0個以上のtrack要素、その後にトランスペアレント ただし、どちらの場合もvideo要素とaudio要素は含められない

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


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

<video poster="example.jpg" preload="metadata" width="640" height="360" controls>
<source src="example.mp4" type="video/mp4">
<source src="example.webm" type="video/webm">
<source src="example.ogv" type="video/ogg">
</video>

属性
任意属性
src="" 動画の指定 URL 埋め込む動画ファイルのURL
poster="" 動画の代わりとなる静止画 URL 画像ファイルのURL
preload="" データの事前ロード none 事前ロードを行わない
metadata メタデータだけは事前ロードする
auto データ全体を事前ロードする
auto と同じ
width="" 表示領域の幅 数値 ピクセル数
height="" 表示領域の高さ 数値 ピクセル数
autoplay 自動再生を行う autoplay 値は省略可能
loop ループ再生を行う loop 値は省略可能
muted 音声を出さない muted 値は省略可能
controls コントローラを表示する controls 値は省略可能
crossorigin="" オリジンにあるリソースの処理方法 anonymous 認証情報を使用せずにCORSリクエストを送信
use-credentials 認証情報を使用してCORSリクエストを送信
anonymous と同じ
playsinline [+]インライン(表示領域内)で再生する playsinline 値は省略可能
廃止属性(HTML Living Standardでは未定義)
mediagroup="" [×]グループ名 文字列 属するグループの名前
  • グローバル属性itemprop属性を指定する場合は、src属性も指定しなければなりません。
  • autoplay属性の指定は、preload属性の指定よりも優先されます。
  • crossorigin属性の値を省略した場合は anonymous になります。属性そのものを省略した場合はCORSリクエストを行いません。

動画ファイルの指定方法

動画ファイルは、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>

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>
  • これは、デフォルトで全画面表示するようなブラウザに向けた指定となります。
  • 状況によっては、この属性がないと動画が再生されない場合があるようなので、表示領域内で再生する場合は指定しておいた方が良いでしょう。
旧HTMLからの変更点
  • HTML5:video要素が定義されました。
  • HTML5.1:mediagroup属性が廃止されました。
  • HTML LS:playsinline属性が追加されました。

使用例

2つの再生候補を設定した例

<video poster="media/poster.jpg" preload="metadata" width="640" height="360" controls muted>

<source src="media/example.webm" type="video/webm">
<source src="media/example.mp4" type="video/mp4">

<p>動画を再生することができませんでした。</p>

</video>

表示例
  • 上記のサンプル動画は、サーバーの転送量を抑えるために超低画質で作成しています(データサイズは930KB前後)。
  • 音楽データはA Year Ago by NEFFEX(YouTube オーディオライブラリ)を使わせていただきました。(初期状態ではミュートされています)
  • ブラウザの幅を狭くしていくと、それに合わせて動画の表示サイズも縮小されていきます。(設定方法については、このページのソースコードを参考にしてください)