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

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

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

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


video 要素の仕様

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

ただし、上記どちらの場合でも子孫に他の audio 要素や、video 要素を含んではいけません。

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

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

この要素で使用できる属性

詳細説明

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.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> 

主要ブラウザの対応

IE11
Edge(EdgeHTML)
Edge(Chromium)
Chrome
Firefox
Safari
iOS Safari
Android Chrome

仕様書の該当箇所

4.8.9 The video element

用途から目的の要素を探す

用途から HTML5 の要素を逆引きできます。

テキストに対する意味づけを行いたい
テキストの編集を示したい
改行や折り返しを指定したい
上付きや下付きを指定したい
テキストの書字方向を制御したい
テキストにルビをふりたい
箇条書きなどリストを表したい
セクションを定義したい
コンテンツをグループ化したい
画像や映像などを埋め込みたい
スクリプトやスタイルを埋め込みたい
フォーム関連の要素
テーブル関連の要素
ドキュメントにメタデータを付与したい
インタラクティブな要素
その他

このページの上部へ