video 要素動画ファイルを埋め込む

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

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

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


さらに詳細な説明を見る

サンプルソースを見る

video 要素の仕様

カテゴリ
  • インタラクティブ・コンテンツとなるのは controls 属性をもつ場合
コンテンツモデル
  • src 属性をもつ場合は、0個以上の track 要素に続きトランスペアレント
  • src 属性をもたない場合は、0個以上の source 要素、0個以上の track 要素に続きトランスペアレント

つまり、video 要素の開始、終了タグ、及び source 要素、track 要素を削除した場合でも、コンテンツモデル的に妥当となる内容であれば内包できます。

ただし、子孫に他の audio 要素や、video 要素を含んではいけません。

この要素を使用できる文脈

エンベッディッド・コンテンツが期待される場所

この要素で使用できる属性
DOM インタフェース
interface HTMLVideoElement : HTMLMediaElement {
           attribute unsigned long width;
           attribute unsigned long height;
  readonly attribute unsigned long videoWidth;
  readonly attribute unsigned long videoHeight;
           attribute DOMString poster;
};

詳細説明

video 要素に指定できる属性は下記の通りです。

属性 概要
src 属性 埋め込む動画ファイルの URI を指定します。
crossorigin 属性 CORS (Cross-Origin Resource Sharing / クロスドメイン通信) 設定属性です。サードパーティ (元の文書とは異なるオリジン) から読み込んだ動画に対するアクセスについて指定します。
poster 属性 動画が表示できない場合や動画を再生する準備が整うまでの間、表示させる画像の URI を指定します。
preload 属性 動画ファイルを事前に読み込んでおくかを指定します。この取り扱いはブラウザによりますので、確実に指定した通りの挙動となるかはわかりません。なお、autoplay 属性が同時に指定されている場合は、この属性の指定は無視されます。
autoplay 属性 自動的に再生します。ただし、閲覧者の意思と関係なく再生される音声は迷惑なことが多いですので、使用には注意が必要です。
mediagroup 属性 要素のグループ名を指定します。同一文書内で、同じ mediagroup 属性値を持つ video 要素や audio 要素は、グループとして扱われ、連続再生などが可能になります。
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.wenm" type="video/wenm" />
 <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> 

W3C HTML5 仕様書

4.8.6 The video element