HTML の映像要素 (<video>) は、文書中に映像再生に対応するメディアプレイヤーを埋め込みます。 <video> を音声コンテンツのために使用することもできますが、 <audio> 要素の方がユーザーに取って使い勝手が良いかもしれません。

上記の例は <video> 要素のシンプルな使い方を示しています。 <img> 要素の方法と同様に、 src 属性の中に表示したいメディアへのパスを含めます。他の属性を含めて、映像の幅や高さ、自動再生やループをするかどうか、ブラウザーの標準の映像コントロールを表示するかなどの情報を指定することができます。

開始・終了タグである <video></video> タグの間の内容は、この要素に対応していないブラウザーで代替として表示されます。

ブラウザーは同じ映像形式にすべて対応しているとは限りません。内部の <source> 要素で複数のソースを提供することができ、ブラウザーは理解できる最初のものを使用します。

<video controls>
  <source src="myVideo.mp4" type="video/mp4">
  <source src="myVideo.webm" type="video/webm">
  <p>あなたのブラウザーは HTML5 の video に対応していません。
     こちらが代わりの<a href="myVideo.mp4">映像へのリンク</a>です。</p>
</video>

その他の利用上の注意:

  • controls 属性を指定しないと、 video はブラウザーの標準のコントロールを含めません。 JavaScript と HTMLMediaElement を使用して、独自のコントロールを作成することもできます。詳しくはクロスブラウザーの映像プレイヤーの作成を参照してください。
  • 映像 (および音声) コンテンツを詳細に制御できるよう、 HTMLMediaElement はたくさんの種類のイベントを発生します。
  • object-position プロパティを用いて、要素の枠内での映像の位置を調整することができ、 object-fit プロパティを用いて映像の寸法がどのように枠内に合わせられるかを制御することができます。
  • 映像と同時に字幕を表示するには、 JavaScript と共に <track> 要素と WebVTT を使用します。詳しくは、 HTML5 映像への字幕の追加をご覧ください。

HTML の <video> の使用について一般的な良い情報源として、映像および音声コンテンツの初心者向けチュートリアルがあります。

属性

この要素にはグローバル属性があります。

autoplay
論理型の属性です。この属性が指定された場合、データの読み込みが完了し、再生可能な状態になった時点で即座にコンテンツの再生が始まります。

メモ: 自動的に音声 (あるいは音声トラックを含む映像) を再生するサイトはユーザーにとって不快な体験になる可能性がありますので、可能な限り避けるべきです。自動再生機能が必須である場合は、オプトイン (ユーザーが明示的に有効化することを求める) にするべきです。ただし、ユーザーの制御下で後からソースを設定するメディア要素を作成するときは、この方法が役に立つでしょう。

映像の自動再生を無効にするために autoplay="false" を指定しても機能しません。 <video> タグにこの属性があれば、映像が自動的に再生されます。自動再生を無効にするには、属性を完全に取り除くことが必要です。

buffered
メディアがどれだけの時間分バッファリングされたかを判断するために、読み取ることが可能な属性です。この属性は TimeRanges オブジェクトを持ちます。
controls
この属性が指定された場合、再生、音量、シーク、ポーズの各機能を制御するコントロールを表示します。
crossorigin
この列挙型の属性は、関連画像を取得する際に CORS を使用するかを示します。CORS が有効なリソース は、汚染されることなく <canvas> 要素で再利用できます。次の値が使用できます:
anonymous
クレデンシャルを伴わずにオリジン間要求を実行します。すなわち、Cookie や X.509 証明書がない Origin: HTTP ヘッダーを送信する、あるいは HTTP ベーシック認証を行いません。サーバーが元のサイトに信用情報を付与しない場合 (Access-Control-Allow-Origin: HTTP ヘッダーの設定なし)、画像が汚染され、その使用も制限されます。
use-credentials
クレデンシャルを伴ってオリジン間要求を実行します。すなわち、Cookie や X.509 証明書を伴う Origin: HTTP ヘッダーを送信する、あるいは HTTP ベーシック認証を行います。サーバーが元のサイトに信用情報を付与しない場合 (Access-Control-Allow-Credentials: HTTP ヘッダーに関わらず)、画像が汚染され、その使用も制限されます。
この属性が提供されない場合、リソースは CORS 要求なしで取得され (Origin: HTTP ヘッダーを送信せずに取得)、<canvas> 要素での汚染されない使用が妨げられます。これが無効な場合、列挙型のキーワードに anonymous が指定されたものとして扱われます。追加の情報は CORS 設定属性 を参照してください。
height
映像の表示領域の高さを、 CSS ピクセル値で指定します。 (絶対値に限ります。パーセント値は不可。)
loop
論理型の属性です。指定された場合、ブラウザーは映像の末尾に達すると、自動的に先頭に戻ります。
muted
論理型の属性で、映像に含まれる音声の既定の設定を示します。この属性を設定すると、初期状態が消音になります。既定値は false であり、映像再生時に音声も再生することを表します。
preload
列挙型の属性で、映像が再生される前に、どのコンテンツを読み込むとユーザーに最高の使い勝手をもたらすかについての作者の考えを、ブラウザーに対するヒントとしてを提供するためのものです。以下の値のうちひとつを持つことができます。
  • none: 映像を事前に読み込むべきではないことを示します。
  • metadata: 映像のメタデータ (例えば、長さ) を読み込みます。
  • auto: ユーザーが映像ファイルを使用しないと思われる場合でも、ファイル全体をダウンロードしてよいことを示します。
  • 空文字列: これは auto 値と同義です。

