HTML Tag Reference

video 要素

動画ファイルを埋め込む

video 要素は、文書内に動画ファイルを埋め込みます。HTML 4.01 などでは、embed 要素や object 要素による動画ファイルの埋め込みは可能でしたが、ブラウザプラグインによる再生を前提としたものでした。

video 要素は、プラグインを必要とせず、ブラウザの基本機能のみで動画の再生を可能にします。

※ 動画を再生するには、サーバから正しい MIME Type でファイルが提供される必要があり、場合によってはサーバ側での設定が必要になります。

video 要素の仕様

カテゴリ: インタラクティブ・コンテンツ
エンベッディッド・コンテンツ
パルパブル・コンテンツ
フレージング・コンテンツ
フロー・コンテンツ
インタラクティブ・コンテンツとなるのは controls 属性をもつ場合
コンテンツモデル: src 属性をもつ場合は、0個以上のtrack 要素に続きトランスペアレント・コンテンツ
src 属性をもたない場合は、0個以上のsource 要素、0個以上の track 要素に続きトランスペアレント・コンテンツ
ただし、上記どちらの場合でも子孫に他の audio 要素や、video 要素を含んではいけません。
この要素を使用できる文脈: エンベッディッド・コンテンツが期待される場所
この要素で使用できる属性: グローバル属性
src 属性
crossorigin 属性
poster 属性
preload 属性
autoplay 属性
playsinline 属性
loop 属性
muted 属性
controls 属性
width 属性
height 属性

詳細説明

video 要素に指定できる属性は下記の通りです。より詳しい解説は各属性のページをご覧ください。

属性	概要
src 属性	埋め込む動画ファイルの URI を指定します。
crossorigin 属性	CORS （Cross-Origin Resource Sharing / クロスドメイン通信）設定属性です。サードパーティ（元の文書とは異なるオリジン）から読み込んだ動画に対するアクセスについて指定します。
poster 属性	動画が表示できない場合や動画を再生する準備が整うまでの間、表示させる画像の URI を指定します。
preload 属性	動画ファイルを事前に読み込んでおくかを指定します。この取り扱いはブラウザによりますので、確実に指定した通りの挙動となるかはわかりません。なお、autoplay 属性が同時に指定されている場合は、この属性の指定は無視されます。
autoplay 属性	自動的に再生します。ただし、閲覧者の意思と関係なく再生される音声は迷惑なことが多いですので、使用には注意が必要です。
playsinline 属性	playsinline 属性は、video 要素によって埋め込まれた映像を「インライン」で再生するように指定します。
loop 属性	再生が終わったらまた最初から再生を開始する、エンドレス再生を行うように求めます。
muted 属性	ミュートした状態で再生します。
controls 属性	動画ファイルの再生をコントロールするインタフェースを表示させます。この表示はブラウザに依存します。
width 属性	動画を表示する際の横幅を px で指定します。
height 属性	動画を表示する際の高さを px で指定します。

preload 属性

preload 属性には下記の値が指定できます。

属性値	概要
none	動画が必ず再生されるとは限らない、または不必要なトラフィックを避けたいといった意思をブラウザに伝えます。不要な読み込みを避けられるかもしれません。
metadata	そのリソースのメタデータ（再生時間などの情報）だけは先に取得しておくことをブラウザに勧めます。
auto	サーバのトラフィックなどは気にせず、閲覧者のニーズを優先してリソース全体をダウンロード開始してよいということをブラウザに伝えます。属性値が空の場合はこの扱いとなります。

ブラウザのサポート状況と対応フォーマット

	Chrome	Firefox	Internet Explorer	Opera	Safari
video 要素のサポート	3.0～	3.5～	9.0～	10.50～	3.1～
WebM（VP8 / Vorbis）	○	○	○ 要プラグイン	○	○ 要プラグイン
Ogg（Theora / Vorbis）	○	○	×	○	○ 要プラグイン
MP4（H.264 / AAC or MP3）	△ Chromium を除く	△ 要コーデック	○	×	○

video 要素のサンプルソース

<!-- src 属性によって読み込む例 --><video src="/sample.mp4" controls="controls" poster="/sample.jpg"> <p>  サンプルが視聴できます。ブラウザで再生できない場合は、下記からダウンロードしてご試聴ください。  <a href="/sample.mp4" type="video/mp4">ファイルのダウンロードはこちら（MP4 / 1.2MB）</a> </p></video>

<!-- source 要素によって 3種類のフォーマットを用意した例 --><video controls="controls" poster="/sample.jpg"> <source src="/sample.ogg" type="video/ogg" /> <source src="/sample.webm" type="video/webm" /> <source src="/sample.mp4" type="video/mp4" /> <p>  サンプルが視聴できます。ブラウザで再生できない場合は、下記からダウンロードしてご試聴ください。  <a href="/sample.mp4" type="video/mp4">ファイルのダウンロードはこちら（MP4 / 1.2MB）</a> </p></video>

<!-- track要素によってテキストトラックを提供した例 --><video src="/seminar.mp4" controls="controls" poster="/sample.jpg"> <track kind="captions" src="seminar.ja.vtt" srclang="ja" label="日本語" /> <track kind="subtitles" src="seminar.en.vtt" srclang="en" label="English" /> <p>  セミナーの動画が再生できます。ブラウザで再生できない場合は、下記からダウンロードしてご利用ください。  <a href="/seminar.mp4" type="video/mp4">ファイルのダウンロードはこちら（MP4 / 1.2MB）</a> </p></video>

<!-- JavaScript によって、動画ファイルの再生やボリュームを操作する例 --><video id="sample" src="sample.mp4" poster="/sample.jpg"></video><div> <button onclick="document.getElementById('sample').play()">再生</button> <button onclick="document.getElementById('sample').pause()">一時停止</button> <button onclick="document.getElementById('sample').volume+=0.1">ボリュームを上げる</button> <button onclick="document.getElementById('sample').volume-=0.1">ボリュームを下げる</button></div>