video要素

video要素は、動画を、ドキュメントへ埋め込む要素。

カテゴリー フロー・コンテンツ、フレージング・コンテンツ、エンベディッド・コンテンツ、パルパブル・コンテンツ、フォーム関連要素。
controls属性を指定した場合、インタラクティブ・コンテンツ。
コンテキスト エンベディッド・コンテンツを内包できる要素内で使用できる。
コンテンツ・モデル src属性を指定した場合、０個以上のtrack要素、その後、トランスペアレント・コンテンツ・モデル。ただし、メディア要素（video要素とaudio要素）を子孫要素に持つことはできない。
src属性を指定しなかった場合、０個以上のsource要素、次に、０個以上のtrack要素、その後、トランスペアレント・コンテンツ・モデル。ただし、メディア要素（video要素とaudio要素）を子孫要素に持つことはできない。
属性 グローバル属性。
任意属性：src属性、crossorigin属性、poster属性、preload属性、autoplay属性、mediagroup属性、loop属性、muted属性、controls属性、width属性、height属性。
ブラウザ対応

構文

video要素に動画ファイルを指定

video要素のsrc属性に、動画のURLを指定する場合。

<video src="URL">代替コンテンツ</video>

src属性に指定した動画が利用できない場合、代替コンテンツを表示する。

source要素に動画ファイルを指定

source属性のsrc属性に、動画のURLを指定する場合。

<video>
	<source src="URL" type="MIMEタイプ">
	代替コンテンツ
</video>

src属性に指定した動画が利用できない場合、代替コンテンツを表示する。

MIMEタイプ
  • video/mp4：MP4
  • video/webm：WebM
  • video/ogg：Ogg

要点

  • video要素は、動画を、ドキュメントへ埋め込む要素である。
  • video要素は、MP4、WebM、Oggの３つの動画ファイル形式に対応している。ただし、各ブラウザが全ての動画ファイル形式に対応しているわけではない。
  • video要素は、HTML5にて新たに導入された要素である。

動画ファイル形式別ブラウザ対応

動画ファイル形式 ブラウザ対応
MP4
WebM
Ogg

属性

任意属性

属性 説明
src属性 埋め込む動画ファイルのURLを指定する属性。
crossorigin属性 CORSの設定をする属性。
poster属性 埋め込む動画の代わりに表示する画像ファイルのURLを指定する属性。
preload属性 ページ読み込み時に、動画ファイルも読み込むべきかどうかを指定する属性。
autoplay属性 埋め込み動画を自動再生するかどうかを指定する属性。
mediagroup属性 メディアグループ名を指定する属性。
loop属性 埋め込み動画をループ再生（繰り返し再生）するかどうかを指定する属性。
muted属性 埋め込み動画の音をミュート（消音）するかどうかを指定する属性。
controls属性 埋め込み動画を制御するユーザー・インターフェイス（UI）を表示するかどうかを指定する属性。
width属性 埋め込む動画の幅を指定する属性。
height属性 埋め込む動画の高さを指定する属性。

サンプルコード

MP4

video要素に動画ファイルを指定
<video src="sample.mp4">代替コンテンツ</video>
source要素に動画ファイルを指定
<video>
	<source src="sample.mp4" type="video/mp4">
	代替コンテンツ
</video>

WebM

video要素に動画ファイルを指定
<video src="sample.webm">代替コンテンツ</video>
source要素に動画ファイルを指定
<video>
	<source src="sample.webm" type="video/webm">
	代替コンテンツ
</video>

Ogg

video要素に動画ファイルを指定
<video src="sample.ogg">代替コンテンツ</video>
source要素に動画ファイルを指定
<video>
	<source src="sample.ogg" type="video/ogg">
	代替コンテンツ
</video>

サンプル

HTMLソースコード

<p>video要素に動画ファイルを指定： <video src="sample-video.mp4" controls style="vertical-align: middle;">sample-video.mp4を再生できないようです。</video></p>
<p>source要素に動画ファイルを指定： 
	<video controls style="vertical-align: middle;">
		<source src="sample-video.mp4" type="video/mp4">
		sample-video.mp4を再生できないようです。
	</video>
</p>

実際の表示

video要素に動画ファイルを指定：

source要素に動画ファイルを指定：