この属性を設定しない場合の既定値はブラウザーが定義します (つまり、ブラウザーが独自の既定値を持つことがあります)。仕様書では metadata にするよう助言しています。

メモ:
  • autoplay 属性は preload より優先します。autoplay を指定すると、言うまでもなくブラウザーは映像を再生するためにダウンロードを始めなければなりません。
  • 仕様書は、ブラウザーがこの属性の値に従うことを強制していません。これは単なるヒントです。
 
intrinsicsize
この属性はブラウザーに、画像の固有の寸法を無視し、この属性で指定された寸法であると見せかけるよう指示します。特に、画像がこれらの次元のラスターであって、画像の naturalWidth/naturalHeight はこの属性で指定された値が返されます。説明
poster
映像のダウンロード中に表示される画像の URL です。この属性が指定されない場合、最初のフレームが利用可能になるまで何も表示されず、その後、最初のフレームをポスターフレームとして表示します。
src
埋め込む映像コンテンツへの URL を指定します。この属性は省略可能です。埋め込む映像の指定には、video 要素のブロック内で <source> を使用することもできます。
width
映像の表示領域の幅を、 CSS ピクセル値で指定します。 (絶対値に限ります。パーセント値は不可)。
playsinline
論理属性で、映像を「インライン」で再生する、すなわち要素の再生エリア内で再生するかを指定します。この属性がないことが、映像を常にフルスクリーンで再生するという意味ではないことに注意してください。

使用上のメモ

CSS でのスタイル付け

<video> 要素は置換要素です。 — display の値は既定で inline ですが、ビューポートの既定の幅と高さは埋め込まれる映像で定義されます。

<video> のスタイル付けについて、特別な考慮事項はありません。よくある戦略は、位置や寸法を設定しやすくして、必要に応じてスタイルやレイアウト情報を提供するために display の値を block に設定することす。動画プレイヤーのスタイル付けの基本は、便利なスタイル付けテクニックをいくつか紹介しています。

トラックの追加と削除の検出

addtrack および removetrack イベントを用いると、 <video> 要素でトラックが追加されたり削除されたりしたことを検出することができます。しかし、これらのイベントは <video> 要素自身に直接送信されるわけではありません。代わりに、 <video>HTMLMediaElement 内にある、要素に追加されたトラックの種類に対応するトラックリストオブジェクトに送信されます。

HTMLMediaElement.audioTracks
メディア要素のオーディオトラックのすべてを含む AudioTrackList です。 addtrack のリスナーをこのオブジェクトに追加すると、新しいオーディオトラックが要素に追加された時に通知を受け取ることができます。
HTMLMediaElement.videoTracks
この VideoTrackList オブジェクトに addtrack リスナーを追加することで、要素に動画トラックが追加されたときに通知を受け取るkとができます。
HTMLElement.textTracks
この TextTrackList オブジェクトに addtrack リスナーを追加することで、要素にテキストトラックが追加されたときに通知を受け取るkとができます。

例えば、次のようなコードで <video> 要素でオーディオトラックが追加されたり削除されたりしたときを検出することができます。

var elem = document.querySelector("video");

elem.audioTrackList.onaddtrack = function(event) {
  trackEditor.addTrack(event.track);
};

elem.audioTrackList.onremovetrack = function(event) {
  trackEditor.removeTrack(event.track);
};

このコードはオーディオトラックが要素で追加および削除されることを監視し、トラックエディターの論理関数を呼び出すことで、エディターにおける利用できるトラックの一覧でトラックを登録や削除を行います。

