HTML <video> 動画埋め込み要素

試してみましょう

<video controls width="250">
  <source src="/shared-assets/videos/flower.webm" type="video/webm" />

  <source src="/shared-assets/videos/flower.mp4" type="video/mp4" />

  Download the
  <a href="/shared-assets/videos/flower.webm">WEBM</a>
  or
  <a href="/shared-assets/videos/flower.mp4">MP4</a>
  video.
</video>

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

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

属性

他のすべての HTML 要素と同様に、この要素はグローバル属性に対応しています。

autoplay

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

メモ: 現行のブラウザーでは、音声（またはミュートされていない音声トラック付きの動画）が自動再生されないように設定されています。これは、自動的に音声が再生されるサイトはユーザーにとって不快な体験になり得るからです。正しい自動再生の使い方についての追加情報は autoplay ガイドを参照してください。

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

メモ: loading="lazy" 属性が設定された動画は、その要素がビューポートの近くまたはビューポート内に表示されるまで、ダウンロードや自動再生が開始されません。

controls

この属性が指定された場合、再生、音量、シーク、ポーズの各機能を制御するコントロールを表示します。

controlslist

controlslist 属性が指定されていると、ブラウザー自身のコントロールのセットを表示する場合（例えば controls 属性が設定されている場合）、video 要素に表示するコントロールを選択するのを補助します。

指定できる値は nodownload, nofullscreen, noremoteplayback です。

disablepictureinpicture 属性を使用すると、ピクチャインピクチャモード（およびコントロール）を無効にすることができます。

crossorigin

列挙型の属性で、関連画像を取得する際に CORS を使用するかどうかを示します。 CORS が有効なリソースは、汚染されることなく <canvas> 要素で再利用することができます。許可される値は次の通りです。

anonymous

資格情報なしでオリジン間リクエストを実行します。すなわち、 Origin: HTTP ヘッダーを送信する際に、 Cookie や X.509 証明書を送信したり、 HTTP ベーシック認証を行ったりしません。サーバーが元のサイトに資格情報を付与しない場合 (Access-Control-Allow-Origin: HTTP ヘッダーの設定なし)、リソースが汚染され、その使用が制限されます。

use-credentials

資格情報を使用してオリジン間リクエストを実行します。すなわち、 Origin: HTTP ヘッダーを送信する際に Cookie や資格情報を送信したり、 HTTP ベーシック認証を行ったりします。サーバーが元のサイトに（Access-Control-Allow-Credentials: HTTP ヘッダーを通して）資格情報を与えない場合、リソースが汚染され、その使用が制限されます。

この属性が存在しない場合、リソースは CORS なしのリクエストで（すなわち Origin: HTTP ヘッダーを送信せずに）取得され、 <canvas> 要素における汚染されない使用が妨げられます。これが無効な場合、列挙型のキーワードに anonymous が指定されたものとして扱われます。追加の情報は CORS 設定属性を参照してください。

disablepictureinpicture

ブラウザーにピクチャインピクチャのコンテキストメニューを表示させないようにしたり、場合によっては自動的にピクチャインピクチャを要求しないようにします。

disableremoteplayback

論理属性で、有線（HDMI, DVI など）や無線（Miracast, Chromecast, DLNA, AirPlay など）を使用して接続された端末のリモート再生機能を無効にするために使用されます。

Safari では、代替として x-webkit-airplay="deny" を使用することができます。

height

動画の表示領域の高さを、 CSS ピクセル値で指定します（絶対的な値に限ります。パーセント値は不可）。

loading

ブラウザーが動画（ポスター画像を含む）をどのように読み込むべきかを指定します。

eager

動画が現在表示領域内にあるかどうかに関係なく、すぐに動画を読み込みます（これがデフォルト値です）。

lazy

ブラウザーの定義に従い、動画がビューポートから計算された距離に達するまで、動画の読み込みを遅延させます。

遅延読み込みにより、動画が必要になるとほぼ確実になるまで、その処理に必要なネットワーク帯域幅やストレージ帯域幅を節約できます。これにより、一般的な使用ケースのほとんどにおいてパフォーマンスが向上します。

