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

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

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

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

属性

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

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

一部のブラウザー (Chrome 70.0 など) では、 muted 属性がないと autoplay は動作しません。

autoplay

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

autoPictureInPicture

論理属性で、 true であれば、ユーザーがこの文書と他の文書やアプリケーションとの間を行き来したときに、自動的にピクチャインピクチャモードに切り替わるようにすることを示します。

buffered

メディアがどれだけの時間分バッファリングされたかを判断するために、読み取ることが可能な属性です。この属性は TimeRanges オブジェクトを持ちます。

controls

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

controlslist

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

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

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

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 設定属性 を参照してください。

currentTime

currentTime を読み込むと、秒単位で指定されたメディアの現在の再生位置を示す倍精度の浮動小数点値を返します。メディアがまだ再生を開始していない場合は、再生を開始する時間オフセットを返します。 currentTime を設定すると、現在の再生位置を指定された時間に設定し、メディアがすでに読み込まれている場合には、その位置までメディアをシークします。

メディアがストリーミングされている場合、そのデータがメディアバッファ上で期限切れになっていると、ユーザエージェントがリソースの一部を取得できない可能性があります。メディアによっては、0秒から開始しないメディアのタイムラインがある場合もあり、 currentTime をそれ以前の時間に設定すると失敗します。メディアタイムラインの参照フレームの開始点を決定するには、 getStartDate() メソッドを使用することができます。

disablePictureInPicture

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

disableRemotePlayback

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

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

duration 読取専用

倍精度浮動小数点値で、メディアのタイムライン上でのメディアの再生時間 (全長) を秒単位で示します。要素にメディアが存在しない場合、またはメディアが有効でない場合は NaN が返されます。メディアの終了時刻が不明な場合 (持続時間不明のライブストリーム、ウェブラジオ、 WebRTC からのメディア受信など)、この値は +Infinity になります。

height

映像の表示領域の高さを、 CSS ピクセル値で指定します。 (絶対値に限ります。パーセント値は不可。)

intrinsicsize

この属性はブラウザーに、画像の固有の寸法を無視し、この属性で指定された寸法であると見せかけるよう指示します。特に、画像がこれらの次元のラスターであって、画像の naturalWidth/naturalHeight はこの属性で指定された値が返されます。説明と例

loop

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

muted

論理型の属性で、映像に含まれる音声の既定の設定を示します。この属性を設定すると、初期状態が消音になります。既定値は false であり、映像再生時に音声も再生することを表します。

playsinline

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

poster

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

preload

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

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

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

注:

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

src

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

width

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

イベント

使用上の注意

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

<video controls>
  <source src="myVideo.mp4" type="video/mp4">
  <source src="myVideo.webm" type="video/webm">
  <p>Your browser doesn't support HTML5 video. Here is
     a <a href="myVideo.mp4">link to the video</a> instead.</p>
</video>

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

その他の利用上の注意:

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

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

CSS でのスタイル付け

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

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

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

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

HTMLMediaElement.audioTracks

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

HTMLMediaElement.videoTracks

この VideoTrackList オブジェクトに addtrack リスナーを追加することで、要素に動画トラックが追加されたときに通知を受け取るkとができます。

HTMLMediaElement.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 要素に対応していない場合は代替メッセージを表示しますが、すべてのソースに失敗した場合は表示しません。

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

映像へのサーバーの対応

サーバーで映像の 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 映像への字幕の追加 を参照してください) 。字幕によって、聴力を失った人が映像の再生時に音声の内容を理解する事ができるようになるのに対し、文字化情報を使用すると、音声コンテンツを理解するのに時間が掛かる人が、自分に合ったペースと書式で内容を確認できるようになります。

注目すべき点は、音声のみのメディアにキャプションを付けることはできますが、キャプションを表示するために要素の 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 キュー設定を使用して位置を決めることができます。

• MDN 字幕とクローズドキャプション — プラグイン
• 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

技術的概要

仕様書

ブラウザーの互換性

関連情報

• ウェブ上のメディア種別と形式のガイド
  • メディアコンテナー形式 (ファイル形式)
  • ウェブの動画コーデックガイド
  • ウェブの音声コーデックガイド
• フレーム内における画像の位置と寸法の設定: object-position および object-fit
• <audio>
• HTML5 での映像や音声の使用
• canvas を用いた映像の操作
• Ogg メディアのサーバーの構成