addtrack および removetrack イベントを監視するには、 addEventListener() を使用することもできます。

単純な映像の例

この例では、アクティブ化されたときに映像を再生し、再生を制御するためにブラウザーの既定の動画コントロールをユーザーに提供します。

<!-- Simple video example -->
<!-- 'Big Buck Bunny' licensed under CC 3.0 by the Blender foundation. Hosted by archive.org -->
<!-- Poster from peach.blender.org -->
<video controls
    src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
    poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"
    width="620">

すみませんが、このブラウザーは埋め込み映像に対応していません。
しかし、<a href="https://archive.org/details/BigBuckBunny_124">ダウンロード</a>
してお好きな映像プレイヤーで見ることはできます。

</video>

映像の再生が始まるまで、 poster 属性で指定された画像がその場所に表示されます。ブラウザーが映像の再生に対応していない場合は、代替テキストが表示されます。

複数のソースの例

この例は、メディアの3つの異なるソースを提供する最後のものをベースにしています。これにより、ブラウザーで対応している映像コーデックに関係なく、映像を見ることができます。

<!-- Using multiple sources as fallbacks for a video tag -->
<!-- 'Elephants Dream' by Orange Open Movie Project Studio, licensed under CC-3.0, hosted by archive.org -->
<!-- Poster hosted by Wikimedia -->
<video width="620" controls
  poster="https://upload.wikimedia.org/wikipedia/commons/e/e8/Elephants_Dream_s5_both.jpg" >
  <source
    src="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4"
    type="video/mp4">
  <source
    src="https://archive.org/download/ElephantsDream/ed_hd.ogv"
    type="video/ogg">
  <source
    src="https://archive.org/download/ElephantsDream/ed_hd.avi"
    type="video/avi">
  Your browser doesn't support HTML5 video tag.
</video>

はじめに WebM を試します。再生できない場合は、MP4 を試します。最後に OGG を試します。 video タグに対応していない場合はフォールバックメッセージを表示しますが、すべてのソースに失敗した場合は表示しません。

映像へのサーバーの対応

サーバーで映像の MIME タイプが適切に設定されていないと、映像が表示されないか X 印がついた灰色のボックスが表示される (JavaScript が有効である場合) 可能性があります。

Ogg Theora 形式で映像を提供する場合、 Apache Web Server では "video/ogg" MIME タイプに映像ファイルの拡張子を追加すると問題が解決します。もっとも一般的な映像ファイルの拡張子は ".ogm", ".ogv", ".ogg" です。"/etc/apache" の "mime.types" ファイルを編集するか、 httpd.conf"AddType" の設定ディレクティブを使用してください。

AddType video/ogg .ogm
AddType video/ogg .ogv
AddType video/ogg .ogg

WebM 形式で映像を提供する場合、 Apache Web Server では "/etc/apache" の "mime.types" ファイルまたは httpd.conf の "AddType" ディレクティブで映像ファイルの拡張子 (一般的には ".webm") を MIME type "video/webm" に追加することで問題が解決します。

AddType video/webm .webm

ウェブホスティングサービスでは、全体の更新が行われるまでの間、新技術向けに MIME タイプの設定を変更するための簡単なインターフェイスを提供しているかもしれません。

アクセシビリティの考慮事項

映像には、実際にコンテンツを説明する字幕と文字化情報 (transcript) を提供するべきです (実装方法について詳しくは HTML5 映像への字幕の追加 を参照してください) 。字幕によって、聴力を失った人が映像の再生時に音声の内容を理解する事ができるようになるのに対し、文字化情報を使用すると、音声コンテンツを理解するのに時間が掛かる人が、自分に合ったペースと書式で内容を確認できるようになります。

自動字幕サービスが使用されている場合は、生成されたコンテンツが元の映像を正しく表現しているかを確認することが重要です。

字幕や文字化情報では、話されるセリフに加えて、重要な情報を伝える音楽や音響効果も識別できるようにしてください。これには感情や口調も含みます。

14
00:03:14 --> 00:03:18
[ドラマチックなロック音楽]

15 
00:03:19 --> 00:03:21
[ささやき] 遠くにあるものは何ですか?

16
00:03:22 --> 00:03:24
それは……それは……

16 00:03:25 --> 00:03:32
[ぶつかる大きな音]
[皿の割れる音]

字幕は映像の主題を邪魔しないようにしてください。これは align VTT キュー設定を使用して位置を決めることができます。

技術的概要

コンテンツカテゴリ フローコンテンツ, 記述コンテンツ, 埋め込みコンテンツ。 controls 属性を持つ場合は、対話的コンテンツおよび知覚可能コンテンツ。
許可されている内容