レイアウトのずれを防ぐため、すべての動画に対して明示的な width および height 属性の使用が推奨されますが、これらは特に遅延読み込みされる動画において重要です。遅延読み込みされる動画は、たとえ読み込みによって表示状態が変化するとしても、要素の表示領域と重ならない限り読み込まれません。これは、読み込まれていない動画の width と height が 0 であるためです。読み込み中にビューポート内のコンテンツが再配置されると、ユーザー体験にさらに大きな支障をきたすことになります。

視覚的なビューポート内にある遅延読み込みの動画は、Window の load イベントが発生した時点ではまだ表示されていない可能性があります。これは、このイベントが即時読み込みの動画に基づいて発生するためです。つまり、ページの初期読み込み時に視覚的なビューポート内にあったとしても、遅延読み込みの動画は考慮されません。

読み込みの遅延は、JavaScriptが有効な場合にのみ行われます。これはトラッキング対策の一環です。なぜなら、スクリプトが無効な状態でユーザーエージェントが遅延読み込みに対応していても、サーバーが動画のリクエスト数やタイミングを追跡できるように、ページのマークアップ内に動画を戦略的に配置することで、サイト側がセッション全体を通じてユーザーのスクロール位置のおおよその位置を追跡できてしまう可能性があるからです。

メモ: loading="lazy" 属性は、このページの各セクションで説明されているように、autoplay、poster、preload の各属性にも影響を与えます。

loop

論理型の属性です。指定された場合、ブラウザーは動画の末尾に達すると、自動的に先頭に戻ります。

muted

論理型の属性で、動画に含まれる音声を消音するかどうかの既定の設定を示します。この属性を設定すると、初期状態が消音になります。デフォルト値は false であり、動画再生時に音声も聞こえることを表します。

メモ: ミュートを解除するには、muted="false" を設定しても動作しません。この属性が存在している限り、音声はミュートされたままになります。ミュートを解除するには、この属性を完全に除去しなければなりません。

playsinline

論理属性で、動画を「インライン」で再生する、すなわち要素の再生領域内で再生するかを指定します。この属性がないことが、動画を常に全画面で再生するという意味ではないことに注意してください。

poster

動画のダウンロード中に表示される画像の URL です。この属性が指定されない場合、最初のフレームが利用可能になるまで何も表示されず、その後、最初のフレームをポスターフレームとして表示します。

メモ: loading="lazy" 属性が設定された動画は、動画がビューポートの近くまたはビューポート内に表示された時点で初めて poster リソースをダウンロードします。

preload

列挙型の属性で、動画が再生される前に、どのコンテンツを読み込むとユーザーに最高の使い勝手をもたらすかについての作者の考えを、ブラウザーに対するヒントとしてを提供するためのものです。以下の値のうちひとつを持つことができます。

• none: 動画を事前に読み込むべきではないことを示します。
• metadata: 動画のメタデータ (例えば、長さ) を読み込みます。
• auto: ユーザーが動画ファイルを使用しないと思われる場合でも、ファイル全体をダウンロードしてよいことを示します。
• 空文字列: これは auto 値と同義です。

デフォルト値はブラウザーごとに異なります。仕様書では metadata を設定するよう助言しています。

メモ:

• autoplay 属性は preload より優先します。autoplay を指定すると、言うまでもなくブラウザーは動画を再生するためにダウンロードを始めなければなりません。
• 仕様書は、ブラウザーがこの属性の値に従うことを強制していません。これは単なるヒントです。

src

埋め込む動画への URL を指定します。この属性は省略可能です。埋め込む動画の指定には、video 要素のブロック内で <source> を使用することもできます。

width

動画の表示領域の幅を、 CSS ピクセル値で指定します。 (絶対的な値に限ります。パーセント値は不可)。

イベント

audioprocess

ScriptProcessorNode の入力バッファーが処理可能になった。

canplay

