videoタグ

HTML5

videoは、動画を埋め込むタグです。

解説

videoタグを使うと、プラグインのインストールが不要で簡単に動画を埋め込むことができます。

環境によって異なるフォーマットのファイルを用意したい場合は、子要素にsourceタグを指定します。

カテゴリー (自カテゴリ)	フロー・コンテンツフレージング・コンテンツエンベッディッド・コンテンツインタラクティブ・コンテンツ
コンテキスト (親カテゴリ)	エンベッディッド・コンテンツを許可する場所
コンテンツ・モデル (子カテゴリ)	trackタグ、sourceタグ

videoタグには以下の属性が指定できます。

【属性】
属性	説明
src	動画ファイルを指定する（例）src="sample.mp4"
poster	ポスター画像を指定する（例）poster="sample.jpg" ※ポスター画像とは、どのような動画かを表す画像です
autoplay	動画を自動再生する（例）自動再生したい場合 ⇒ autoplay
controls	コントローラー（再生・停止ボタン等）を表示する（例）コントローラーを表示したい場合 ⇒ controls
loop	繰り返し再生する（例）繰り返し再生をしたい場合 ⇒ loop
width	表示エリアの幅を指定（例）width="300"
height	の表示エリアの高さを指定（例）height="200"
preload	事前読込み方法を指定する　auto：事前読込みする（デフォルト）　metadata：メタデータのみ事前読込みする　none：事前読込みしない（例）preload="none"

その他のグローバル属性値については、グローバル属性をご覧ください。

<video src="sample.mp4">
  <p>お使いの環境ではvideoタグに対応していません。</p>
</video>

初期表示時点では動画は再生されません。

<video src="sample.mp4" autoplay>
  <p>お使いの環境ではvideoタグに対応していません。</p>
</video>

初期表示時点で動画は再生されます。

<video src="sample.mp4" autoplay controls>
  <p>お使いの環境ではvideoタグに対応していません。</p>
</video>

初期表示時点で動画は再生され、コントローラーが表示されます。

<video poster="sample.jpg">
  <source src="sample.mp4">
  <source src="sample.webm">
  <p>お使いの環境ではvideoタグに対応していません。</p>
</video>