要素が src 属性を持つ場合: 0 個以上の <track> 要素とそれに続く、メディア要素を含まない透過的コンテンツ。すなわち <audio> 要素や <video> 要素を子要素として配置してはなりません。

その他の場合: 0 個以上の <source> 要素、0 個以上の <track> 要素、メディア要素を含まない透過的コンテンツ。すなわち <audio> 要素や <video> 要素を子要素として配置してはなりません。

タグの省略 不可。開始と終了タグの両方が必要。
許可されている親要素 埋め込みコンテンツを受け入れるすべての要素。
許可されている ARIA ロール application
DOM インターフェイス HTMLVideoElement

仕様書

仕様書 状態 備考
HTML Living Standard
<video> の定義
現行の標準  

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 3Edge 完全対応 ありFirefox 完全対応 3.5IE 完全対応 9Opera 完全対応 10.5Safari 完全対応 3.1WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
autoplayChrome 完全対応 3Edge 完全対応 ありFirefox 完全対応 3.5IE 完全対応 9Opera 完全対応 10.5Safari 完全対応 3.1WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 10
補足
完全対応 10
補足
補足 Only available for videos that have no sound or have the audio track disabled.
Samsung Internet Android 完全対応 あり
bufferedChrome ? Edge 完全対応 ありFirefox 完全対応 4IE ? Opera 完全対応 ありSafari ? WebView Android ? Chrome Android ? Edge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS ? Samsung Internet Android ?
controlsChrome 完全対応 3Edge 完全対応 ありFirefox 完全対応 3.5IE 完全対応 9Opera 完全対応 10.5Safari 完全対応 3.1WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
crossoriginChrome ? Edge 完全対応 ありFirefox 完全対応 12IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile 完全対応 ありFirefox Android 完全対応 14Opera Android ? Safari iOS ? Samsung Internet Android ?
heightChrome 完全対応 3Edge 完全対応 ありFirefox 完全対応 3.5IE 完全対応 9Opera 完全対応 10.5Safari 完全対応 3.1WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
intrinsicsize
実験的非標準
Chrome 完全対応 71
無効
完全対応 71
無効
無効 From version 71: this feature is behind the #enable-experimental-productivity-features preference. To change preferences in Chrome, visit chrome://flags.
Edge ? Firefox ? IE 未対応 なしOpera 完全対応 58Safari 未対応 なしWebView Android 完全対応 71
無効
完全対応 71
無効
無効 From version 71: this feature is behind the #enable-experimental-productivity-features preference.
Chrome Android 完全対応 71
無効
完全対応 71
無効
無効 From version 71: this feature is behind the #enable-experimental-productivity-features preference. To change preferences in Chrome, visit chrome://flags.
Edge Mobile ? Firefox Android ? Opera Android 完全対応 58Safari iOS 未対応 なしSamsung Internet Android ?
loopChrome 完全対応 3Edge 完全対応 ありFirefox 完全対応 11IE 完全対応 9Opera 完全対応 10.5Safari 完全対応 3.1WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 14Opera Android 完全対応 ありSafari iOS 完全対応 6Samsung Internet Android 完全対応 あり
mutedChrome 完全対応 30Edge 完全対応 ありFirefox 完全対応 11IE 完全対応 10Opera 完全対応 ありSafari 完全対応 5WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 14Opera Android 完全対応 ありSafari iOS ? Samsung Internet Android 完全対応 あり
playedChrome ? Edge 完全対応 ありFirefox 完全対応 15IE ? Opera 完全対応 ありSafari ? WebView Android ? Chrome Android ? Edge Mobile 完全対応 ありFirefox Android 完全対応 15Opera Android 完全対応 ありSafari iOS ? Samsung Internet Android ?
posterChrome 完全対応 3Edge 完全対応 ありFirefox 完全対応 3.6IE 完全対応 9Opera 完全対応 10.5Safari 完全対応 3.1WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
preloadChrome 完全対応 3Edge 完全対応 ありFirefox 完全対応 4IE 完全対応 9Opera 完全対応 ありSafari 完全対応 3.1WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
srcChrome 完全対応 3Edge 完全対応 ありFirefox 完全対応 3.5IE 完全対応 9Opera 完全対応 10.5Safari 完全対応 3.1WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
widthChrome 完全対応 3Edge 完全対応 ありFirefox 完全対応 3.5IE 完全対応 9Opera 完全対応 10.5Safari 完全対応 3.1WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

関連情報