ブラウザーがメディアを再生できるようになったものの、追加のバッファリングのために停止することなくメディアの最後まで再生するには、充分なデータが読み込まれていないとみられる。

canplaythrough

ブラウザーがコンテンツのバッファリングのために停止することなく最後までメディアを再生することができるとみられる。

complete

OfflineAudioContext のレンダリングが終了した。

durationchange

duration 属性が更新された。

emptied

メディアが空になった。例えば、メディアがすでに読み込まれた（または部分的に読み込まれた）状態で、再読み込みのために load() メソッドが呼び出された場合などでこのイベントが発行されます。

ended

メディアの末尾に達したために再生が停止した。

error

メディアデータの取得中にエラーが発生したか、リソースの型が対応していないメディア形式です。

loadeddata

メディアの最初のフレームが読み込み終わった。

loadedmetadata

メタデータを読み込んだ。

loadstart

ブラウザーがリソースの読み込みを始めたときに発行されます。

pause

再生が一時停止した。

play

再生が始まった。

playing

データがなくなったために一時停止または待機した後で、再生の再開の準備ができた。

progress

ブラウザーがリソースを読み込んでいる間に定期的に発生します。

ratechange

再生レートが変更された。

seeked

シーク操作が完了した。

seeking

シーク操作が始まった。

stalled

ユーザーエージェントがメディアを読み込もうとしているが、データが予期せずに入ってこない。

suspend

メディアデータの読み込みが停止した。

timeupdate

currentTime 属性で示されている時刻が更新された。

volumechange

音量が変更された。

waiting

一時的なデータの不足により、再生が停止した。

使用上の注意

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

<video controls>
  <source src="myVideo.webm" type="video/webm" />
  <source src="myVideo.mp4" type="video/mp4" />
  <p>
    このブラウザーは HTML の動画に対応していません。代わりに<a href="myVideo.mp4" download="myVideo.mp4">動画へのリンク</a>があります。
  </p>
</video>

<source> 要素を使用する場合、ブラウザーは各ソースを順番に読み込もうとします。あるソースの読み込みに失敗した場合（無効な URL や非対応の形式など）は、次のソースの読み込みが試みられ、その繰り返しとなります。すべてのソースの読み込みに失敗した後、<video> 要素に対して error イベントが発生します。個々の <source> 要素に対しては、error イベントは発生しません。

メディアファイル形式や、動画で対応しているコーデックなど、実質的かつ徹底したガイドを提供しています。また、一緒に利用することができる音声コーデックのガイドもあります。

その他の利用上の注意:

• controls 属性を指定しないと、 video はブラウザーの標準のコントロールを含めません。 JavaScript と HTMLMediaElement を使用して、独自のコントロールを作成することもできます。詳しくはクロスブラウザーの動画プレイヤーの作成を参照してください。
• 動画（および音声）コンテンツを詳細に制御できるよう、 HTMLMediaElement はたくさんの種類のイベントを発行します。これらのイベントは、制御を可能にするだけでなく、メディアのダウンロードと再生の両方の進行状況や再生状態、再生位置を監視することができます。
• object-position プロパティを用いて、要素の枠内での動画の位置を調整することができ、 object-fit プロパティを用いて動画の寸法がどのように枠内に合わせられるかを制御することができます。
• 動画と同時に字幕を表示するには、 JavaScript と共に <track> 要素と WebVTT を使用します。詳しくは、 HTML 動画への字幕の追加をご覧ください。
• <video> 要素を使って音声ファイルを再生することができます。例えば WebVTT の代替表記を伴う音声を再生したい場合などに、 <audio> 要素は WebVTT を使った字幕を許可していないため便利です。
• 要素に対応しているブラウザーで代替コンテンツをテストするには、 <video> を <notavideo> のような実在しないタグに置き換えてください。

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

CSS でのスタイル付け

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

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

字幕やその他のタイミングテキストトラックを追加

字幕、クローズドキャプション、チャプター見出し、などといったタイミングを指定したテキストトラックは、<track> 要素をネストすることで宣言的に追加することができます。 トラックは、ウェブ動画テキストトラック形式 (WebVTT) (.vtt ファイル) で指定します。

