<video>: 動画埋め込み要素
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
<video>
は HTML の要素で、文書中に動画再生に対応するメディアプレイヤーを埋め込みます。 <video>
を音声コンテンツのために使用することもできますが、 <audio>
要素の方がユーザーにとって使い勝手が良いかもしれません。
試してみましょう
上記の例は <video>
要素のシンプルな使い方を示しています。 <img>
要素の方法と同様に、 src
属性の中に表示したいメディアへのパスを含めます。他の属性を含めて、動画の幅や高さ、自動再生やループをするかどうか、ブラウザーの標準の動画コントロールを表示するかなどの情報を指定することができます。
開始・終了タグである <video></video>
タグの間の内容は、この要素に対応していないブラウザーで代替として表示されます。
属性
他のすべての HTML 要素と同様に、この要素はグローバル属性に対応しています。
autoplay
-
論理属性です。この属性が指定された場合、データの読み込みが完了し、再生可能な状態になった時点で即座にコンテンツの再生が始まります。
メモ: 自動的に音声 (あるいは音声トラックを含む動画) を再生するサイトはユーザーにとって不快な体験になる可能性がありますので、可能な限り避けるべきです。自動再生機能が必須である場合は、オプトイン (ユーザーが明示的に有効化することを求める) にするべきです。ただし、ユーザーの制御下で後からソースを設定するメディア要素を作成するときは、この方法が役に立つでしょう。正しい自動再生の使い方についての追加情報は autoplay ガイドを参照してください。
動画の自動再生を無効にするために
autoplay="false"
を指定しても機能しません。<video>
タグにこの属性があれば、動画が自動的に再生されます。自動再生を無効にするには、属性を完全に取り除くことが必要です。一部のブラウザー (Chrome 70.0 など) では、
muted
属性がないと autoplay は動作しません。 controls
-
この属性が指定された場合、再生、音量、シーク、ポーズの各機能を制御するコントロールを表示します。
controlslist
Experimental Non-standard-
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
Experimental-
ブラウザーにピクチャインピクチャのコンテキストメニューを表示させないようにしたり、場合によっては自動的にピクチャインピクチャを要求しないようにします。
disableremoteplayback
Experimental-
論理属性で、有線(HDMI, DVI など)や無線(Miracast, Chromecast, DLNA, AirPlay など)を使用して接続された端末のリモート再生機能を無効にするために使用されます。
Safari では、代替として
x-webkit-airplay="deny"
を使用することができます。 height
loop
-
論理型の属性です。指定された場合、ブラウザーは動画の末尾に達すると、自動的に先頭に戻ります。
muted
-
論理型の属性で、動画に含まれる音声の既定の設定を示します。この属性を設定すると、初期状態が消音になります。既定値は
false
であり、動画再生時に音声も再生することを表します。 playsinline
-
論理属性で、動画を「インライン」で再生する、すなわち要素の再生領域内で再生するかを指定します。この属性がないことが、動画を常に全画面で再生するという意味ではないことに注意してください。
poster
-
動画のダウンロード中に表示される画像の URL です。この属性が指定されない場合、最初のフレームが利用可能になるまで何も表示されず、その後、最初のフレームをポスターフレームとして表示します。
preload
-
列挙型の属性で、動画が再生される前に、どのコンテンツを読み込むとユーザーに最高の使い勝手をもたらすかについての作者の考えを、ブラウザーに対するヒントとしてを提供するためのものです。以下の値のうちひとつを持つことができます。
none
: 動画を事前に読み込むべきではないことを示します。metadata
: 動画のメタデータ (例えば、長さ) を読み込みます。auto
: ユーザーが動画ファイルを使用しないと思われる場合でも、ファイル全体をダウンロードしてよいことを示します。- 空文字列: これは
auto
値と同義です。
既定値はブラウザーごとに異なります。仕様書では
metadata
を設定するよう助言しています。メモ:
autoplay
属性はpreload
より優先します。autoplay
を指定すると、言うまでもなくブラウザーは動画を再生するためにダウンロードを始めなければなりません。- 仕様書は、ブラウザーがこの属性の値に従うことを強制していません。これは単なるヒントです。
src
-
埋め込む動画への URL を指定します。この属性は省略可能です。埋め込む動画の指定には、video 要素のブロック内で
<source>
を使用することもできます。 width
イベント
イベント名 | 発生する時 |
---|---|
audioprocess
非推奨
|
ScriptProcessorNode の入力バッファが処理可能になった。 |
canplay |
ブラウザーがメディアを再生できるようになったものの、追加のバッファリングのために停止することなくメディアの最後まで再生するには、充分なデータが読み込まれていないとみられる。 |
canplaythrough |
ブラウザーがコンテンツのバッファリングのために停止することなく最後までメディアを再生することができるとみられる。 |
complete |
OfflineAudioContext のレンダリングが終了した。 |
durationchange |
duration 属性が更新された。 |
emptied |
メディアが空になった。例えば、メディアがすでに読み込まれた(または部分的に読み込まれた)状態で、再読み込みのために load() メソッドが呼び出された場合などでこのイベントが発行されます。 |
ended |
メディアの末尾に達したために再生が停止した。 |
error |
メディアデータの取得中にエラーが発生したか、リソースの型が対応していないメディア形式です。 |
loadeddata |
メディアの最初のフレームが読み込み終わった。 |
loadedmetadata |
メタデータを読み込んだ。 |
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"
>動画へのリンク</a
>があります。
</p>
</video>
メディアファイル形式や、動画で対応しているコーデックなど、実質的かつ徹底したガイドを提供しています。また、一緒に利用することができる音声コーデックのガイドもあります。
その他の利用上の注意:
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
に設定することです。動画プレイヤーのスタイル付けの基本は、便利なスタイル付けテクニックをいくつか紹介しています。
トラックの追加と削除の検出
<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 が有効である場合)可能性があります。
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 タイプの設定を変更するための簡単なインターフェイスを提供しているかもしれません。
例
単一のソース
この例では、アクティブ化されたときに動画を再生し、再生を制御するためにブラウザーの既定の動画コントロールをユーザーに提供します。
HTML
<!-- 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 つの異なるソースを提供する最後のものをベースにしています。これにより、ブラウザーで対応している動画コーデックに関係なく、動画を見ることができます。
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.ogv"
type="video/ogg" />
<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"
>MP4 をダウンロード</a
>してお好きな動画プレイヤーで見ることはできます。
</video>
結果
はじめに Ogg を試します。再生できない場合は、 MP4 を試します。video 要素に対応していない場合は代替メッセージを表示しますが、すべてのソースに失敗した場合は表示しません。
メディアファイル形式によっては、ファイル形式文字列の一部として codecs
引数を使用して、より具体的な情報を提供することができます。比較的簡単な例は video/webm; codecs="vp8, vorbis"
であり、 WebM 映像であり、動画に VP8、音声に Vorbis を使用していることを示しています。
アクセシビリティの考慮
動画には、実際にコンテンツを説明する字幕と文字化情報 (transcript) を提供するべきです(実装方法について詳しくは HTML 動画への字幕の追加 を参照してください)。字幕によって、聴力を失った人が動画の再生時に音声の内容を理解する事ができるようになるのに対し、文字化情報を使用すると、音声コンテンツを理解するのに時間が掛かる人が、自分に合ったペースと書式で内容を確認できるようになります。
注目すべき点は、音声のみのメディアにキャプションを付けることはできますが、キャプションを表示するために要素の video 領域が使用されるため、 <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 キュー設定を使用して位置を決めることができます。
技術的概要
コンテンツカテゴリー | フローコンテンツ, 記述コンテンツ, 埋め込みコンテンツ。 controls 属性を持つ場合は、対話的コンテンツおよび知覚可能コンテンツ。 |
---|---|
許可されている内容 |
要素が その他の場合: 0 個以上の |
タグの省略 | なし。開始タグと終了タグの両方が必須です。 |
許可されている親要素 | 埋め込みコンテンツを受け入れるすべての要素。 |
暗黙の ARIA ロール | 対応するロールなし |
許可されている ARIA ロール | application |
DOM インターフェイス | HTMLVideoElement |
仕様書
Specification |
---|
HTML Standard # the-video-element |
ブラウザーの互換性
BCD tables only load in the browser