例えば、次の HTML では "captions.vtt" というファイルを取り込んでいます。このファイルは、ユーザーが字幕を有効にした場合に動画に字幕をオーバーレイ表示するために使用します。

<video controls src="video.webm">
  <track default kind="captions" src="captions.vtt" />
</video>

WebVTT API を使用して、時間指定テキストトラックをプログラムで追加することもできます。

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

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

HTMLMediaElement.audioTracks

AudioTrackList で、このメディア要素のすべての音声トラックを保持します。 addtrack のリスナーをこのオブジェクトに追加すると、この要素に新しい音声トラックが追加された時に通知を受け取ることができます。

HTMLMediaElement.videoTracks

VideoTrackList で、このメディア要素のすべての映像トラックを保持します。 addtrack のリスナーをこのオブジェクトに追加すると、この要素に動画トラックが追加されたときに通知を受け取ることができます。

HTMLMediaElement.textTracks

TextTrackList で、このメディア要素のすべてのテキストトラック（字幕、クローズドキャプション、など）を保持します。 addtrack のリスナーをこのオブジェクトに追加すると、この要素にテキストトラックが追加されたときに通知を受け取ることができます。

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

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

elem.audioTracks.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTracks.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

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

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

動画へのサーバーの対応

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

Apache Web Server を使用して WebM 動画を配信する場合、video/webm MIME タイプに動画ファイルの拡張子を追加することで、この問題が修正されます（WebM ファイルの最も一般的な拡張子は .webm です）。これを行うには、/etc/apache の mime.types ファイルを編集するか、httpd.conf の AddType 構成ディレクティブを使用します。

AddType video/webm .webm

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

アクセシビリティ

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

注目すべき点は、音声のみのメディアにキャプションを付けることはできますが、キャプションを表示するために要素の動画領域が使用されるため、 <video> 要素で音声を再生しないとキャプションを付けることができないということです。これは、 video 要素で音声を再生するのに便利な特別なシナリオの 1 つです。

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

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

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 キュー設定を使用して位置を決めることができます。

• Web Video Text Tracks Format (WebVTT)
• WebAIM: Captions, Transcripts, and Audio Descriptions
• MDN WCAG を理解する ― ガイドライン 1.2 の解説
• Understanding Success Criterion 1.2.1 | W3C Understanding WCAG 2.0
• Understanding Success Criterion 1.2.2 | W3C Understanding WCAG 2.0

例

単一のソース

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

HTML

<!-- Basic 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 つの異なるソースを提供する最後のものをベースにしています。これにより、ブラウザーで対応している動画コーデックに関係なく、動画を見ることができます。

HTML

<!-- 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_hd.avi"
    type="video/avi" />
  <source
    src="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4"
    type="video/mp4" />

  恐れ入りますが、このブラウザーは埋め込み動画に対応していません。しかし、<a
    href="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4"
    download="ed_1024_512kb.mp4"
    >MP4 をダウンロード</a
  >してお好きな動画プレイヤーで見ることはできます。
</video>

結果

はじめに AVI を試します。再生できない場合は、 MP4 を試します。video 要素に対応していない場合は代替メッセージを表示しますが、すべてのソースに失敗した場合は表示しません。

メディアファイル形式によっては、ファイル形式文字列の一部として codecs 引数を使用して、より具体的な情報を提供することができます。例えば video/webm; codecs="vp8, vorbis" の場合、 WebM 映像であり、動画に VP8、音声に Vorbis を使用していることを示しています。

技術的概要

仕様書

ブラウザーの互換性

関連情報

• ウェブ上のメディア種別と形式のガイド

  • メディアコンテナー形式（ファイル形式）
  • ウェブの動画コーデックガイド
  • ウェブの音声コーデックガイド

• フレーム内における画像の位置と寸法の設定: object-position および object-fit

• <audio>

• HTML での動画や音声の使用

• canvas を用いた動画の操作

• Ogg メディアのサーバーの構成