訳注: この文書はHTML 5.1 Recommendationの日本語訳ではありません。代わりに最新のW3C HTML仕様を参照ください。

この日本語訳はメンテナンスされていません。この翻訳文書の代わりにWHATWG HTML日本語訳を参照することができます。

4.7 埋め込みコンテンツ

4.7.1 導入

この節は非規範的である。

単独の画像リソースのみが存在する場合、HTMLにおいて画像を埋め込むために、img要素およびsrc属性を使用する。

<h2>From today's featured article</h2>
<img src="/uploads/100-marie-lloyd.jpg" alt="" width="100" height="150">
<p><b><a href="/wiki/Marie_Lloyd">Marie Lloyd</a></b> (1870–1922)
was an English <a href="/wiki/Music_hall">music hall</a> singer, ...

しかし、ユーザーエージェントが選択することができる複数の画像リソースを用いることを著者が望むかもしれない多数の状況が存在する:

上記の状況は、相互に排他的ではない。たとえば、art directionに対する異なるリソースをもつ異なるデバイスピクセル比が異なるリソースを組み合わせることは理にかなっている。

スクリプトを使用することでこれら問題を解決することは可能である間、そのようにすることは他の問題を導入する:

このことを考慮して、この仕様は宣言する方法で上記の問題を申し立てるための多数の機能を導入する。

画像のレンダリングサイズが固定される場合でデバイスピクセル比ベースの選択

img要素のsrcおよびsrcsetは、(より小さいサイズがより大きい画像のスケールダウンバージョンとなる)画像サイズで変化するのみの複数の画像を提供するためにx記述子を用いて使用することができる。

画像のレンダリングサイズがビューポート幅に依存する場合(ビューポートベースの選択)、x記述子は適さないが、art directionと一緒に使用することができる。

<h2>From today's featured article</h2>
<img src="/uploads/100-marie-lloyd.jpg"
     srcset="/uploads/150-marie-lloyd.jpg 1.5x, /uploads/200-marie-lloyd.jpg 2x"
     alt="" width="100" height="150">
<p><b><a href="/wiki/Marie_Lloyd">Marie Lloyd</a></b> (1870–1922)
was an English <a href="/wiki/Music_hall">music hall</a> singer, ...

ユーザーエージェントは、ユーザーのスクリーンのピクセル密度、ズームレベルおよびユーザーのネットワーク状態のような可能性のあるその他の要素に依存する与えられたリソースのどれでも選択することができる。

srcset属性を解釈しない古いユーザーエージェントの後方互換性のために、URLの1つは、img要素のsrc属性で指定される。これは(ユーザーが好むよりももしかすると低い解像度だけれども)古いユーザーエージェントにおいてさえも表示されるという何かしら役に立つ結果になるだろう。新しいユーザーエージェントに対して、あたかも属性が1x記述子とともにsrcsetで指定されたかのように、src属性はリソース選択に参加する。

画像のレンダリングサイズは、画像がダウンロードされる前に画像に対する空間を割り当てることがユーザーエージェントにできるwidthおよびheight属性で与えられる。

Art direction-ベースの選択

media属性と共にpicture要素およびsource要素は、(たとえばより小さい画像がより大きい画像の収穫されたバージョンかもしれない)画像コンテンツを変化させる複数の画像を提供するために使用することができる。

<picture>
  <source media="(min-width: 45em)" srcset="large.jpg">
  <source media="(min-width: 32em)" srcset="med.jpg">
  <img src="small.jpg" alt="The president giving an award.">
</picture>

ユーザーエージェントがmedia属性におけるメディアクエリがマッチする最初のsource要素を選択し、要素のsrcset属性から適切なURLを選択する。

画像のレンダリングサイズは、ソースが選択されるものに依存して変化する。ダウンロードされた画像を持つ前にユーザーエージェントが使用することができる次元を指定するために、CSSは使用することができる。

img { width: 300px; height: 300px }
@media (min-width: 32em) { img { width: 500px; height:300px } }
@media (min-width: 45em) { img { width: 700px; height:400px } }

この例は、art directionおよびデバイスピクセル比ベースの選択を組み合わせる。ビューポートの半分を取るバナーは、1つは広いスクリーンに対して、1つは狭いスクリーンに対しての、2つのバージョンで提供される。

<h1>
 <picture>
  <source media="(max-width: 500px)" srcset="banner-phone.jpeg, banner-phone-HD.jpeg 2x">
  <img src="banner.jpeg" srcset="banner-HD.jpeg 2x" alt="The Breakfast Combo">
 </picture>
</h1>
ビューポートベースの選択

srcsetおよびsizesは、(より小さいサイズがより大きい画像のスケールダウンバージョンとなる)画像サイズで変化するのみの複数の画像を提供するためにw記述子を用いて使用することができる。

この例において、バナー画像は(適切なCSSを用いて)ビューポート幅全体を取る。

<h1><img sizes="100vw" srcset="wolf-400.jpg 400w, wolf-800.jpg 800w, wolf-1600.jpg 1600w"
     src="wolf-400.jpg" alt="The rad wolf"></h1>

ユーザーエージェントは、指定されるw記述子およびsizes属性で指定されるレンダリングサイズから各画像の効果的なピクセル密度を算出するだろう。 ユーザーエージェントは、ユーザーのスクリーンのピクセル密度、ズームレベルおよびユーザーのネットワーク状態のような可能性のあるその他の要素に依存する与えられたリソースのどれでも選択することができる。

ユーザーのスクリーンが320 CSSピクセル幅である場合、これはwolf-400.jpg 1.25x, wolf-800.jpg 2.5x, wolf-1600.jpg 5xに指定するのと等価である。言い換えると、ユーザーのスクリーン1200 CSSピクセル幅である場合、これはwolf-400.jpg 0.33x, wolf-800.jpg 0.67x, wolf-1600.jpg 1.33xに指定するのと等価である。By using the w記述子およびsizes属性を使用することによって、ユーザーエージェントはユーザーのデバイスの大きさにかかわらず、ダウンロードする正確な画像リソースを選択することができる。

後方互換性のために、URLの1つはimg要素のsrc属性で指定される。新しいユーザーエージェントにおいて、srcset属性がw記述子を使用する場合、src属性は無視される。

次の例において、デフォルト値が100vwであるので、sizes属性は省略することができる。

この例において、ウェブページはビューポートの幅に依存する3つのレイアウトを持つ。狭いレイアウトは1列目の画像(各画像の幅が約100%)、中程度のレイアウトは2列目の画像(各画像の幅が約50%)、広いレイアウトは3列目の画像(各画像の幅が約33%)、およびページマージンを持つ。ビューポートがそれぞれ幅30emおよび幅50emである場合、これらレイアウトを壊す。

<img sizes="(max-width: 30em) 100vw, (max-width: 50em) 50vw, calc(33vw - 100px)"
     srcset="swing-200.jpg 200w, swing-400.jpg 400w, swing-800.jpg 800w, swing-1600.jpg 1600w"
     src="swing-400.jpg" alt="Kettlebell Swing">

sizes属性は、30emおよび50emでレイアウトのブレークポイントを設定し、これらブレークポイントの間で 100vw50vwまたはcalc(33vw - 100px)に画像サイズを宣言する。これらサイズは、CSSで指定されたように実際の画像幅と厳密にマッチする必要が必然的にない。

ユーザーエージェントは、trueに評価する<media-condition>(丸括弧の一部)をもつ最初の項目を用いる、またはそれらがfalseにすべて評価する場合、最後の項目(calc(33vw - 100px))を用いて、sizes属性から幅を選ぶだろう。

たとえば、ビューポート幅が29emである場合、(max-width: 30em)がtrueに評価し100vwが使用され結果として、リソース選択の目的で画像サイズは29emである。ビューポート幅が代わりに32emである場合、(max-width: 30em)はfalseに評価するが、(max-width: 50em)はtrueに評価し、50vw が使用され結果として、リソース選択の目的で画像のサイズは16em(ビューポート幅の半分)となる。異なるレイアウトのため、わずかにより幅の広いビューポートがより小さい画像をもたらすことに注目する。

ユーザーエージェントは、効果的なピクセル密度を選択し、前の例と似た適切なリソースを選択することができる。

Image format-based selection

source要素のtype属性は、異なるフォーマットで複数の画像を提供するために、使用することができる。

<h2>From today's featured article</h2>
<picture>
 <source srcset="/uploads/100-marie-lloyd.webp" type="image/webp">
 <source srcset="/uploads/100-marie-lloyd.jxr" type="image/vnd.ms-photo">
 <img src="/uploads/100-marie-lloyd.jpg" alt="" width="100" height="150">
</picture>
<p><b><a href="/wiki/Marie_Lloyd">Marie Lloyd</a></b> (1870–1922)
was an English <a href="/wiki/Music_hall">music hall</a> singer, ...

この例において、ユーザーエージェントは、サポートされるMIMEタイプをもつtype属性を持つ最初のリソースを選択するだろう。ユーザーエージェントがWebP画像をサポートする場合、最初のsource要素が選択されるだろう。WebP画像をサポートしないが、ユーザーエージェントがJPEG XR画像をサポートする場合、2つ目のsource要素が選択されるだろう。これらのフォーマットがいずれもサポートされない場合、img要素が選択されるだろう。

4.7.2 依存関係

メディアクエリ[MQ] 正しい参照はhttp://dev.w3.org/csswg/mediaqueries-4/である
<media-condition>
CSS Values and Units [CSSVALUES]
<length>
CSS Syntax [CSSSYNTAX]
Parse a comma-separated list of component values
component value
<whitespace-token>

4.7.3 picture要素

カテゴリ
フローコンテンツ
フレージングコンテンツ
エンベディッドコンテンツ
この要素を使用できるコンテキスト
エンベディッドコンテンツが期待される場所。
コンテンツモデル
1つ以上のsource要素、その後に来る1つのimg要素、任意でスクリプトサポート要素と混合される。
コンテンツ属性
グローバル属性
text/htmlにおけるタグ省略
どちらのタグも省略不可
許可されるARIAロール属性値:
なし
許可されるARIAステートおよびプロパティー
グローバルaria-* 属性
DOMインターフェース
interface HTMLPictureElement : HTMLElement {};

picture要素は、スクリーンピクセル密度、ビューポートサイズ、画像フォーマット、およびその他の要素を元にした、著者に宣言的にコントロールを許可するために、または画像が使用するためのリソースに関するユーザーエージェントに対するヒントを与えるために、ソースの含まれたimg要素に複数のソースを提供するコンテナである。この要素は、要素の子を表す

picture要素は、videoおよびaudio要素によく似た異なる何かである。それら要素のすべてがsource要素を含む一方で、source要素のsrc属性は、要素がpicture要素内でネストされる場合に意味を持たず、リソース選択アルゴリズムは異なる。その上、picture要素自身は何も表示しない。要素は複数のURLから選択する要素を有効にする 要素の含まれるimg要素にコンテキストを単に提供する。

4.7.4 picture要素とともに使用される場合のsource要素

カテゴリ
source要素と同じ。
この要素を使用できるコンテキスト
img要素の前の、picture要素の子として。
コンテンツモデル
source要素と同じ。
コンテンツ属性
グローバル属性
srcset - 異なる状況で使用するための画像(たとえば、高解像度ディスプレイ、小さなモニタ、など)
sizes - ブレークポイント間の画像サイズ
media — 受け入れ可能なメディア
type — 埋め込みリソースタイプ
text/htmlにおけるタグ省略
終了タグなし
許可されるARIAロール属性値:
なし
許可されるARIAステートおよびプロパティー
グローバルaria-* 属性
DOMインターフェース
partial interface HTMLSourceElement {
           attribute DOMString srcset;
           attribute DOMString sizes;
           attribute DOMString media;
};

source要素が親としてpicture要素を持つ場合、この節におけるオーサリング要求のみが適用する

source要素は、著者にimg要素に対する複数の代替ソースセットの指定を許可する。この要素は、自分自身で何かを表すものではない。

srcset属性は存在しなければならず、1つ以上の画像候補文字列から成らなければならず、","(U+002C)文字でそれぞれ分離される。画像候補文字列が記述子およびURLの後に空白文字を一切含まない場合、次の画像候補文字列が存在するならば、1つ以上の空白文字で開始しなければならない。

sizes属性は存在してもよい。存在する場合、値は妥当なソースサイズのリストでなければならない。

media属性は存在してもよい。存在する場合、値は妥当なメディアクエリでなければならない。

type属性は存在してもよい。存在する場合、値は妥当なMIMEタイプでなければならない。属性が与えられた種類をサポートしない場合、次のsource要素にスキップするためにユーザーエージェントを許可するために、属性はソースセットで画像の種類を与える。

type属性が指定されない場合、ユーザーエージェントがフェッチする後で画像フォーマットをサポートしないならば、ユーザーエージェントは異なるsource要素を選択しないだろう。

source要素が次の兄弟source要素または指定されるsrcset属性をもつimg要素を持つ場合、この要素は少なくとも以下の1つを持たなければならない:

src属性は存在してはならない。

The IDL attributes srcset, sizes and media must reflect the respective content attributes of the same name.

4.7.5 img要素

カテゴリ
フローコンテンツ
フレージングコンテンツ
エンベディッドコンテンツ
フォーム関連要素
要素がusemap属性をもつ場合:インタラクティブコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
エンベディッドコンテンツが期待される場所。
コンテンツモデル
空。
コンテンツ属性
グローバル属性
alt - 画像が利用不可の際使用する置換テキスト
src - リソースのアドレス
srcset - 異なる状況で使用するための画像(たとえば、高解像度ディスプレイ、小さなモニタ、など)
sizes - ブレークポイント間の画像サイズ
crossorigin — 要素がcrossorigin要求を処理する方法
usemap - 使用するイメージマップの名前
ismap - 画像がサーバ側イメージマップであるかどうか
width - 横の次元
height - 縦の次元
text/htmlにおけるタグ省略
終了タグなし。
許可されるARIAロール属性値:
img要素のalt属性値が空である(alt="")場合はpresentationロールのみ、そうでなければ任意のロール値
許可されるARIAステートおよびプロパティー
グローバルaria-* 属性
許可されるロールで受け入れ可能な任意のaria-*属性。
DOMインターフェース
[NamedConstructor=Image(optional unsigned long width, optional unsigned long height)]
interface HTMLImageElement : HTMLElement {
           attribute DOMString alt;
           attribute DOMString src;
           attribute DOMString srcset;
           attribute DOMString sizes;
           attribute DOMString crossOrigin;
           attribute DOMString useMap;
           attribute boolean isMap;
           attribute unsigned long width;
           attribute unsigned long height;
  readonly attribute unsigned long naturalWidth;
  readonly attribute unsigned long naturalHeight;
  readonly attribute boolean complete;
  readonly attribute DOMString currentSrc;
};

img要素は画像を表す。

親がpicture要素である場合、srcおよびsrcset属性、および任意の兄source要素のsrcset属性によって与えられる画像は、エンベティッドコンテンツである。alt属性の値は、画像を処理することができないまたは読み込みが無効である画像に対して、等価なコンテンツを提供する。(すなわち、img要素のフォールバックコンテンツである)。

alt属性の値に関する要件は、次節で説明される。

src属性は存在しなければならず、画像リソースは潜在的にページ化もスクリプト化もされていない、任意でアニメーションである、非対話型を参照する潜在的にスペースで囲まれた妥当な空でないURLを含めなければならない。

srcset属性は存在してもよい。属性が存在する場合、属性値は、","(U+002C)文字でそれぞれ分離される1つ以上の画像候補文字列から成らなければならない。画像候補文字列が記述子およびURLの後に空白文字を一切含まない場合、次の画像候補文字列が存在するならば、1つ以上の空白文字で開始しなければならない。

画像候補文字列は、以下のリストで説明される追加の制限とともに、順に、以下のコンポーネントから成る:

  1. 0個以上の空白文字

  2. "," (U+002C)文字で開始または終了しない妥当な空でないURLで、非インタラクティブを参照し、任意でアニメーション、ページ化もスクリプト化もされない画像リソース。

  3. 0個以上の空白文字

  4. 次の0または1つ:

  5. 0個以上の空白文字

同じ要素に対して別の画像候補文字列幅記述子値と同じ幅記述子値を持つ要素に対する画像候補文字列が存在してはならない。

同じ要素に対して別の画像候補文字列ピクセル密度記述子値と同じピクセル密度記述子値を持つ要素に対する画像候補文字列が存在してはならない。この要求の目的のために、記述子をもたない画像候補文字列は、1x記述子をもつ画像候補文字列と等価である。

source要素がsizes属性を存在させる、またはimgsizes属性属性を存在させる場合、その要素に対するすべての画像候補文字列は、指定される幅記述子を持たなければならない。

sourceまたはimg要素に対する画像候補文字列は、指定される幅記述子を持つ場合、その要素に対するすべての他の画像候補文字列はまた、指定される幅記述子を持たなければならない。

画像候補文字列幅記述子における指定される幅は、画像候補文字列のURLによって指定されるリソースにおける内在幅にマッチしなければならない。

上記の要件は、画像が静的ビットマップ(たとえばPNG、GIF、JPEG)、単一ページのベクター文書(単一ページのPDF、SVGルート要素を持つXMLファイル)、アニメーションビットマップ(APNG、アニメーションGIF)、アニメーションベクターグラフィックス(宣言型SMILアニメーションを使用するSVGルート要素を持つXMLファイル)などであることを意味する。しかし、これらの定義は、スクリプトを伴うSVGファイル、複数ページのPDFファイル、インタラクティブMNGファイル、HTML文書、プレーンテキスト文書などを排除する。[PNG] [GIF] [JPEG] [PDF] [XML] [APNG] [SVG] [MNG]

srcset属性が存在する場合、sizes属性はまた存在してもよい。存在する場合、値は妥当なソースサイズのリストでなければならない。

妥当なソースサイズのリストは、以下の文法にマッチする文字列である:[CSSVALUES] [MQ]

<source-size-list> = <source-size># [ , <source-size-value> ]? | <source-size-value>
<source-size> = <media-condition> <source-size-value>
<source-size-value> = <length>

<source-size-value>は負であってはならない。

img要素は、レイアウトツールとして使用してはならない。特に、画像はめったに意味および文書に有用なものを追加しないので、img要素は、透明な画像を表示するために使用すべきでない。


crossorigin属性はCORS設定属性である。その目的は、クロスオリジンなアクセスにcanvasとともに使用できるサードパーティのサイトからの画像を許可することである。


An img element has a current request and a pending request. The current request is initially set to a new image request. The pending request is initially set to null. The current request is usually referred to as the img element itself.

An image request has a state, current URL and image data.

An image request's state is one of the following:

Unavailable
The user agent hasn't obtained any image data, or has obtained some or all of the image data but hasn't yet decoded enough of the image to get the image dimensions.
Partially available
The user agent has obtained some of the image data and at least the image dimensions are available.
Completely available
The user agent has obtained all of the image data and at least the image dimensions are available.
Broken
The user agent has obtained all of the image data that it can, but it cannot even decode the image enough to get the image dimensions (e.g. the image is corrupted, or the format is not supported, or no data could be obtained).

An image request's current URL is initially the empty string.

An image request's image data is the decoded image data.

When an image request is either in the partially available state or in the completely available state, it is said to be available.

An image request is initially unavailable.

When an img element is available, it provides a paint source whose width is the image's intrinsic width, whose height is the image's intrinsic height, and whose appearance is the intrinsic appearance of the image.

In a browsing context where scripting is disabled, user agents may obtain images immediately or on demand. In a browsing context where scripting is enabled, user agents must obtain images immediately.

A user agent that obtains images immediately must synchronously update the image data of an img element, with the restart animation flag set if so stated, whenever that element is created, or has experienced relevant mutations, and whenever that element's adopting steps are run.

A user agent that obtains images on demand must update the image data of an img element whenever it needs the image data (i.e. on demand), but only if the img element is in the unavailable state. When an img element has experienced relevant mutations, and whenever that element's adopting steps are run, if the user agent only obtains images on demand, the img element must return to the unavailable state.

The relevant mutations for an img element are as follows:

Each img element has a last selected source, which must initially be null.

Each image request has a current pixel density, which must initially be undefined.

When an img element has a current pixel density that is not 1.0, the element's image data must be treated as if its resolution, in device pixels per CSS pixels, was the current pixel density.

For example, if the current pixel density is 3.125, that means that there are 300 device pixels per CSS inch, and thus if the image data is 300x600, it has an intrinsic dimension of 96 CSS pixels by 192 CSS pixels.

Each Document object must have a list of available images. Each image in this list is identified by a tuple consisting of an absolute URL, a CORS settings attribute mode, and, if the mode is not No CORS, an origin. Each image furthermore has an ignore higher-layer caching flag. User agents may copy entries from one Document object's list of available images to another at any time (e.g. when the Document is created, user agents can add to it all the images that are loaded in other Documents), but must not change the keys of entries copied in this way when doing so, and must unset the ignore higher-layer caching flag for the copied entry. User agents may also remove images from such lists at any time (e.g. to save memory). User agents must remove entries in the list of available images as appropriate given higher-layer caching semantics for the resource (e.g. the HTTP Cache-Control response header) when the ignore higher-layer caching is unset.

The user agent can also store the image data in a separatly from the list of available images.

For example, if a resource has the HTTP response header Cache-Control: must-revalidate, the user agent would remove it from the list of available images but could keep the image data separately, and use that if the server responds with a 204 No Content status.

When the user agent is to update the image data of an img element, optionally with the restart animations flag set, it must run the following steps:

  1. If the element's Document is not the active document, abort these steps.

  2. If the user agent cannot support images, or its support for images has been disabled, then abort the image request for the current request and the pending request, set current request to the unavailable state, let pending request be null, and abort these steps.

  3. If the element does not have a srcset attribute specified and it does not have a parent or it has a parent but it is not a picture element, and it has a src attribute specified and its value is not the empty string, let selected source be the value of the element's src attribute, and selected pixel density be 1.0. Otherwise, let selected source be null and selected pixel density be undefined.

  4. Let the img element's last selected source be selected source.

  5. If selected source is not null, run these substeps:

    1. Resolve selected source, relative to the element, and let the result be absolute URL. If that is not successful, then abort these inner set of steps.

    2. Let key be a tuple consisting of the resulting absolute URL, the img element's crossorigin attribute's mode, and, if that mode is not No CORS, the Document object's origin.

    3. If the list of available images contains an entry for key, then set the ignore higher-layer caching flag for that entry, abort the image request for the current request and the pending request, let pending request be null, let current request be a new image request whose image data is that of the entry and whose state is set to the completely available state, update the presentation of the image appropriately, let the current request's current pixel density be selected pixel density, queue a task to restart the animation if restart animation is set, change current request's current URL to absolute URL, and then fire a simple event named load at the img element, and abort these steps.

  6. Asynchronously await a stable state, allowing the task that invoked this algorithm to continue. The synchronous section consists of all the remaining steps of this algorithm until the algorithm says the synchronous section has ended. (Steps in synchronous sections are marked with ⌛.)

  7. ⌛ If another instance of this algorithm for this img element was started after this instance (even if it aborted and is no longer running), then abort these steps.

    Only the last instance takes effect, to avoid multiple requests when, for example, the src, srcset, and crossorigin attributes are all set in succession.

  8. ⌛ Let selected source and selected pixel density be the URL and pixel density that results from selecting an image source, respectively.

  9. ⌛ If selected source is null, run these substeps:

    1. ⌛ Set the current request to the broken state, abort the image request for the current request and the pending request, and let pending request be null.

    2. Queue a task to change the current request's current URL to the empty string, and then, if the element has a src attribute or a srcset attribute or a parent that is a picture element, fire a simple event named error at the img element.

    3. ⌛ Abort this algorithm.

  10. Queue a task to fire a progress event named loadstart at the img element.

  11. Resolve selected source, relative to the element, and let the result be absolute URL. If that is not successful, then abort the image request for the current request and the pending request, set the current request to the broken state, let pending request be null, queue a task to change the current request's current URL to absolute URL, fire a simple event named error at the img element and then fire a simple event named loadend at the img element, and abort these steps.

  12. ⌛ If the pending request is not null, and absolute URL is the same as the pending request's current URL, then abort these steps.

    ⌛ If absolute URL is the same as the current request's current URL, and current request is in the partially available state, then abort the image request for the pending request, queue a task to restart the animation if restart animation is set, and abort these steps.

    ⌛ If the pending request is not null, abort the image request for the pending request.

    ⌛ Let image request be a new image request whose current URL is absolute URL.

    ⌛ Let the pending request be image request.

    ⌛ Do a potentially CORS-enabled fetch of absolute URL, with the mode being the current state of the element's crossorigin content attribute, the origin being the origin of the img element's Document, and the default origin behaviour set to taint. Let this instance of the fetching algorithm be associated with image request.

    The resource obtained in this fashion, if any, is image request's image data. It can be either CORS-same-origin or CORS-cross-origin; this affects the origin of the image itself (e.g. when used on a canvas).

    Fetching the image must delay the load event of the element's document until the task that is queued by the networking task source once the resource has been fetched (defined below) has been run.

    This, unfortunately, can be used to perform a rudimentary port scan of the user's local network (especially in conjunction with scripting, though scripting isn't actually necessary to carry out such an attack). User agents may implement cross-origin access control policies that are stricter than those described above to mitigate this attack, but unfortunately such policies are typically not compatible with existing Web content.

    If the resource is CORS-same-origin, each task that is queued by the networking task source while the image is being fetched, if image request is the current request, must fire a progress event named progress at the img element.

  13. End the synchronous section, continuing the remaining steps asynchronously, but without missing any data from the fetch algorithm.

  14. As soon as possible, jump to the first applicable entry from the following list:

    If the resource type is multipart/x-mixed-replace

    The next task that is queued by the networking task source while the image is being fetched must run the following steps:

    1. If image request is the pending request and the user agent is able to determine image request's image's width and height, abort the image request for the current request, upgrade the pending request to the current request and set the current request's state to partially available.

    2. Otherwise, if image request is the pending request and the user agent is able to determine that image request's image is corrupted in some fatal way such that the image dimensions cannot be obtained, abort the image request for the current request, upgrade the pending request to the current request and set the current request's state to broken.

    3. Otherwise, if image request is the current request, it is in the unavailable state, and the user agent is able to determine image request's image's width and height, set the current request's state to partially available.

    4. Otherwise, if image request is the current request, it is in the unavailable state, and the user agent is able to determine that image request's image is corrupted in some fatal way such that the image dimensions cannot be obtained, set the current request's state to broken.

    Each task that is queued by the networking task source while the image is being fetched must update the presentation of the image, but as each new body part comes in, it must replace the previous image. Once one body part has been completely decoded, the user agent must set the img element to the completely available state and queue a task to fire a simple event named load at the img element.

    The progress and loadend events are not fired for multipart/x-mixed-replace image streams.

    If the resource type and data corresponds to a supported image format, as described below

    The next task that is queued by the networking task source while the image is being fetched must run the following steps:

    1. If the user agent is able to determine image request's image's width and height, and image request is pending request, abort the image request for the current request, upgrade the pending request to the current request, update the img element's presentation appropriately, and set image request's state to partially available.

    2. Otherwise, if the user agent is able to determine image request's image's width and height, and image request is current request, update the img element's presentation appropriately and set image request's state to partially available.

    3. Otherwise, if the user agent is able to determine that image request's image is corrupted in some fatal way such that the image dimensions cannot be obtained, and image request is pending request, abort the image request for the current request and the pending request, upgrade the pending request to the current request, set current request to the broken state, fire a simple event named error at the img element, fire a simple event named loadend at the img element, and abort these steps.

    4. Otherwise, if the user agent is able to determine that image request's image is corrupted in some fatal way such that the image dimensions cannot be obtained, and image request is current request, abort the image request for image request, fire a simple event named error at the img element, fire a simple event named loadend at the img element, and abort these steps.

    That task, and each subsequent task, that is queued by the networking task source while the image is being fetched, if image request is the current request, must update the presentation of the image appropriately (e.g. if the image is a progressive JPEG, each packet can improve the resolution of the image).

    Furthermore, the last task that is queued by the networking task source once the resource has been fetched must additionally run these steps:

    1. Set image request to the completely available state.

    2. Add the image to the list of available images using the key key, with the ignore higher-layer caching flag set.

    3. Fire a progress event or simple event named load at the img element, depending on the resource in image request.

    4. Fire a progress event or simple event named loadend at the img element, depending on the resource in image request.

    そうでなければ

    The image data is not in a supported file format; the user agent must set image request to the broken state, abort the image request for the current request and the pending request, upgrade the pending request to the current request, and then queue a task to first fire a simple event named error at the img element and then fire a simple event named loadend at the img element.

To abort the image request for an image request image request means to run the following steps:

  1. Forget image request's image data, if any.

  2. Abort any instance of the fetching algorithm for image request, discarding any pending tasks generated by that algorithm.

To upgrade the pending request to the current request for an img element means to run the following steps:

  1. Let the img element's current request be the pending request.

  2. Let the img element's pending request be null.

To fire a progress event or simple event named type at an element e, depending on resource r, means to fire a progress event named type at e if r is CORS-same-origin, and otherwise fire a simple event named type at e.

To restart the animation for an img element means that, if the image is an animated image, all animated images with the same absolute URL and the same image data in the img element's Document are expected to restart their animation.

While a user agent is running the above algorithm for an element x, there must be a strong reference from the element's Document to the element x, even if that element is not in its Document.

When an img element is in the completely available state and the user agent can decode the media data without errors, then the img element is said to be fully decodable.

Whether the image is fetched successfully or not (e.g. whether the response code was a 2xx code or equivalent) must be ignored when determining the image's type and whether it is a valid image.

This allows servers to return images with error responses, and have them displayed.

The user agent should apply the image sniffing rules to determine the type of the image, with the image's associated Content-Type headers giving the official type. If these rules are not applied, then the type of the image must be the type given by the image's associated Content-Type headers.

User agents must not support non-image resources with the img element (e.g. XML files whose root element is an HTML element). User agents must not run executable code (e.g. scripts) embedded in the image resource. User agents must only display the first page of a multipage resource (e.g. a PDF file). User agents must not allow the resource to act in an interactive fashion, but should honor any animation in the resource.

This specification does not specify which image types are to be supported.


An img element is associated with a source set.

A source set is a set of zero or more image sources and a source size.

An image source is a URL, and optionally either a density descriptor, or a width descriptor.

A source size is a <source-size-value>. When a source size has a unit relative to the viewport, it must be interpreted relative to the img element's document's viewport. Other units must be interpreted the same as in Media Queries. [MQ]

When asked to select an image source for a given img element el, user agents must do the following:

  1. Update the source set for el.

  2. If el's source set is empty, return null as the URL and undefined as the pixel density and abort these steps.

  3. Otherwise, take el's source set and let it be source set.

  4. In a user agent-specific manner, choose one image source from source set. Let this be selected source.

  5. Return selected source and its associated pixel density.

When asked to update the source set for a given img element el, user agents must do the following:

  1. Set el's source set to an empty source set.

  2. If el has a parent node and that is a picture element, let elements be an array containing el's parent node's child elements, retaining relative order. Otherwise, let elements be array containing only el.

  3. Iterate through elements, doing the following for each item child:

    1. If child is el:

      1. If child has a srcset attribute, parse child's srcset attribute and let the returned source set be source set. Otherwise, let source set be an empty source set.

      2. Parse child's sizes attribute and let source set's source size be the returned value.

      3. If child has a src attribute whose value is not the empty string and source set does not contain an image source with a density descriptor value of 1, and no image source with a width descriptor, append child's src attribute value to source set.

      4. Let el's source set be source set.

      5. Abort this algorithm.

    2. If child is not a source element, continue to the next child. Otherwise, child is a source element.

    3. If child does not have a srcset attribute, continue to the next child.

    4. Parse child's srcset attribute and let the returned source set be source set.

    5. If source set has zero image sources, continue to the next child.

    6. If child has a media attribute, and its value is not a valid media query, or is a valid media query that evaluates to false, continue to the next child.

    7. Parse child's sizes attribute and let source set's source size be the returned value.

    8. If child has a type attribute, and its value is an unknown or unsupported MIME type, continue to the next child.

    9. Normalize the source densities of source set.

    10. Let el's source set be source set.

    11. Abort this algorithm.

Each img element independently considers its previous sibling source elements plus the img element itself for selecting an image source, ignoring any other (invalid) elements, including other img elements in the same picture element, or source elements that are following siblings of the relevant img element.

When asked to parse a srcset attribute from an element, parse the value of the element's srcset attribute as follows:

  1. Let input be the value passed to this algorithm.

  2. Let position be a pointer into input, initially pointing at the start of the string.

  3. Let raw candidates be an initially empty ordered list of URLs with associated unparsed descriptor list. The order of entries in the lists is the order in which entries are added to the lists.

  4. Splitting loop: Collect a sequence of characters that are space characters or U+002C COMMA characters.

  5. If position is past the end of input, then jump to the step labeled descriptor parser.

  6. Collect a sequence of characters that are not space characters, and let that be url.

  7. Let descriptors be a new empty list.

  8. If url ends with a "," (U+002C) character, follow these substeps:

    1. Remove all trailing U+002C COMMA characters from url.

    2. If url is empty, then jump to the step labeled splitting loop.

    Otherwise, follow these substeps:

    1. Let current token be the empty string.

    2. Let state be start.

    3. Let c be the character at position. Do the following depending on the value of state. For the purpose of this step, "EOF" is a special character representing that position is past the end of input.

      Start

      Do the following, depending on the value of c:

      Space character

      If current token is not empty, append current token to descriptors and let current token be the empty string. Set state to after token.

      "," (U+002C)

      Advance position to the next character in input. If current token is not empty, append current token to descriptors. Jump to the step labeled add candidate.

      "(" (U+0028)

      Append c to current token. Set state to in parens.

      EOF

      If current token is not empty, append current token to descriptors. Jump to the step labeled add candidate.

      Anything else

      Append c to current token.

      In parens

      Do the following, depending on the value of c:

      ")" (U+0029)

      Append c to current token. Set state to start.

      EOF

      Append current token to descriptors. Jump to the step labeled add candidate.

      Anything else

      Append c to current token.

      After token

      Do the following, depending on the value of c:

      Space character

      Stay in this state.

      EOF

      Jump to the step labeled add candidate.

      Anything else

      Set state to start. Set position to the previous character in input.

      Advance position to the next character in input. Repeat this step.

  9. Add candidate: Add url to raw candidates, associated with descriptors.

  10. Return to the step labeled splitting loop.

  11. Descriptor parser: Let candidates be an initially empty source set. The order of entries in the list is the order in which entries are added to the list.

  12. For each entry in raw candidates with URL url associated with the unparsed descriptor list descriptor list, run these substeps:

    1. Let error be no.

    2. Let width be absent.

    3. Let density be absent.

    4. Let future-compat-h be absent.

    5. For each token in descriptor list, run the appropriate set of steps from the following list:

      If the token consists of a valid non-negative integer followed by a U+0077 LATIN SMALL LETTER W character
      1. If width and density are not both absent, then let error be yes.

      2. Apply the rules for parsing non-negative integers to the token. If the result is zero, let error be yes. Otherwise, let width be the result.

      If the token consists of a valid floating-point number followed by a U+0078 LATIN SMALL LETTER X character
      1. If width, density and future-compat-h are not all absent, then let error be yes.

      2. Apply the rules for parsing floating-point number values to the token. If the result is less than zero, let error be yes. Otherwise, let density be the result.

        If density is zero, the intrinsic dimensions will be infinite. User agents are expected to have limits in how big images can be rendered, which is allowed by the hardware limitations clause.

      If the token consists of a valid non-negative integer followed by a U+0068 LATIN SMALL LETTER H character
      1. If future-compat-h and density are not both absent, then let error be yes.

      2. Apply the rules for parsing non-negative integers to the token. If the result is zero, let error be yes. Otherwise, let future-compat-h be the result.

    6. If error is still no, then add a new image source to candidates whose URL is url, associated with a width width if not absent and a pixel density density if not absent.

  13. Return candidates.

When asked to parse a sizes attribute from an element, parse a comma-separated list of component values from the value of the element's sizes attribute (or the empty string, if the attribute is absent), and let unparsed sizes list be the result. [CSSSYNTAX]

For each unparsed size in unparsed sizes list:

  1. Remove all consecutive <whitespace-token>s from the end of unparsed size. If unparsed size is now empty, continue to the next iteration of this algorithm.

  2. If the last component value in unparsed size is a valid non-negative <source-size-value>, let size be its value and remove the component value from unparsed size. Otherwise, continue to the next iteration of this algorithm.

  3. Remove all consecutive <whitespace-token>s from the end of unparsed size. If unparsed size is now empty, return size and exit this algorithm.

  4. Parse the remaining component values in unparsed size as a <media-condition>. If it does not parse correctly, or it does parse correctly but the <media-condition> evaluates to false, continue to the next iteration of this algorithm. [MQ]

  5. Return size and exit this algorithm.

If the above algorithm exhausts unparsed sizes list without returning a size value, return 100vw.

While a valid source size list only contains a bare <source-size-value> (without an accompanying <media-condition>) as the last entry in the <source-size-list>, the parsing algorithm technically allows such at any point in the list, and will accept it immediately as the size if the preceding entries in the list weren't used. This is to enable future extensions, and protect against simple author errors such as a final trailing comma.

An image source can have a density descriptor, a width descriptor, or no descriptor at all accompanying its URL. Normalizing a source set gives every image source a density descriptor.

When asked to normalize the source densities of a source set source set, the user agent must do the following:

  1. Let source size be source set's source size.

  2. For each image source in source set:

    1. If the image source has a density descriptor, continue to the next image source.

    2. Otherwise, if the image source has a width descriptor, replace the width descriptor with a density descriptor with a value of the width descriptor divided by the source size and a unit of x.

      If the source size is zero, the density would be infinity, which results in the intrinsic dimensions being zero by zero.

    3. Otherwise, give the image source a density descriptor of 1x.

The user agent may at any time run the following algorithm to update an img element's image in order to react to changes in the environment. (User agents are not required to ever run this algorithm; for example, if the user is not looking at the page any more, the user agent might want to wait until the user has returned to the page before determining which image to use, in case the environment changes again in the meantime.)

  1. Asynchronously await a stable state. The synchronous section consists of all the remaining steps of this algorithm until the algorithm says the synchronous section has ended. (Steps in synchronous sections are marked with ⌛.)

  2. ⌛ If the img element does not have a srcset attribute specified and it either has no parent or it is not a picture element, is not in the completely available state, has image data whose resource type is multipart/x-mixed-replace, or if its update the image data algorithm is running, then abort this algorithm.

  3. ⌛ Let selected source and selected pixel density be the URL and pixel density that results from selecting an image source, respectively.

  4. ⌛ If selected source is null, then abort these steps.

  5. ⌛ If selected source and selected pixel density are the same as the element's last selected source and current pixel density, then abort these steps.

  6. Resolve selected source, relative to the element.

  7. ⌛ Let CORS mode be the state of the element's crossorigin content attribute.

  8. ⌛ If the resolve a URL algorithm is not successful, abort these steps.

  9. End the synchronous section, continuing the remaining steps asynchronously.

  10. Do a potentially CORS-enabled fetch of the resulting absolute URL, with the mode being CORS mode, the origin being the origin of the img element's Document, and the default origin behaviour set to taint.

    If this download fails in any way (other than the response code not being a 2xx code, as mentioned earlier), or if the image format is unsupported (as determined by applying the image sniffing rules, again as mentioned earlier), or if the resource type is multipart/x-mixed-replace, then abort these steps.

    Otherwise, wait for the fetch algorithm to queue its last task, and then continue with these steps. The data obtained in this way is used in the steps below.

  11. Queue a task to run the following substeps:

    1. If the img element has experienced relevant mutations since this algorithm started, then abort these steps.

    2. Let the img element's last selected source be selected source and the img element's current pixel density be selected pixel density.

    3. Let the img element's current request's current URL be the resulting absolute URL from the earlier step.

    4. Replace the img element's image data with the resource obtained by the earlier step of this algorithm. It can be either CORS-same-origin or CORS-cross-origin; this affects the origin of the image itself (e.g. when used on a canvas).

    5. Fire a simple event named load at the img element.


The task source for the tasks queued by algorithms in this section is the DOM manipulation task source.


What an img element represents depends on the src attribute and the alt attribute.

If the src attribute is set and the alt attribute is set to the empty string

The image is either decorative or supplemental to the rest of the content, redundant with some other information in the document.

If the image is available and the user agent is configured to display that image, then the element represents the element's image data.

Otherwise, the element represents nothing, and may be omitted completely from the rendering. User agents may provide the user with a notification that an image is present but has been omitted from the rendering.

If the src attribute is set and the alt attribute is set to a value that isn't empty

The image is a key part of the content; the alt attribute gives a textual equivalent or replacement for the image.

If the image is available and the user agent is configured to display that image, then the element represents the element's image data.

Otherwise, the element represents the text given by the alt attribute. User agents may provide the user with a notification that an image is present but has been omitted from the rendering.

If the src attribute is set and the alt attribute is not

There is no textual equivalent of the image available.

If the image is available and the user agent is configured to display that image, then the element represents the element's image data.

Otherwise, the user agent should display some sort of indicator that there is an image that is not being rendered, and may, if requested by the user, or if so configured, or when required to provide contextual information in response to navigation, provide caption information for the image, derived as follows:

  1. If the image is a descendant of a figure element that has a child figcaption element, and, ignoring the figcaption element and its descendants, the figure element has no Text node descendants other than inter-element whitespace, and no embedded content descendant other than the img element, then the contents of the first such figcaption element are the caption information; abort these steps.

  2. There is no caption information.

If the src attribute is not set and either the alt attribute is set to the empty string or the alt attribute is not set at all

The element represents nothing.

そうでなければ

The element represents the text given by the alt attribute.

The alt attribute does not represent advisory information. User agents must not present the contents of the alt attribute in the same way as content of the title attribute.

While user agents are encouraged to repair cases of missing alt attributes, authors must not rely on such behavior. Requirements for providing text to act as an alternative for images are described in detail below.

The contents of img elements, if any, are ignored for the purposes of rendering.


usemap属性が存在する場合、画像が関連付けられたイメージマップを示すことができる。

href属性を持つa要素の子孫である要素で使用される場合、ismap属性は、要素がサーバーサイドのイメージマップへのアクセスを提供することによって、その存在を示す。これは、イベントが対応するa要素でどのように処理されるかに影響する。

ismap属性は真偽属性である。属性は、href属性を持つ祖先a要素を持たない要素に指定してはならない。

usemapおよびismap属性は、picture要素で指定されるmedia属性をもつsource要素と一緒に使用される場合に混乱する振る舞いをもたらすかもしれない。

img要素は、寸法属性をサポートする。

The alt, src, srcset and sizes IDL attributes must reflect the respective content attributes of the same name.

The crossOrigin IDL attribute must reflect the crossorigin content attribute, limited to only known values.

The useMap IDL attribute must reflect the usemap content attribute.

The isMap IDL attribute must reflect the ismap content attribute.

image . width [ = value ]
image . height [ = value ]

これらの属性は、実際のレンダリングされた画像の大きさ、または寸法が未知である場合に0を返す。

対応するコンテンツ属性を変更するために、設定が可能である。

image . naturalWidth
image . naturalHeight

これらの属性は、画像の内在寸法、または寸法が未知の場合に0を返す。

image . complete

画像が完全にダウンロードされている場合、または、何も画像が指定されない場合にtrueを返す。そうでなければ、falseを返す。

image . currentSrc

画像の絶対URLを返す。

image = new Image( [ width [, height ] ] )

該当する場合、適切な引数で渡された値に設定されたwidthheight属性を持つ、新しいimg要素を返す。

The IDL attributes width and height must return the rendered width and height of the image, in CSS pixels, if the image is being rendered, and is being rendered to a visual medium; or else the intrinsic width and height of the image, in CSS pixels, if the image is available but not being rendered to a visual medium; or else 0, if the image is not available. [CSS]

On setting, they must act as if they reflected the respective content attributes of the same name.

The IDL attributes naturalWidth and naturalHeight must return the intrinsic width and height of the image, in CSS pixels, if the image is available, or else 0. [CSS]

The IDL attribute complete must return true if any of the following conditions is true:

Otherwise, the attribute must return false.

The value of complete can thus change while a script is executing.

The currentSrc IDL attribute must return the img element's current request's current URL.

A constructor is provided for creating HTMLImageElement objects (in addition to the factory methods from DOM such as createElement()): Image(width, height). When invoked as a constructor, this must return a new HTMLImageElement object (a new img element). If the width argument is present, the new object's width content attribute must be set to width. If the height argument is also present, the new object's height content attribute must be set to height. The element's document must be the active document of the browsing context of the Window object on which the interface object of the invoked constructor is found.

4.7.5.1 画像に対して代替として動作するテキストを提供に対する要件

テキストによる代替 [WCAG]は、視覚情報をアクセシブルにするための最も重要な方法である。これによりユーザーのニーズに合うように、任意の感覚様式(たとえば、視覚、聴覚や触覚)を介してレンダリングできるのである。テキストによる代替を提供することは、情報をさまざまなユーザーエージェントによって様々な方法でレンダリングすることを可能にする。たとえば、画像を見ることができない人は、合成音声を使用してテキストによる代替を読み上げさせることができる。

画像のalt属性は非常に重要なアクセシビリティー属性である。有用なalt属性コンテンツを作成することは、画像が出現するコンテキストおよびそのコンテキストにおいて画像が持ってもよい機能を著者に注意深く考慮することを要求する。ここを含むガイダンスは、著者が画像を使用するもっとも一般的な方法を扱う。追加のガイダンスおよびテクニックはResources on Alternative Text for Imagesで利用可能である。

4.7.5.1.1 ユーザーが画像のテキストによる代替の恩恵を受けるシナリオの例
4.7.5.1.2 一般的なガイドライン

特に指定されている場合を除き、alt属性を指定しなければならず、その値が空であってはならない。値は画像に対して適切な置換でなければならない。alt属性に対する具体的な要件は、以下の節で説明するように、ページでの画像の機能に依存する。

適切なテキストによる代替を判断するために、画像がページに含まれている理由を考えることが重要である。その目的は何か?このように考えることは、読者に意図する画像に関して何が重要かを理解するのに役立つ。すべての画像は、有用な情報を提供する、機能を実行する、インタラクティブな要素を分類する、美意識を高めるまたは純粋に装飾的といったページ上に存在する理由を持つ。したがって、画像が何のために存在するのかを理解することは、適切なテキストによる代替の記述を容易にする。

ハイパーリンク、またはbutton要素をもつa要素が、テキストコンテンツがないが1つ以上の画像を含む場合、alt属性がリンクやボタンの目的を同時に伝えるテキストを含む。

この例において、エディターインターフェースの一部が表示されている。各ボタンは、ユーザーが編集しているコンテンツに対して実行できるアクションを表すアイコンを持つ。画像を見ることができないユーザーのために、アクション名は画像のalt属性内に含まれる:

5つのボタン:太字、斜体、打ち消し線、
箇条書きリストおよび番号付きリスト。

  <ul>
  <li><button><img src="b.png" alt="Bold"></button></li>
  <li><button><img src="i.png" alt="Italics"></button></li>
  <li><button><img src="strike.png" alt="Strike through"></button></li>
  <li><button><img src="blist.png" alt="Bulleted list"></button></li>
  <li><button><img src="nlist.png" alt="Numbered list"></button></li>
  </ul>
  

この例では、a要素のリンクはロゴを含む。リンクは外部サイトからW3Cのウェブサイトを指す。テキストによる代替はリンク先の簡単な説明である。

W3C logo used as link content.

  <a href="http://w3.org">
  <img src="images/w3c_home.png" width="72" height="48" alt="W3C web site">
  </a>
  

リンクがW3Cのウェブサイトにあることを除いて、この例は前の例と同じである。テキストによる代替はリンク先の簡単な説明である。

W3C logo used as link content.

  <a href="http://w3.org">
  <img src="images/w3c_home.png" width="72" height="48" alt="W3C home">
  </a>
  

ロゴの画像を使用するコンテキストに依存することは、画像がテキストによる代替の一部として、ロゴであることの指示を提供するために適切だろう。4.7.1.1.19 ロゴ、記号、旗、またはエンブレムの節を参照のこと。

この例において、a要素のリンクがプレビューアイコンを含む。リンクは印刷用スタイルシートを適用するページを指す。テキストによる代替はリンク先の簡単な説明である。

Print preview icon used as link content.

  <a href="preview.html">
  <img src="images/preview.png" width="32" height="30" alt="Print preview.">
  </a>
  

この例で、ボタンは検索アイコンを含んでいる。ボタンは検索フォームを送信する。テキストによる代替はボタンが何をするかの簡単な説明である。

Search icon used as button content.

  <button>
  <img src="images/search.png" width="74" height="29" alt="Search">
  </button>
  

この例において、PIP社の会社のロゴは2つの画像に分割されており、1枚目は単語PIPを含み、2枚目は略語COをもつ。画像は、PIPCOのホームページへのリンクに属する唯一のコンテンツである。この場合、リンク先の簡単な説明が提供される。単一の実体として画像はユーザーに提供されるので、最初の画像のalt属性におけるテキストによる代替はPIP CO homeである。

Image containing the text 'PIP'.Image containing the text 'CO'.

  <a href="pipco-home.html">
  <img src="pip.gif" alt="PIP CO home"><img src="co.gif" alt="">
  </a>
  
4.7.5.1.4 グラフィカルな表現:チャート、図、グラフ、マップ、イラスト

たとえばフローチャート、図表、グラフ、または方角を示す地図などとして、グラフ形式でコンテンツが表示される際にユーザーは恩恵を受けるだろう。グラフ形式で提示されるコンテンツもテキスト形式で提供される場合、ユーザーもまた利益を得る。このユーザーは、画像を表示できない人たちを含む。(たとえば、非常に低速な接続である、またはテキストのみのブラウザを使用している、またはハンズフリー自動車音声ウェブブラウザによって読み出されるページを聞いている、あるいは、視覚障害を持ち、テキストを音声にレンダリングする支援技術使用しているため。)

次の円グラフの画像例において、円グラフに表示されるデータを表すalt属性でテキストをもつ:

Browser Share: Internet Explorer 25%, Firefox 40%, Chrome 25%, Safari 6% and Opera 4%.

  <img src="piechart.gif" alt="Pie chart: Browser Share - Internet Explorer 25%, Firefox 40%, Chrome 25%, Safari 6% and Opera 4%.">
  

この場合、グラフィカルな形式で画像が前の段落を繰り返す。alt属性コンテンツは画像を分類する。

 <p>According to a recent study Firefox has a 40% browser share, Internet Explorer has 25%, Chrome has 25%, Safari has 6% and Opera has 4%.</p>
 <p><img src="piechart.gif" alt="Pie chart representing the data in the previous paragraph."></p>

たとえばsrc属性値が間違っているため、画像が利用できない場合に、テキストによる代替が画像コンテンツの簡単な説明をユーザーに提供するのが見られる:

Representation of the code snippet above.

テキストによる代替が長くなる場合において、1つ以上の文は、構造化マークアップを使用することの恩恵を受けるだろう、簡単な説明またはalt属性を使用するラベル、および関連付けられた代替テキストを提供する。

これは、alt属性に含まれる短いテキストによる代替をもフローチャート画像の例である。この場合、テキストによる代替は画像が唯一のリンク内容としてリンク先の説明となる。リンクは、フローチャートで表されるプロセスの、同じ文書の中で説明を指す。

Flowchart: Dealing with a broken lamp.

  
  <a href="#desc"><img src="flowchart.gif" alt="Flowchart: Dealing with a broken lamp."></a>

  ...

  ...

  <div id="desc">
  <h2>Dealing with a broken lamp</h2>
  <ol>
  <li>Check if it's plugged in, if not, plug it in.</li>
  <li>If it still doesn't work; check if the bulb is burned out. If it is, replace the bulb.</li>
  <li>If it still doesn't work; buy a new lamp.</li>
  </ol>
  </div>

この例では、グラフの画像が存在する。情報がデータ集合であるため、alt属性でプレーンテキストによる代替としてグラフに示される情報を提供することは不適切である。グラフ画像で表されるデータを使用するデータテーブルの形式で画像の下に、構造化されたテキストによる代替が代わりに提供される。

Bar Chart showing average rainfall in millimetres by Country and Season.

各シーズンの最高および最低降雨の表示が表に含まれているため、グラフで容易に識別される傾向がデータテーブルにも利用できる。

Average rainfall in millimetres by country and season.
United KingdomJapanAustralia
Spring5.3 (highest)2.42 (lowest)
Summer4.5 (highest)3.42 (lowest)
Autumn3.5 (highest)1.81.5 (lowest)
Winter1.5 (highest)1.21 (lowest)
  <figure>
  <figcaption>Rainfall Data</figcaption>
  <img src="rainchart.gif" alt="Bar chart: Average rainfall in millimetres by Country and Season.">
  <table>
  <caption>Rainfall in millimetres by Country and Season.</caption>
  <tr><td><th scope="col">UK <th scope="col">Japan<th scope="col">Australia</tr>
  <tr><th scope="row">Spring <td>5.5 (highest)<td>2.4 <td>2 (lowest)</tr>
  <tr><th scope="row">Summer <td>4.5 (highest)<td>3.4<td>2 (lowest)</tr>
  <tr><th scope="row">Autumn <td>3.5 (highest) <td>1.8 <td>1.5 (lowest)</tr>
  <tr><th scope="row">Winter <td>1.5 (highest) <td>1.2 <td>1 lowest</tr>
  </table>
  </figure>
  

figure要素は、棒グラフ画像およびデータのテーブルをグループ化するために使用される。figcaption要素は、グループ化されたコンテンツに対するキャプションを提供する。

このセクションにおける例のいずれかに対してdetailsおよびsummary要素は使用され、その結果画像に対する説明は要求に応じて表示のみされる:

Details element in the closed state.

Details element in the open state with list content displayed.

  <figure>
  <img src="flowchart.gif" alt="Flowchart: Dealing with a broken lamp.">
  <details>
  <summary>Dealing with a broken lamp</summary>
  <ol>
  lt;li>Check if it's plugged in, if not, plug it in.</li>
  <li>If it still doesn't work; check if the bulb is burned out. If it is, replace the bulb.</li>
  <li>If it still doesn't work; buy a new lamp.</li>
  </ol>
  </details>
  </figure>
  

そのような時にサポートされるまで、detailsおよびsummary要素は、現在ブラウザであまりサポートされず、使用した場合に、機能を提供するためにスクリプトを使用する必要があるだろう。スクリプト化されたポリフィル、利用可能なスクリプト化されたカスタムコントロール、同様の機能を提供する人気のJavaScript UIウィジェットライブラリは多数存在する。

4.7.5.1.5 テキストの画像

時として画像はテキストのみを含み、そして画像の目的は、視覚効果とフォントの両方またはいずれか一方を利用するテキストを表示することにある。CSSを用いたスタイル付きテキストを使用することを強く推奨するが、これが不可能な場合、画像であるがままにalt属性で同じテキストを提供する。

この例は、テキストの画像を"Get Happy!"と表示する。派手な色とりどりのフリーハンド風に書かれている。画像は見出しの内容を構成する。この例において、画像のテキストによる代替は"Get Happy!"とすべきである。

Get Happy!

<h1><img src="gethappy.gif" alt="Get Happy!"></h1>

この例では、テキストからなる広告画像であり、フレーズ"The BIG sale"が3回繰り返され、回を重ねるごとにテキストはより小さくかつより暗くなり、最後の行は"...ends Friday"と読む。広告として、コンテキストにおける使用は、画像のテキストによる代替は一度だけテキスト"The BIG sale"を含むことが推奨される。視覚効果とテキストの繰り返しは、画像が表示できないユーザーにとって不要であり、混乱を招くかもしれない。

The big sale ...ends Friday.

  <p><img src="sale.gif" alt="The BIG sale ...ends Friday."></p>
  

テキストの画像と一緒に写真または他のグラフィックも存在する状況において、情報がまた画像を表示できないユーザーにも使用できるように、画像を表示できるユーザーに意味を伝える画像の他の説明とともに、テキストによる代替に含まれている画像テキスト内の単語を保証する。

画像がUnicodeで表現できない文字を表すために別の方法で使用される場合、たとえば外字、異体字、または新規の通貨記号のような新しい文字において、テキストによる代替は、たとえば、文字の発音を与えるために表音のひらがなやカタカナを使用するなど、同じものを記述するより伝統的な方法であるべきである。

1997年からのこの例において、中央の2つのバーとともに渦巻き状のEのように見える最新式の通貨記号のかわりに、画像を使用して表現される。代替テキストは、文字の発音を与える。

Only euro 5.99!

<p>Only <img src="euro.png" alt="euro ">5.99!

Unicode文字が同じ目的を果たすならば画像を使用すべきでない。たとえば装飾のためや、文字がUnicode文字集合にない(外字の場合のような)文字であるためなど、テキストが直接Unicodeを使用して表すことができない場合にのみ、画像が適切だろう。

デフォルトのシステムフォントが指定された文字をサポートしないため、著者が画像を使用するように誘惑される場合、ウェブフォントは画像よりも優れた解決策である。

装飾写本は、その文字の一部のグラフィックスを使用するかもしれない。このような状況でテキストによる代替は、単に画像が表す文字である。

Once upon a time and a long long time ago...

<p><img src="initials/fancyO.png" alt="O">nce upon a time and a long long time ago...
4.7.5.1.6 テキストを含む画像

時として、画像はグラフおよび関連するテキストのようなグラフィックスを構成する。この場合、テキストによる代替に画像内のテキストを含めることを推奨する。

円グラフと関連するテキストを含む画像を考えてみる。テキストの画像でなく、任意の関連するテキストを可能な限りテキストとして提供することを推奨する。これが不可能な場合、画像で伝えられる関連情報とともにテキストによる代替内のテキストを含む。

Figure 1. Distribution of Articles by Journal 
  Category. Pie chart: Language=68%, Education=14% and Science=18%.

  <p><img src="figure1.gif" alt="Figure 1. Distribution of Articles by Journal Category.
  Pie chart: Language=68%, Education=14% and Science=18%."></p>
  

同じ円グラフの画像のもう1つの例では、alt属性と長い代替テキストに含まれる短いテキストによる代替を表示する。figureおよびfigcaption要素は、画像とより長いテキストによる代替を関連付けるために使用される。alt属性は、画像にラベル付けするために使用される。

  <figure>
  <img src="figure1.gif" alt="Figure 1">
  <figcaption><strong>Figure 1.</strong> Distribution of Articles by Journal Category.
  Pie chart: Language=68%, Education=14% and Science=18%.</figcaption>
  </figure>
  

前の例と比べたこの方法の利点は、テキストによる代替が常にすべてのユーザーに利用可能であることにある。また、テキストによる代替がalt属性を使用して提供されない場所で、テキストによる代替で使用されるために構造化されたマークアップを許可する。

4.7.5.1.7テーマを向上させる画像やページ内容の主題

周囲のテキストで直接議論されないが、依然として一部の関連性を持つ画像はimg要素を使用して、ページに含めることが可能である。このような画像は単なる装飾以上のものであり、テーマやページ内容の主題を補強するので、内容の一部を相変わらず形成することがある。この場合、テキストによる代替を提供することを推奨する。

これはページ内容の主題に密接に関連するが、直接説明されない画像の一例である。その詩の暗唱ページで、詩に触発された絵の画像である。次の断片は例を示す。画像は、"Lady of Shallot"(シャロットの貴婦人)と題した絵画であり、絵は詩に触発され、絵の主題は詩から派生している。したがって、テキストによる代替が提供されることを強く推奨する。alt属性に画像の内容の短い説明があり、文の下に長い説明へのリンクがある。長い説明の最後に絵についての詳しい情報へのリンクもある。

アルフレッド・テニスンの詩シャロットの貴婦人に触発された絵

  <header>
  <h1>The Lady of Shalott</h1>
  <p>A poem by Alfred Lord Tennyson</p>
  </header>

  <img src="shalott.jpeg" alt="Painting of a  young woman with long hair, sitting in a wooden boat. ">
  <p><a href="#des">Description of the painting</a>.</p>


  <!-- Full Recitation of Alfred, Lord Tennyson's Poem.  -->

  ...
  ...
  ...
  <p id="des">The woman in the painting is wearing a flowing white dress. A large piece of intricately 
  patterned fabric is draped over the side. In her right hand she holds the chain mooring the boat. Her expression 
  is mournful. She stares at a crucifix lying in front of her. Beside it are three candles. Two have blown out. 
  <a href="http://bit.ly/5HJvVZ">Further information about the painting</a>.</p>
  

この例は、ページの主題の写真として画像を識別するテキストによる代替の提供を説明する。

Portrait photo(black and white) of Robin, accompanied by a heading 'Robin Berjon' and a question
  'what more needs to be said?'
  <img src="orateur_robin_berjon.png" alt="Portrait photo(black and white) of Robin.">
  <h1>Robin Berjon</h1>
  <p>What more needs to be said?</p>
  
4.7.5.1.8 周囲のテキストの一部をグラフィカルに表現

多くの場合、画像は実際には単なる補足であり、その存在は単に周囲のテキストを強調するだけである。この場合、alt属性が存在しなければならないが、その値は空文字列でなければならない。

一般に画像は、画像を削除してもページの有用性が弱まるわけでない場合にこのカテゴリに分類されるが、画像を含めることは、視覚ブラウザのユーザーにとって概念を理解することがはるかに容易になる。

画像の有用なテキストによる代替を記述することは必ずしも容易ではない。別のオプションは、画像についての詳しい情報へのリンクを提供することである。

同じ画像のこの例では、alt属性に含まれる短いテキストによる代替があり、画像の後にリンクがある。リンクは絵に関する情報を含むページを指す。

The Lady of Shalott
A poem by Alfred Lord Tennyson.

小さなボートに座る、白い流れるようなドレスの女性の絵。

About this painting.

Full recitation of Alfred, Lord Tennyson's poem.

  <header><h1>The Lady of Shalott</h1>
  <p>A poem by Alfred Lord Tennyson</p></header>
  <figure>
  <img src="shalott.jpeg" alt="Painting of a woman in a white flowing dress, sitting in a small boat.">
  <p><a href="http://bit.ly/5HJvVZ">About this painting.</a></p>
  </figure>
  <!-- Full Recitation of Alfred, Lord Tennyson's Poem.  -->
  
4.7.5.1.9 情報を追加しない、純粋に装飾的な画像

純粋に装飾的な画像は、視覚的な機能強化や装飾、画像を表示できるユーザーへの美意識を超えた機能や情報を提供しない装飾である。

空のalt属性(alt="")を使用することによって支援技術が無視できるように、純粋に装飾的な画像をマークアップする。装飾的な画像をインラインで含むことが受け入れられないことはないが、CSSを使用した画像を含むために純粋に装飾的であることが推奨される。

ある人のブログの装飾バナーとして使用される画像の例では、画像は何も情報を提供しないので、空のalt属性を持つべきである。

Clara's Blog

Welcome to my blog...

  <header>
  <div><img src="border.gif" alt="" width="400" height="30"></div>
  <h1>Clara's Blog</h1>
  </header>
  <p>Welcome to my blog...</p>
  
4.7.5.1.10 インライン画像

画像が文書でテキストの流れの一部としてインラインで使用される場合、離れている文書の文脈で理にかなったテキストによる代替として単語またはフレーズを提供する。

I love you.

I <img src="heart.png" alt="love"> you.

My heart breaks.

My <img src="heart.png" alt="heart"> breaks.

画像が小さな画像ファイルに分割されている場合、再度完全な画像を形成するために一緒に表示され、全体として画像に関連するガイダンスに従ってalt属性を使用する画像のいずれかに対するテキストによる代替を含み、そして他の画像で空のalt属性を含む。

この例において、PIP社の会社のロゴを表す絵が2枚に分割されており、1枚目は文字"PIP"を含み、2枚目は単語"CO"を持つ。代替テキストPIP COは最初の画像のalt属性にある。

Image containing the text 'PIP'.Image containing the text 'CO'.

  <img src="pip.gif" alt="PIP CO"><img src="co.gif" alt="">
  

次の例において、評価は、3つの塗りつぶされた星と、2つの中抜きの星として示される。テキストによる代替は"★★★☆☆"かもしれないが、代わりに著者は、より親切な形式"3 out of 5"の評価を与えるようにした。これは最初の画像のテキストによる代替であり、残りは空のalt属性を持つ。

3 out of 5.

  <p>Rating: <meter max=5 value=3>
  <img src="1" alt="3 out of 5">
  <img src="1" alt=""><img src="1" alt="">
  <img src="0" alt=""><img src="0" alt="">
  </meter></p>
  
4.7.5.1.12 イメージマップ
img要素が、href属性を持つarea要素を含むmap要素を参照するusemap属性を持つ場合、imgはインタラクティブコンテンツであると見なされる。このような場合、alt属性を使用して画像のテキストによる代替を常に提供する。

カトゥーンバの地図である以下の画像を考える。地図が南北カトゥーンバの領域に対応する2つのインタラクティブ領域を持つ。

Map of Katoomba.

North KatoombaSouth Katoomba

テキストによる代替は、画像の簡単な説明である。各area要素のalt属性は、それぞれリンクされた地域のターゲットページのコンテンツを説明するテキストを提供する。

<p>View houses for sale in North Katoomba or South Katoomba:</p>
 <p><img src="imagemap.png" width="209" alt="Map of Katoomba" height="249" usemap="#Map">

 <map name="Map"> 
 <area shape="poly" coords="78,124,124,10,189,29,173,93,168,132,136,151,110,130" 
 href="north.html" alt="Houses in North Katoomba">
 <area shape="poly" coords="66,63,80,135,106,138,137,154,167,137,175,133,144,240,49,223,17,137,17,61" 
 alt="Houses in South Katoomba" href="south.html">
 </map> 

一般にイメージマップは、リンク用の画像をスライスする代わりに使用されるべきである。

複数画像から合成写真を作成する場合、画像の1つ以上をリンクしたいと思うかもしれない。リンクの目的を説明するために、各リンクされた画像に対してalt属性を提供する。

次の例において、合成写真は"Crocoduck"を示すために使用される。これは、ワニの一部とアヒルの一部によって進化の原則を無視する架空の生き物である。Crocoduckと交流するように求めているが、用心する必要がある。

crocodile's angry, chomping headduck's soft, feathery body

  <h1>The crocoduck</h1>
  <p>You encounter a strange creature called a "crocoduck".
  The creature seems angry!Perhaps some friendly stroking will help to calm
  it, but be careful not to stroke any crocodile parts. This would just enrage
  the beast further.</p>
  <a href="?stroke=head"><img src="crocoduck1.png" alt="Stroke crocodile's angry, chomping head"></a>
  <a href="?stroke=body"><img src="crocoduck2.png" alt="Stroke duck's soft, feathery body"></a>  
  
4.7.5.1.14 写真の画像

写真やグラフィックス画像は、視覚オブジェクトの表現、人、風景、抽象化などが含まれる。この非テキストコンテンツ [WCAG] は、視覚的に大量の情報を伝えるか、晴眼者に特定の感覚的な体験 [WCAG]を提供できる。例としては、写真、絵画、図面やアートワークが含まれる。

画像に対する適切なテキストによる代替は、簡単な説明または識別名である[WCAG]。すべてのテキストによる代替のオーサリング判定のように、画像に対して適切なテキストによる代替を書くことは人間の判断を必要とする。テキスト値は、画像が使用されるコンテキストとページ作者の文体の主観的なものである。したがって、特定の画像に対するaltテキストの'正しい'ものはない。非テキストコンテンツの簡単な説明を与える短いテキストによる代替の提供に加えて、適切な有用である場合にも別のものを介して補足的コンテンツの提供を意味する。

この例は、写真共有サイトにアップロードした画像を示す。写真は風呂に座っている猫である。画像は、img要素のalt属性を用いて提供されるテキストによる代替を持つ。また、figure要素およびキャプションテキストを識別するためのfigcaption要素を使用したものでimg要素を含むことで、キャプションを提供する。

ローラ猫はお風呂の浴槽に傘の下で座っている。

Lola prefers a bath to a shower.

  <figure>
  <img src="664aef.jpg" alt="Lola the cat sitting under an umbrella in the bath tub.">
  <figcaption>Lola prefers a bath to a shower.</figcaption>
  </figure>
  

画像の主題が解釈が自由であるため、この例は完全な記述を受け付けない画像である。画像を表示できないユーザーにどのような画像であるかを提供するalt属性でテキストによる代替を画像は持つ。画像はまた、figure要素においてimg要素を含む、およびキャプションテキストを識別するためにfigcaption要素を使用することによって、提供されるキャプションも持つ。

An abstract, freeform, vertically symmetrical, black inkblot on a light background.

The first of the ten cards in the Rorschach test.

<figure>
  <img src="Rorschach1.jpg" alt="An abstract, freeform, vertically symmetrical, black inkblot on a light background.">
  <figcaption>The first of the ten cards in the Rorschach test.</figcaption>
  </figure> 
4.7.5.1.15 ウェブカメラ画像

ウェブカメラの画像は、自動で定期的に更新される静的な画像である。一般に画像は固定された場所からのものであり、それぞれ新しい画像がカメラからアップロードされるか、またはユーザーが更新された画像を表示ためにページを再読み込みする必要があるので、画像は自動的にページ上で更新してもよい。例としては、交通および天気カメラなどがある。

この例はかなり典型的である。タイトルとタイムスタンプは画像に含まれ、自動的にウェブカメラのソフトウェアによって生成される。テキスト情報が画像に含まれていなかった場合により良いが、テキスト情報は画像の一部であるので、テキストによる代替の一部としてテキスト情報を含む。キャプションはまた、figureおよびfigcaption要素を使って提供される。画像は建物近くの現在の天気について視覚情報を伝えるために提供されるが、ウェブカメラの画像が自動的に生成されてアップロードされるので、地元の天気予報が提供されるリンクが、テキストによる代替としてそのような情報を提供することは実用的でないだろう。

alt属性のテキストは、音声ソフトウェアへのテキストによって知らせる場合にテキストをよりわかりやすくするために設計された、タイムスタンプの単調なバージョンを含む。気象条件と日時が変化するにもかかわらず、テキストによる代替はまた、変化しない画像で見られることの一部の側面の記述を含む。

ソッピース家の気象カメラ。Taken on the 21/04/10 at 11:51 and 34 seconds. In the foreground are the safety
  rails on the flat part of the roof. 近くに低層の工業用建物があり、向こうに平らなブロックがある。In the distance there's a
  church steeple.

View from the top of Sopwith house, looking towards North Kingston. This image is updated every hour.

View the latest weather details for Kingston upon Thames.

<figure>
  <img src="webcam1.jpg" alt="Sopwith house weather cam. Taken on the 21/04/10 at 11:51 and 34 seconds.
  In the foreground are the safety rails on the flat part of the roof. Nearby there are low rise industrial buildings,
  beyond are blocks of flats. In the distance there's a church steeple.">
  <figcaption>View from Sopwith house, looking towards north Kingston. This image is updated every hour.</figcaption>
  </figure>
  <p>View the <a href="http://news.bbc.co.uk/weather/forecast/4296?area=Kingston">latest weather details</a> for Kingston upon Thames.</p>
  
4.7.5.1.16 公開時にテキストによる代替が利用不能である場合

一部のケースにおいて、画像は公開された文書に含まれるが、著者が適切なテキストによる代替を提供することができない。このような場合における最小要件は、以下の条件のもとでfigureおよびfigcaption要素を用いて画像のキャプションを提供することである。

言い換えれば、figureの最良のコンテンツは、img要素とfigcaption要素であり、かつfigcaption要素は(キャプション)コンテンツを含まなければならない。

そのような場合は最小限に保たれるべきである。実際の代替テキストを提供する能力を有する著者のわずかな可能性がある場合、alt属性の省略を許容しないだろう。

この例において、写真共有サイトに多数の画像のようなバルクアップロードの一部として、ある人が写真をアップロードする。ユーザーは、テキストによる代替または画像のキャプションを提供していない。サイトのオーサリングツールは、画像に対して持っている有用な情報を使ってキャプションを自動的に挿入する。この場合において、それはファイル名および、写真が撮影された日付である。

下記例のキャプションテキストは適切なテキストによる代替でなく、ウェブアクセシビリティーガイドライン2.0に準拠していない。[WCAG]

no text alternative provided

clara.jpg, taken on 12/11/2010.

  <figure>
  <img src="clara.jpg">
  <figcaption>clara.jpg, taken on 12/11/2010.</figcaption>
  </figure>
  

この例ですら、できる限り多くの有用な情報が依然としてfigcaption要素に含まれることに注意する。

次の2番目の例において、ある人が写真共有サイトに写真をアップロードする。彼女は、テキストによる代替でなく、画像のキャプションを提供している。サイトはalt属性でテキストによる代替を追加する機能をユーザーに提供していないため、この可能性がある。

no text alternative provided

Eloisa with Princess Belle

  <figure>
  <img src="elo.jpg">
  <figcaption>Eloisa with Princess Belle</figcaption>
  </figure>
  

時として画像全体の要点は、テキストの説明が利用できず、ユーザーが説明を提供する。もう一つの例は、画像を表示し、正しい代替テキストをもつページを書く目的に対して正確に代替テキストを求めるソフトウェアだろう。そのようなページは次のように、画像のテーブルを持つことができる:

<table>
  <tr><tr> <th> Image <th> Description<tr>
  <td>
  <figure>
  <img src="2421.png">
  <figcaption>Image 640 by 100, filename 'banner.gif'</figcaption>
  </figure>
  <td> <input name="alt2421">
  <tr>
  <td> <figure>
  <img src="2422.png">
  <figcaption>Image 200 by 480, filename 'ad3.gif'</figcaption>
  </figure>
  <td> <input name="alt2422">
  </table>

(たとえば目が見えないため、など)一部のユーザーは一切画像を使用することができないので、alt属性は、上記の例のように、全くテキストによる代替が利用できず、誰も利用できない際に省略することが許可される。

4.7.5.1.17 ユーザーを意図しない画像

一般に、著者は画像を表示する以外の目的でimg要素を使用することは避けるべきである。

たとえばページビューをカウントするサービスの一部として用いるなど、画像を表示する以外の目的でimg要素を使用する場合、空のalt属性を使用する。

ウェブページの統計情報を収集するために使用されるimg要素の例を示す。画像に意味がないのでalt属性は空である。

  <img src="http://server3.stats.com/count.pl?NeonMeatDream.com" width="0" height="0" alt="">
  

上記例のように0に設定するwidthおよびheight属性を使用するよう推奨される。

もう1つの用例は、spacer.gifのような画像がコンテンツの位置決めを補助するために使用される場合である。画像に意味がないのでalt属性は空である。

  <img src="spacer.gif" width="10" height="10" alt="">
  

img要素の代わりにCSSコンテンツを配置して使用することを推奨する。

4.7.5.1.18 アイコン画像

アイコンは通常、プログラム、アクション、データファイルや概念を表す単純な絵である。アイコンは、視覚ブラウザのユーザーに一目で機能を認識するのを助けることを意図する。

アイコンが同じ意味を伝えるテキストを補足する際に空のalt属性を使用する。

この例では、サイトのホームページを指すリンクは、家のアイコン画像とテキスト"home"を含む。画像は、空のaltテキストを持つ。画像がこの方法で使用される場合、CSSを使用して画像を追加することが適切でもあるだろう。

A house icon next to the word 'home'.

  <a href="home.html"><img src="home.gif" width="15" height="15" alt="">Home</a>
  
  #home:before
  { 
  content: url(home.png);
  }

  <a href="home.html" id="home">Home</a>
  

この例では、警告アイコンを伴う警告メッセージを表示している。単語"Warning!"はアイコンの次の強調テキストである。アイコンによって伝えられる情報が冗長であるため、img要素は空のalt属性が与えられる。

Warning!Warning! Your session is about to expire.

  <p><img src="warning.png" width="15" height="15" alt="">
  <strong>Warning!</strong> 
  Your session is about to expire</p>
  

アイコンがテキストで使用できない追加情報を伝える場合、テキストによる代替を提供する。

この例では、警告アイコンを伴う警告メッセージを表示している。アイコンはメッセージの重要性を強調し、特定の内容型として識別する。

Warning!Your session is about to expire.

  <p><img src="warning.png" width="15" height="15" alt="Warning!">
  Your session is about to expire</p>
  
4.7.5.1.19 ロゴ、 記号、旗、またはエンブレム

多くのページは、会社、組織、プロジェクト、バンド、ソフトウェアパッケージ、国、またはその他団体を表すロゴ、記号、旗、またはエンブレムを含む。適切なテキストによる代替として考えることができるものは、すべての画像のように、使用されている画像におけるコンテキスト、与えられたコンテキストで役立つ機能に依存する。

ロゴがリンクの唯一のコンテンツである場合、alt属性でリンク先の簡単な説明を提供する。

この例は、HTML仕様へリンクの唯一のコンテンツとして、HTML5ロゴの使用方法を示す。

HTML 5.1 Nightly specification

  <a href="http://dev.w3.org/html5/spec/spec.html">
  <img src="HTML5_Logo.png" alt="HTML 5.1 specification"></a>
  

たとえばページの見出しのように、ロゴが団体を表すために使用されている場合、テキストによる代替としてはロゴによって表されるその団体の名前を提供する。

この例は、自身を表現するために使用されているWebPlatform.orgロゴの使用を示す。

WebPlatform.org and other developer resources

  <h2><img src="images/webplatform.png" alt="WebPlatform.org"> and other developer resources<h2>
  

上記の例におけるテキストによる代替はまた、画像コンテンツのタイプを説明するために単語"logo"を含むかもしれない。そのような場合、この情報を表現するために角括弧を用いることが提案される:alt="[logo] WebPlatform.org".

ロゴが表すものの名前の横にロゴが使用される場合、そのロゴは補足である。テキストによる代替がすでに提供されているように空のalt属性を含める。

この例は、ロゴが表す組織名の横にロゴマークの使用を示す。

WebPlatform.org

  <img src="images/webplatform1.png" alt=""> WebPlatform.org
  

ロゴが表す主題または団体を説明するテキストと同時にロゴが使用される場合、ロゴを説明するテキストによる代替を提供する。

この例は、ロゴが表す主題を説明するテキストの横にロゴの使用方法を示す。

HTML5 logo: Shaped like a shield with the 
  text 'HTML' above and the numeral '5' prominent on the face of the shield.

HTML5 is a language for structuring and presenting content for the World Wide Web, a core technology of the Internet. It is the latest revision of the HTML standard (originally created in 1990 and most recently standardized as HTML4 in 1997) and currently remains under development. Its core aims have been to improve the language with support for the latest multimedia while keeping it easily readable by humans and consistently understood by computers and devices (web browsers, parsers etc.).

  <p><img src="HTML5_Logo.png" alt="HTML5 logo: Shaped like a shield with the
  text 'HTML' above and the numeral '5' prominent on the face of the shield."></p>
  
  Information about HTML5
4.7.5.1.20 CAPTCHA画像

CAPTCHA(キャプチャ)は、"Completely Automated Public Turing test to tell Computers and Humans Apart"(コンピュータと人間を区別する完全に自動化された公開チューリングテスト)の略である。CAPTCHA 画像は、コンテンツがコンピュータではなく人間によってアクセスされていることを確認する、セキュリティー目的のために使用される。この認証は、画像の視覚的な検証を介して行われる。CAPTCHAは一般的に、文字や単語をもつ画像を提示し、ユーザーがそれを入力する。画像は通常、歪められており、文字を読解困難にするために適用されるノイズを持つ。

CAPTCHAのアクセシビリティーを改良することは画像の目的を識別して説明するテキストによる代替を提供し、知覚のさまざまな種類の出力モードを使用するCAPTCHAの代替形式を提供する。たとえば、視覚的な画像とともに音声代替手段を提供する。視覚的な画像のすぐ隣に音声のオプションを設置する。これは役立つが、それでもサウンドカードのない人、視聴覚障害者、一部の制限された聴力をもつ人に対して問題である。もう一つの方法は、視覚的な画像とともに質問フォームを含めることである。これは役立つが、認知障害を持つ人々に対して問題となるかもしれない。

すべてのCAPTCHAの方式は、障害をもつユーザーに対する入力への容認できない障壁を導入するため、CAPTCHAの代替品を使用することを強く推奨する。更なる情報は、W3CのInaccessibility of CAPTCHAで利用可能である。

この例では、文字の歪んだ画像を使用するCAPTCHAのテストを示す。alt属性でのテキストによる代替は、画像コンテンツにアクセスできない場合にユーザーに対する手順を説明する。

captcha containing the words 'aides' and 'sprucest'. The letters are distorted and the color of the letters and background is partially inverted,

コード例:

<img src="captcha.png" alt="If you cannot view this image an audio challenge is provided."> 
  <!-- audio CAPTCHA option that allows the user to listen and type the word -->  
  <!-- form that asks a question -->
  
4.7.5.1.21 picture要素における画像

picture要素および任意のsource要素はユーザーに対してセマンティックを持たず、img要素または要素のテキストによる代替のみがユーザーに表示される。picture要素内で存在するテキストによる代替を考慮せずにimg要素に対するテキストによる代替を提供する。画像に対して有用なaltテキストを提供する方法に関するより詳しい情報については、画像に対して代替として動作するテキストを提供に対する要件を参照のこと。

pictureに依存するArt directed画像は、(サイズ、ピクセル密度、または任意の他の判別する要素に関係なく)同じコンテンツを描写する必要がある。したがって、画像に対する適切なテキストによる代替は、ソースファイルが最後にブラウザによって選択されるものにかかわらず常に同じになるだろう。

<h2>Is it a ghost?</h2>
<picture>
  <source media="(min-width: 32em)" srcset="large.jpg">
  <img src="small.jpg" alt="Reflection of a girls face in a train window.">
</picture>

画像の大きなおよび小さなバージョン(両方のバージョンがデモンストレーションの目的で表示される)は、同じシーンを記述する:(より小さいスクリーンで表示される)小さなバージョンは切り取られる間、車窓で女性の顔を反射する、これは目的またはaltテキストの適切さに影響しない。

Reflection of a girls face in a train window. Reflection of a girls face in a train window.

4.7.5.1.22 Guidance for markup generators

Markup generators (such as WYSIWYG authoring tools) should, wherever possible, obtain a text alternative from their users. However, it is recognized that in many cases, this will not be possible.

For images that are the sole contents of links, markup generators should examine the link target to determine the title of the target, or the URL of the target, and use information obtained in this manner as the text alternative.

For images that have captions, markup generators should use the figure and figcaption elements to provide the image's caption.

As a last resort, implementors should either set the alt attribute to the empty string, under the assumption that the image is a purely decorative image that doesn't add any information but is still specific to the surrounding content, or omit the alt attribute altogether, under the assumption that the image is a key part of the content.

Markup generators may specify a generator-unable-to-provide-required-alt attribute on img elements for which they have been unable to obtain a text alternative and for which they have therefore omitted the alt attribute. The value of this attribute must be the empty string. Documents containing such attributes are not conforming, but conformance checkers will silently ignore this error.

This is intended to avoid markup generators from being pressured into replacing the error of omitting the alt attribute with the even more egregious error of providing phony text alternatives, because state-of-the-art automated conformance checkers cannot distinguish phony text alternatives from correct text alternatives.

Markup generators should generally avoid using the image's own file name as the text alternative. Similarly, markup generators should avoid generating text alternatives from any content that will be equally available to presentation user agents (e.g. Web browsers).

This is because once a page is generated, it will typically not be updated, whereas the browsers that later read the page can be updated by the user, therefore the browser is likely to have more up-to-date and finely-tuned heuristics than the markup generator did when generating the page.

4.7.5.1.23 Guidance for conformance checkers

A conformance checker must report the lack of an alt attribute as an error unless one of the conditions listed below applies:

4.7.6 iframe要素

カテゴリ
フローコンテンツ
フレージングコンテンツ
エンベディッドコンテンツ
インタラクティブコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
エンベディッドコンテンツが期待される場所。
コンテンツモデル
文で与えられる要件に適合しているテキスト。
コンテンツ属性
グローバル属性
src - リソースのアドレス
srcdoc - iframe内で描画する文書
name - ネストされたブラウジングコンテキスト
sandbox - ネストされたコンテンツのセキュリティールール
seamless - 文書のスタイルをネストされたコンテンツに適用するかどうか
allowfullscreen - iframeのコンテンツにrequestFullscreen()の使用を許可するかどうか
width - 横の次元
height - 縦の次元
text/htmlにおけるタグ省略
どちらのタグも省略不可
許可されるARIAロール属性値:
applicationdocumentimgまたはpresentation
許可されるARIAステートおよびプロパティー
グローバルaria-* 属性
許可されるロールで受け入れ可能な任意のaria-*属性。
DOMインターフェース
interface HTMLIFrameElement : HTMLElement {
           attribute DOMString src;
           attribute DOMString srcdoc;
           attribute DOMString name;
  [PutForwards=value] readonly attribute DOMSettableTokenList sandbox;
           attribute boolean seamless;
           attribute boolean allowFullscreen;
           attribute DOMString width;
           attribute DOMString height;
  readonly attribute Document? contentDocument;
  readonly attribute WindowProxy? contentWindow;
};

iframe要素は、ネストされたブラウジングコンテキスト表す

src属性は、ネストされたブラウジングコンテキストが含むのに適当なページのアドレスを与える。属性が存在する場合、潜在的にスペースで囲まれた妥当な空でないURLでなければならない。itempropiframe要素で指定される場合、srcも指定されなければならない。

srcdoc属性は、ネストされたブラウジングコンテキストが含むのに適当なページのコンテンツを提供する。属性の値は、iframe srcdoc文書のソースである。

属性が存在する場合、HTML文書内のiframe要素は、指定された順序で、srcdocが存在するならば、次の構文上のコンポーネントを構成するHTML構文を使用した値を持たなければならない。

  1. 任意の数のコメントおよび空白文字
  2. 任意で、DOCTYPE
  3. 任意の数のコメントおよび空白文字
  4. html要素の形式で、ルート要素。
  5. 任意の数のコメントおよび空白文字

XML文書内のiframe要素のために、srcdoc属性が存在する場合、XML仕様でラベル付きdocument生成物に一致する値を持たなければならない。[XML]

ここでブログは、ブログの記事のコメントで、スクリプトインジェクションから追加の保護レイヤーとともに、この機能をサポートするユーザーエージェントのユーザーに提供するため、以下に記載のsandboxおよびseamless属性と一緒にsrcdoc属性を使用する。

<article>
 <h1>I got my own magazine!</h1>
 <p>After much effort, I've finally found a publisher, and so now I
 have my own magazine!Isn't that awesome?!The first issue will come
 out in September, and we have articles about getting food, and about
 getting in boxes, it's going to be great!</p>
 <footer>
  <p>Written by <a href="/users/cap">cap</a>, 1 hour ago.
 </footer>
 <article>
  <footer> Thirteen minutes ago, <a href="/users/ch">ch</a> wrote: </footer>
  <iframe seamless sandbox srcdoc="<p>did you get a cover picture yet?"></iframe>
 </article>
 <article>
  <footer> Nine minutes ago, <a href="/users/cap">cap</a> wrote: </footer>
  <iframe seamless sandbox srcdoc="<p>Yeah, you can see it <a href=&quot;/gallery?mode=cover&amp;amp;page=1&quot;>in my gallery</a>."></iframe>
 </article>
 <article>
  <footer> Five minutes ago, <a href="/users/ch">ch</a> wrote: </footer>
  <iframe seamless sandbox srcdoc="<p>hey that's earl's table.
<p>you should get earl&amp;amp;me on the next cover."></iframe>
 </article>

引用符をエスケープする必要がある方法に注意し(そうでなければsrcdoc属性が途中で終わるだろう)、サンドボックス化されたコンテンツに記載される生のアンパサンド(たとえば、URL内または文で)が二重にエスケープされる必要がある―最初にsrcdoc属性を解析する際、一度アンパサンドが保持されるように、サンドボックスのコンテンツを解析する際、誤ってもう一度アンパサンドを解析されるの防ぐために。

さらに、DOCTYPEiframe srcdoc文書で任意であり、かつhtmlhead、およびbody要素は任意の開始タグを持ち、しかもtitle要素はiframe srcdoc文書でも任意であるため、body要素のコンテンツだけが構文でリテラルに出現する必要があるため、srcdoc属性でのマークアップは、文書全体を表すにもかかわらず比較的簡潔にできる。他の要素は依然として存在するが、暗に存在するのみである。

HTML構文において、著者は属性の内容を包むために"""(U+0022)文字を使用することを単に覚えておく必要があり、それからすべて"""(U+0022)およびU+0026 AMPERSAND(&)文字をエスケープし、およびsandbox属性を指定し、コンテンツの安全な埋め込みを確実にする必要がある。

XHTML構文の制約のために、XMLの"<"(U+003C)文字も同様にエスケープする必要がある。属性値正規化を防ぐために、一部のXMLの空白文字―具体的には"tab"(U+0009)、"LF"(U+000D)、"CR"(U+000A)―もまたエスケープする必要がある。[XML]

src属性とsrcdoc属性が両方ともに指定される場合、srcdoc属性が優先される。これは、著者にsrcdoc属性をサポートしないレガシーユーザーエージェントに対してフォールバックURLを提供できる。


When an iframe element is inserted into a document, the user agent must create a nested browsing context, and then process the iframe attributes for the "first time".

When an iframe element is removed from a document, the user agent must discard the nested browsing context.

This happens without any unload events firing (the nested browsing context and its Document are discarded, not unloaded).

Whenever an iframe element with a nested browsing context has its srcdoc attribute set, changed, or removed, the user agent must process the iframe attributes.

Similarly, whenever an iframe element with a nested browsing context but with no srcdoc attribute specified has its src attribute set, changed, or removed, the user agent must process the iframe attributes.

When the user agent is to process the iframe attributes, it must run the first appropriate steps from the following list:

If the srcdoc attribute is specified

Navigate the element's child browsing context to a resource whose Content-Type is text/html, whose URL is about:srcdoc, and whose data consists of the value of the attribute. The resulting Document must be considered an iframe srcdoc document.

Otherwise, if the element has no src attribute specified, and the user agent is processing the iframe's attributes for the "first time"

Queue a task to run the iframe load event steps.

The task source for this task is the DOM manipulation task source.

そうでなければ
  1. If the value of the src attribute is missing, or its value is the empty string, let url be the string "about:blank".

    Otherwise, resolve the value of the src attribute, relative to the iframe element.

    If that is not successful, then let url be the string "about:blank". Otherwise, let url be the resulting absolute URL.

  2. If there exists an ancestor browsing context whose active document's address, ignoring fragment identifiers, is equal to url, then abort these steps.

  3. Navigate the element's child browsing context to url.

Any navigation required of the user agent in the process the iframe attributes algorithm must be completed as an explicit self-navigation override and with the iframe element's document's browsing context as the source browsing context.

Furthermore, if the active document of the element's child browsing context before such a navigation was not completely loaded at the time of the new navigation, then the navigation must be completed with replacement enabled.

Similarly, if the child browsing context's session history contained only one Document when the process the iframe attributes algorithm was invoked, and that was the about:blank Document created when the child browsing context was created, then any navigation required of the user agent in that algorithm must be completed with replacement enabled.

When a Document in an iframe is marked as completely loaded, the user agent must synchronously run the iframe load event steps.

A load event is also fired at the iframe element when it is created if no other data is loaded in it.

Each Document has an iframe load in progress flag and a mute iframe load flag. When a Document is created, these flags must be unset for that Document.

The iframe load event steps are as follows:

  1. Let child document be the active document of the iframe element's nested browsing context.

  2. If child document has its mute iframe load flag set, abort these steps.

  3. Set child document's iframe load in progress flag.

  4. Fire a simple event named load at the iframe element.

  5. Unset child document's iframe load in progress flag.

This, in conjunction with scripting, can be used to probe the URL space of the local network's HTTP servers. User agents may implement cross-origin access control policies that are stricter than those described above to mitigate this attack, but unfortunately such policies are typically not compatible with existing Web content.

When the iframe's browsing context's active document is not ready for post-load tasks, and when anything in the iframe is delaying the load event of the iframe's browsing context's active document, and when the iframe's browsing context is in the delaying load events mode, the iframe must delay the load event of its document.

If, during the handling of the load event, the browsing context in the iframe is again navigated, that will further delay the load event.

要素が作成される際、srcdoc属性が設定されず、src属性が設定されてない、または設定されるがその値が解決できないのいずれかの場合、ブラウジングコンテキストは初期のabout:blankページのままになる。

ユーザーがこのページから移動する場合、iframeの対応WindowProxyオブジェクトは、新規Documentオブジェクトに対する新規Windowオブジェクトをプロキシサーバーに送るが、src属性は変更されないだろう。


name属性が存在する場合、妥当なブラウジングコンテキスト名でなければならない。指定された値は、ネストされたブラウジングコンテキストに名前を付けるために使用される。When the browsing context is created, if the attribute is present, the browsing context name must be set to the value of this attribute; otherwise, the browsing context name must be set to the empty string.

Whenever the name attribute is set, the nested browsing context's name must be changed to the new value. If the attribute is removed, the browsing context name must be set to the empty string.


sandbox属性が指定された場合、iframeによってホストされるあらゆるコンテンツに一連の追加の制限が可能になる。その値は、ASCII大文字・小文字不区別である順不同なユニークなスペース区切りのトークンのセットでなければならない。許容される値は、allow-formsallow-pointer-lockallow-popupsallow-same-originallow-scriptsallow-top-navigationである。

この属性が設定される場合、コンテンツは一意な生成元からのものとして扱われ、フォームやスクリプトは無効となり、リンクは他のブラウジングコンテキストをターゲットすることを防ぎ、プラグインは保護される。allow-same-originキーワードは、コンテンツにユニークな生成元を強制する代わりに、コンテンツを実際の生成元からのものとして扱わさせる。allow-top-navigationキーワードは、コンテンツにトップレベルのブラウジングコンテキストナビゲートすることができる。allow-formsallow-pointer-lockallow-popupsおよびallow-scriptsキーワードは、フォーム、ポインタロックAPI、ポップアップ、およびスクリプトそれぞれを再有効にする。[POINTERLOCK]

効果的に完全にサンドボックスを破壊する、iframeを含むページが埋め込まれたページに簡単にsandbox属性を削除して再読み込みできるので、埋め込まれたページが同一生成元を持つ際に、allow-scriptsおよびallow-same-originの両方のキーワードを共に設定する。

iframeネストされたブラウジングコンテキストナビゲートされる際、これらのフラグは効果のみを取る。それらを削除する、または全体のsandbox属性を削除することは、すでに読み込まれたページに影響を与えない。

潜在的に敵対的なファイルは、iframe要素を含むファイルと同じサーバーから提供されるべきではない。攻撃者がiframe内よりむしろ、直接敵対コンテンツを単に訪問することをユーザーに納得させることができる場合、敵対コンテンツをサンドボックス化することは、最小限の助けとなる。敵対的なHTMLコンテンツが原因で発生する可能性のある損害を制限するために、それは独立した専用ドメインから提供されるべきである。たとえsandbox属性の保護なしで、ユーザーが直接そのページを訪れるようだます場合でも、別のドメインを使用することは、ファイル内のスクリプトがサイトを攻撃できないことを保証する。

When an iframe element with a sandbox attribute has its nested browsing context created (before the initial about:blank Document is created), and when an iframe element's sandbox attribute is set or changed while it has a nested browsing context, the user agent must parse the sandboxing directive using the attribute's value as the input, the iframe element's nested browsing context's iframe sandboxing flag set as the output, and, if the iframe has an allowfullscreen attribute, the allow fullscreen flag.

When an iframe element's sandbox attribute is removed while it has a nested browsing context, the user agent must empty the iframe element's nested browsing context's iframe sandboxing flag set as the output.

この例において、一部の完全に未知で、潜在的に敵対的な、ユーザーが提供するHTMLコンテンツは、ページに埋め込まれている。コンテンツが別のドメインから配信されているため、コンテンツはすべて通常のクロスサイト制限の影響を受ける。また、埋め込みページはスクリプティング、プラグイン、フォームを無効にし、コンテンツは、任意のフレームやそのもの(または任意のフレーム、またはウィンドウ自身が埋め込み)以外のウィンドウを移動できない。

<p>We're not scared of you! Here is your content, unedited:</p>
<iframe sandbox src="http://usercontent.example.net/getusercontent.cgi?id=12193"></iframe>

攻撃者が直接そのページへユーザーにアクセスするように納得させる場合、ページがページ内で検出された攻撃に被害を受け易くなるであろうサイトの生成元のコンテキストで実行されないように別のドメインを使用することが重要である。

この例において、別のサイトからガジェットが埋め込まれている。ガジェットは、スクリプトやフォームが有効であり、生成元サンドボックスの制限は解除され、その発信元のサーバーと通信できる。しかし、プラグインおよびポップアップを無効にしたように、サンドボックスは依然として有用であり、したがってマルウェアやその他の脅威に晒されるユーザーのリスクを軽減する。

<iframe sandbox="allow-same-origin allow-forms allow-scripts"
        src="http://maps.example.com/embedded.html"></iframe>

ファイルAに含まれる次の断片を仮定する:

<iframe sandbox="allow-same-origin allow-forms" src=B></iframe>

またファイルBに含まれるiframeを仮定する:

<iframe sandbox="allow-scripts" src=C></iframe>

さらに、ファイルCに含まれるリンクを仮定する:

<a href=D>Link</a>

この例に対して、すべてのファイルがtext/htmlとして供給されると仮定する。

このシナリオでは、ページCはすべてのサンドボックスのフラグを設定される。Aでiframeが無効であり、これがBにおいてiframeで設定されるallow-scriptsキーワードセットを上書きするので、スクリプトは無効である。フォームのiframeで設定できるように、スクリプトキーワードを上書きするためのスクリプトは、無効になっている。(Bにおける)内側のiframeは、allow-formsキーワードセットを設定されないため、フォームもまた無効である。

Aにおけるスクリプトが、AとBですべてのsandbox属性を削除すると仮定する。これはすぐには何も変わらないだろう。ユーザーがCのリンクをクリックした場合、BでiframeにページDを読み込み、リンクはページBが読み込まれた際にAのiframe内のネストされたブラウジングコンテキストの状態だったため、あたかもBでiframeallow-same-originallow-formsキーワードが設定されていたかのように、ページDは振る舞うだろう。

何が許可されて何が許可されないかについて判断することは非常に困難であるため、一般に、動的に除去したり、sandbox属性を変更したりすることは賢明でない。


seamless属性は真偽属性である。指定された場合、属性はiframe要素のブラウジングコンテキストが、含まれている文書を含んでいる(シームレスに親文書に含まれる)一部であるように見えるような方法でレンダリングされるよう指示する。

次の例のように、HTMLのインクルードはこの属性を使用して行われる。この場合、インクルードはサイト全体のナビゲーションバーである。新しいユーザーエージェントにおいて、iframe内のすべてのリンクは、自動的にiframeの親のブラウジングコンテキストで開かれるだろう。レガシーユーザーエージェントに対して、サイトはまた、値_parentをもつtarget属性とともにbase要素を含むことができる。同様に、新しいユーザーエージェントで親ページのスタイルが自動的にフレームのコンテンツに適用されるが、レガシーユーザーエージェントをサポートするために、著者はスタイルを明示的に含めたいかもしれない。

<!DOCTYPE HTML>
<title>Mirror Mirror — MovieInfo™</title>
<header>
  <h1>Mirror Mirror</h1>
  <p>Part of the MovieInfo™ Database</p>
 <nav>
  <iframe seamless src="nav.inc"></iframe>
 </nav>
</header>
...

An iframe element is said to be in seamless mode when all of the following conditions are met:

When an iframe element is in seamless mode, the following requirements apply:

If the attribute is not specified, or if the origin conditions listed above are not met, then the user agent should render the nested browsing context in a manner that is clearly distinguishable as a separate browsing context, and the seamless browsing context flag must be set to false for that browsing context.

It is important that user agents recheck the above conditions whenever the active document of the nested browsing context of the iframe changes, such that the seamless browsing context flag gets unset if the nested browsing context is navigated to another origin.

属性は、並列で更新をレンダリングするとともに、動的に設定または削除できる。

contenteditable属性は、seamlessiframeへ伝達しない。


allowfullscreen属性は、真偽属性である。指定される場合、属性は、iframe要素のブラウジングコンテキストでのDocumentオブジェクトがrequestFullscreen()の使用を許可されることを表示する(他の理由でブロックされない場合、たとえば、この属性が設定されない別の祖先iframeが存在する)。

ここで、iframeはビデオサイトからのプレイヤーを埋め込むために使用される。allowfullscreen属性はそのビデオをフルスクリーン表示するようなプレイヤーを有効にするために必要とされる。

<article>
 <header>
  <p><img src="/usericons/1627591962735"> <b>Fred Flintstone</b></p>
  <p><a href="/posts/3095182851" rel=bookmark>12:44</a> — <a href="#acl-3095182851">Private Post</a></p>
 </header>
 <main>
  <p>Check out my new ride!</p>
  <iframe src="https://video.example.com/embed?id=92469812" allowfullscreen></iframe>
 </main>
</article>

iframe要素は、埋め込まれたコンテンツが特定のサイズをもつ(たとえば単位が明確に定義された寸法をもつ)場合、寸法属性をサポートする。

指定した初期コンテンツ内容が正常に使用されるかどうかに関わらず、常にネストしたブラウジングコンテキストを作成するので、iframe要素はフォールバックコンテンツにならない。


iframe要素の子孫は何も表さない。(iframe要素をサポートしないレガシーユーザーエージェントにおいて、コンテンツはフォールバックコンテンツとして機能することができるマークアップとして解析される。)

HTML文書で使用する場合、iframe要素の許可されたコンテンツモデルはテキストである。ただし、context要素としてiframe要素およびinputとしてテキストコンテンツをもつHTML断片解析アルゴリズムを呼び出すことが、一切の解析エラーなく、リスト内の任意の場所にまたはリスト内の要素の子孫としてscript要素をもたず、かつ自身が適合するリスト(その子孫を含む)内のすべての要素をもつ、フレージングコンテンツであるノードのリストをもたらさなければならないことを除く。

iframe要素は、XML文書で空でなければならない。

HTMLパーサは、テキストとしてiframe要素の内側のマークアップを扱う。


The IDL attributes src, srcdoc, name, sandbox, and seamless must reflect the respective content attributes of the same name.

The allowFullscreen IDL attribute must reflect the allowfullscreen content attribute.

The contentDocument IDL attribute must return the Document object of the active document of the iframe element's nested browsing context, if any and if its effective script origin is the same origin as the effective script origin specified by the incumbent settings object, or null otherwise.

The contentWindow IDL attribute must return the WindowProxy object of the iframe element's nested browsing context, if any, or null otherwise.

広告ブローカーから広告を含めるようにiframeを使ったページの例は次のとおり:

<iframe src="http://ads.example.com/?customerid=923513721&amp;format=banner"
        width="468" height="60"></iframe>

4.7.7 embed要素

カテゴリ
フローコンテンツ
フレージングコンテンツ
エンベディッドコンテンツ
インタラクティブコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
エンベディッドコンテンツが期待される場所。
コンテンツモデル
空。
コンテンツ属性
グローバル属性
src - リソースのアドレス
type — 埋め込みリソースタイプ
width - 横の次元
height - 縦の寸法
名前空間を持たないその他の属性(文参照)。
text/htmlにおけるタグ省略
終了タグなし
許可されるARIAロール属性値:
applicationdocumentimgまたはpresentation
許可されるARIAステートおよびプロパティー
グローバルaria-* 属性
許可されるロールで受け入れ可能な任意のaria-*属性。
DOMインターフェース
interface HTMLEmbedElement : HTMLElement {
           attribute DOMString src;
           attribute DOMString type;
           attribute DOMString width;
           attribute DOMString height;
  legacycaller any (any... arguments);
};

Depending on the type of content instantiated by the embed element, the node may also support other interfaces.

embed要素は外部の(典型的には非HTML)アプリケーションやインタラクティブコンテンツの統合点を提供する。

src属性は、埋め込まれているリソースのアドレスを与える。属性が存在する場合、潜在的にスペースで囲まれた妥当な空でないURLを含まなければならない。

itempropembed要素で指定される場合、src属性も指定されなければならない。

type属性が存在する場合は、インスタンスを生成するプラグインが選択されるMIMEタイプを提供する。値は妥当なMIMEタイプでなければならない。type属性とsrc属性の両方が存在する場合、type属性は、src属性で指定されたリソースの明示的なContent-Typeメタデータと同じ型を指定しなければならない。

While any of the following conditions are occurring, any plugin instantiated for the element must be removed, and the embed element represents nothing:

An embed element is said to be potentially active when the following conditions are all met simultaneously:

Whenever an embed element that was not potentially active becomes potentially active, and whenever a potentially active embed element that is remaining potentially active and has its src attribute set, changed, or removed or its type attribute set, changed, or removed, the user agent must queue a task using the embed task source to run the embed element setup steps.

The embed element setup steps are as follows:

  1. If another task has since been queued to run the embed element setup steps for this element, then abort these steps.

  2. If the element has a src attribute set

    The user agent must resolve the value of the element's src attribute, relative to the element. If that is successful, the user agent should fetch the resulting absolute URL, from the element's browsing context scope origin if it has one. The task that is queued by the networking task source once the resource has been fetched must run the following steps:

    1. If another task has since been queued to run the embed element setup steps for this element, then abort these steps.

    2. Determine the type of the content being embedded, as follows (stopping at the first substep that determines the type):

      1. If the element has a type attribute, and that attribute's value is a type that a plugin supports, then the value of the type attribute is the content's type.

      2. Otherwise, if applying the URL parser algorithm to the URL of the specified resource (after any redirects) results in a parsed URL whose path component matches a pattern that a plugin supports, then the content's type is the type that that plugin can handle.

        For example, a plugin might say that it can handle resources with path components that end with the four character string ".swf".

      3. Otherwise, if the specified resource has explicit Content-Type metadata, then that is the content's type.

      4. Otherwise, the content has no type and there can be no appropriate plugin for it.

    3. If the previous step determined that the content's type is image/svg+xml, then run the following substeps:

      1. If the embed element is not associated with a nested browsing context, associate the element with a newly created nested browsing context, and, if the element has a name attribute, set the browsing context name of the element's nested browsing context to the value of this attribute.

      2. Navigate the nested browsing context to the fetched resource, with replacement enabled, and with the embed element's document's browsing context as the source browsing context. (The src attribute of the embed element doesn't get updated if the browsing context gets further navigated to other locations.)

      3. The embed element now represents its associated nested browsing context.

    4. Otherwise, find and instantiate an appropriate plugin based on the content's type, and hand that plugin the content of the resource, replacing any previously instantiated plugin for the element. The embed element now represents this plugin instance.

    5. Once the resource or plugin has completely loaded, queue a task to fire a simple event named load at the element.

    Whether the resource is fetched successfully or not (e.g. whether the response code was a 2xx code or equivalent) must be ignored when determining the content's type and when handing the resource to the plugin.

    This allows servers to return data for plugins even with error responses (e.g. HTTP 500 Internal Server Error codes can still contain plugin data).

    Fetching the resource must delay the load event of the element's document.

    If the element has no src attribute set

    The user agent should find and instantiate an appropriate plugin based on the value of the type attribute. The embed element now represents this plugin instance.

    Once the plugin is completely loaded, queue a task to fire a simple event named load at the element.

The embed element has no fallback content. If the user agent can't find a suitable plugin when attempting to find and instantiate one for the algorithm above, then the user agent must use a default plugin. This default could be as simple as saying "Unsupported Format".

Whenever an embed element that was potentially active stops being potentially active, any plugin that had been instantiated for that element must be unloaded.

When a plugin is to be instantiated but it cannot be secured and the sandboxed plugins browsing context flag is set on the embed element's Document's active sandboxing flag set, then the user agent must not instantiate the plugin, and must instead render the embed element in a manner that conveys that the plugin was disabled. The user agent may offer the user the option to override the sandbox and instantiate the plugin anyway; if the user invokes such an option, the user agent must act as if the conditions above did not apply for the purposes of this element.

Plugins that cannot be secured are disabled in sandboxed browsing contexts because they might not honor the restrictions imposed by the sandbox (e.g. they might allow scripting even when scripting in the sandbox is disabled). User agents should convey the danger of overriding the sandbox to the user if an option to do so is provided.

When an embed element represents a nested browsing context: if the embed element's nested browsing context's active document is not ready for post-load tasks, and when anything is delaying the load event of the embed element's browsing context's active document, and when the embed element's browsing context is in the delaying load events mode, the embed must delay the load event of its document.

The task source for the tasks mentioned in this section is the DOM manipulation task source.

namealignhspace、およびvspace以外の名前空間なしの属性は、その名前がXML互換性があり、ASCII大文字を一切含まない限り、embed要素で指定されてもよい。これらの属性は、プラグインにパラメータとして渡される。

大文字の制限がそのような文書に影響しないので、HTML文書内のすべての属性は自動的に小文字を取得する。

4つの例外は、プラグインに送信するパラメータを超えた副作用を持つ従来の属性を除外するのに適当である。

The user agent should pass the names and values of all the attributes of the embed element that have no namespace to the plugin used, when one is instantiated.

The HTMLEmbedElement object representing the element must expose the scriptable interface of the plugin instantiated for the embed element, if any. At a minimum, this interface must implement the legacy caller operation. (It is suggested that the default behavior of this legacy caller operation, e.g. the behavior of the default plugin's legacy caller operation, be to throw a NotSupportedError exception.)

embed要素は、寸法属性をサポートする。

The IDL attributes src and type each must reflect the respective content attributes of the same name.

これはFlashのような、独自のプラグインを必要とするリソースを埋め込むための方法である:

<embed src="catgame.swf">

ユーザーがプラグインを持たない場合(たとえばプラグインベンダーがユーザーのプラットフォームをサポートしない場合)、ユーザーはリソースを使用できない。

"high"値をもつパラメータ"quality"をプラグインに渡すために、属性を指定できる:

<embed src="catgame.swf" quality="high">

代わりにobject要素を使用する場合、次のものと等価になる:

<object data="catgame.swf">
 <param name="quality" value="high">
</object>

4.7.8 object要素

カテゴリ
フローコンテンツ
フレージングコンテンツ
エンベディッドコンテンツ
要素がusemap属性をもつ場合:インタラクティブコンテンツ
リスト送信可能再関連付け可能 フォーム関連要素
パルパブルコンテンツ
この要素を使用できるコンテキスト
エンベディッドコンテンツが期待される場所。
コンテンツモデル
0個以上のparam要素、それから透過的
コンテンツ属性
グローバル属性
data - リソースのアドレス
type — 埋め込みリソースタイプ
typemustmatch - type属性およびContent-Type値が使用されるリソースにマッチする必要があるかどうか
name - ネストされたブラウジングコンテキスト
usemap - 使用するイメージマップの名前
form - form要素とコントロールを関連付ける
width - 横の次元
height - 縦の次元
text/htmlにおけるタグ省略
どちらのタグも省略不可。
許可されるARIAロール属性値:
applicationdocumentimgまたはpresentation
許可されるARIAステートおよびプロパティー
グローバルaria-* 属性
許可されるロールで受け入れ可能な任意のaria-*属性。
DOMインターフェース
interface HTMLObjectElement : HTMLElement {
           attribute DOMString data;
           attribute DOMString type;
           attribute boolean typeMustMatch;
           attribute DOMString name;
           attribute DOMString useMap;
  readonly attribute HTMLFormElement? form;
           attribute DOMString width;
           attribute DOMString height;
  readonly attribute Document? contentDocument;
  readonly attribute WindowProxy? contentWindow;

  readonly attribute boolean willValidate;
  readonly attribute ValidityState validity;
  readonly attribute DOMString validationMessage;
  boolean checkValidity();
  boolean reportValidity();
  void setCustomValidity(DOMString error);

  legacycaller any (any... arguments);
};

Depending on the type of content instantiated by the object element, the node also supports other interfaces.

object要素は、リソースの型に応じて、画像として、ネストされたブラウジングコンテキストとして、またはプラグインによって処理される外部リソースとしてのいずれかで扱われる、外部リソースを表すことができる。

data属性は存在する場合、リソースのアドレスを指定する。存在する場合、属性は、潜在的にスペースで囲まれた妥当な空でないURLでなければならない。

信頼しない他の生成元からリソースを参照する著者は、下記に定義されるtypemustmatch属性を使用するよう促す。その属性がなければ、著者がFlashの"allowScriptAccess"パラメータなどの機能を使用した場合であっても、任意のスクリプトを実行するためにプラグイン機構を使用することは、リモートホスト上の攻撃に対して特定の場合に可能である。

type属性が存在する場合、リソースのタイプを指定する。存在する場合、属性は妥当なMIMEタイプでなければならない。

data属性またはtype属性のいずれか一方が少なくとも存在しなければならない。

object要素でitempropが指定される場合、data属性も指定されなければならない。

typemustmatch属性は、type属性の値と、前述のリソースのContent-Typeが一致する場合、その存在がdata属性で指定されたリソースにのみ使用されることを示す真偽属性である。

data属性とtype属性の両方が存在する場合を除き、typemustmatch属性を指定してはならない。

name属性が存在する場合、妥当なブラウジングコンテキスト名でなければならない。該当する場合、与えられた値は、ネストされたブラウジングコンテキストに名前を付けるために使用される。

Whenever one of the following conditions occur:

...the user agent must queue a task to run the following steps to (re)determine what the object element represents. This task being queued or actively running must delay the load event of the element's document.

  1. If the user has indicated a preference that this object element's fallback content be shown instead of the element's usual behavior, then jump to the step below labeled fallback.

    For example, a user could ask for the element's fallback content to be shown because that content uses a format that the user finds more accessible.

  2. If the element has an ancestor media element, or has an ancestor object element that is not showing its fallback content, or if the element is not in a Document with a browsing context, or if the element's Document is not fully active, or if the element is still in the stack of open elements of an HTML parser or XML parser, or if the element is not being rendered, then jump to the step below labeled fallback.

  3. If the classid attribute is present, and has a value that isn't the empty string, then: if the user agent can find a plugin suitable according to the value of the classid attribute, and either plugins aren't being sandboxed or that plugin can be secured, then that plugin should be used, and the value of the data attribute, if any, should be passed to the plugin. If no suitable plugin can be found, or if the plugin reports an error, jump to the step below labeled fallback.

  4. If the data attribute is present and its value is not the empty string, then:

    1. If the type attribute is present and its value is not a type that the user agent supports, and is not a type that the user agent can find a plugin for, then the user agent may jump to the step below labeled fallback without fetching the content to examine its real type.

    2. Resolve the URL specified by the data attribute, relative to the element.

    3. If that failed, fire a simple event named error at the element, then jump to the step below labeled fallback.

    4. Fetch the resulting absolute URL, from the element's browsing context scope origin if it has one

      Fetching the resource must delay the load event of the element's document until the task that is queued by the networking task source once the resource has been fetched (defined next) has been run.

      For the purposes of the application cache networking model, this fetch operation is not for a child browsing context (though it might end up being used for one after all, as defined below).

    5. If the resource is not yet available (e.g. because the resource was not available in the cache, so that loading the resource required making a request over the network), then jump to the step below labeled fallback. The task that is queued by the networking task source once the resource is available must restart this algorithm from this step. Resources can load incrementally; user agents may opt to consider a resource "available" whenever enough data has been obtained to begin processing the resource.

    6. If the load failed (e.g. there was an HTTP 404 error, there was a DNS error), fire a simple event named error at the element, then jump to the step below labeled fallback.

    7. Determine the resource type, as follows:

      1. Let the resource type be unknown.

      2. If the object element has a type attribute and a typemustmatch attribute, and the resource has associated Content-Type metadata, and the type specified in the resource's Content-Type metadata is an ASCII case-insensitive match for the value of the element's type attribute, then let resource type be that type and jump to the step below labeled handler.

      3. If the object element has a typemustmatch attribute, jump to the step below labeled handler.

      4. If the user agent is configured to strictly obey Content-Type headers for this resource, and the resource has associated Content-Type metadata, then let the resource type be the type specified in the resource's Content-Type metadata, and jump to the step below labeled handler.

        This can introduce a vulnerability, wherein a site is trying to embed a resource that uses a particular plugin, but the remote site overrides that and instead furnishes the user agent with a resource that triggers a different plugin with different security characteristics.

      5. If there is a type attribute present on the object element, and that attribute's value is not a type that the user agent supports, but it is a type that a plugin supports, then let the resource type be the type specified in that type attribute, and jump to the step below labeled handler.

      6. Run the appropriate set of steps from the following list:

        If the resource has associated Content-Type metadata
        1. Let binary be false.

        2. If the type specified in the resource's Content-Type metadata is "text/plain", and the result of applying the rules for distinguishing if a resource is text or binary to the resource is that the resource is not text/plain, then set binary to true.

        3. If the type specified in the resource's Content-Type metadata is "application/octet-stream", then set binary to true.

        4. If binary is false, then let the resource type be the type specified in the resource's Content-Type metadata, and jump to the step below labeled handler.

        5. If there is a type attribute present on the object element, and its value is not application/octet-stream, then run the following steps:

          1. If the attribute's value is a type that a plugin supports, or the attribute's value is a type that starts with "image/" that is not also an XML MIME type, then let the resource type be the type specified in that type attribute.

          2. Jump to the step below labeled handler.

        Otherwise, if the resource does not have associated Content-Type metadata
        1. If there is a type attribute present on the object element, then let the tentative type be the type specified in that type attribute.

          Otherwise, let tentative type be the sniffed type of the resource.

        2. If tentative type is not application/octet-stream, then let resource type be tentative type and jump to the step below labeled handler.

      7. If applying the URL parser algorithm to the URL of the specified resource (after any redirects) results in a parsed URL whose path component matches a pattern that a plugin supports, then let resource type be the type that that plugin can handle.

        For example, a plugin might say that it can handle resources with path components that end with the four character string ".swf".

      It is possible for this step to finish, or for one of the substeps above to jump straight to the next step, with resource type still being unknown. In both cases, the next step will trigger fallback.

    8. Handler: Handle the content as given by the first of the following cases that matches:

      If the resource type is not a type that the user agent supports, but it is a type that a plugin supports

      If plugins are being sandboxed and the plugin that supports resource type cannot be secured, jump to the step below labeled fallback.

      Otherwise, the user agent should use the plugin that supports resource type and pass the content of the resource to that plugin. If the plugin reports an error, then jump to the step below labeled fallback.

      If the resource type is an XML MIME type, or if the resource type does not start with "image/"

      The object element must be associated with a newly created nested browsing context, if it does not already have one.

      If the URL of the given resource is not about:blank, the element's nested browsing context must then be navigated to that resource, with replacement enabled, and with the object element's document's browsing context as the source browsing context. (The data attribute of the object element doesn't get updated if the browsing context gets further navigated to other locations.)

      If the URL of the given resource is about:blank, then, instead, the user agent must queue a task to fire a simple event named load at the object element. No load event is fired at the about:blank document itself.

      The object element represents the nested browsing context.

      If the name attribute is present, the browsing context name must be set to the value of this attribute; otherwise, the browsing context name must be set to the empty string.

      In certain situations, e.g. if the resource was fetched from an application cache but it is an HTML file with a manifest attribute that points to a different application cache manifest, the navigation of the browsing context will be restarted so as to load the resource afresh from the network or a different application cache. Even if the resource is then found to have a different type, it is still used as part of a nested browsing context: only the navigate algorithm is restarted, not this object algorithm.

      If the resource type starts with "image/", and support for images has not been disabled

      Apply the image sniffing rules to determine the type of the image.

      The object element represents the specified image. The image is not a nested browsing context.

      If the image cannot be rendered, e.g. because it is malformed or in an unsupported format, jump to the step below labeled fallback.

      そうでなければ

      The given resource type is not supported. Jump to the step below labeled fallback.

      If the previous step ended with the resource type being unknown, this is the case that is triggered.

    9. The element's contents are not part of what the object element represents.

    10. Abort these steps. Once the resource is completely loaded, queue a task to fire a simple event named load at the element.

  5. If the data attribute is absent but the type attribute is present, and the user agent can find a plugin suitable according to the value of the type attribute, and either plugins aren't being sandboxed or the plugin can be secured, then that plugin should be used. If these conditions cannot be met, or if the plugin reports an error, jump to the step below labeled fallback. Otherwise abort these steps; once the plugin is completely loaded, queue a task to fire a simple event named load at the element.

  6. Fallback: The object element represents the element's children, ignoring any leading param element children. This is the element's fallback content. If the element has an instantiated plugin, then unload it.

When the algorithm above instantiates a plugin, the user agent should pass to the plugin used the names and values of all the attributes on the element, in the order they were added to the element, with the attributes added by the parser being ordered in source order, followed by a parameter named "PARAM" whose value is null, followed by all the names and values of parameters given by param elements that are children of the object element, in tree order. If the plugin supports a scriptable interface, the HTMLObjectElement object representing the element should expose that interface. The object element represents the plugin. The plugin is not a nested browsing context.

Plugins are considered sandboxed for the purpose of an object element if the sandboxed plugins browsing context flag is set on the object element's Document's active sandboxing flag set.

Due to the algorithm above, the contents of object elements act as fallback content, used only when referenced resources can't be shown (e.g. because it returned a 404 error). This allows multiple object elements to be nested inside each other, targeting multiple user agents with different capabilities, with the user agent picking the first one it supports.

When an object element represents a nested browsing context: if the object element's nested browsing context's active document is not ready for post-load tasks, and when anything is delaying the load event of the object element's browsing context's active document, and when the object element's browsing context is in the delaying load events mode, the object must delay the load event of its document.

The task source for the tasks mentioned in this section is the DOM manipulation task source.

Whenever the name attribute is set, if the object element has a nested browsing context, its name must be changed to the new value. If the attribute is removed, if the object element has a browsing context, the browsing context name must be set to the empty string.

object要素が画像を表すと同時に存在する場合、usemap属性は、イメージマップに関連付けられるオブジェクトを持つことを示すことができる。The attribute must be ignored if the object element doesn't represent an image.

form属性は、明示的にそのフォームの所有者object要素を関連付けるために使用される。

Constraint validation: object elements are always barred from constraint validation.

object要素は寸法属性をサポートする。

The IDL attributes data, type and name each must reflect the respective content attributes of the same name. The typeMustMatch IDL attribute must reflect the typemustmatch content attribute. The useMap IDL attribute must reflect the usemap content attribute.

The contentDocument IDL attribute must return the Document object of the active document of the object element's nested browsing context, if any and if its effective script origin is the same origin as the effective script origin specified by the incumbent settings object, or null otherwise.

The contentWindow IDL attribute must return the WindowProxy object of the object element's nested browsing context, if it has one; otherwise, it must return null.

The willValidate, validity, and validationMessage attributes, and the checkValidity(), reportValidity(), and setCustomValidity() methods, are part of the constraint validation API. The form IDL attribute is part of the element's forms API.

All object elements have a legacy caller operation. If the object element has an instantiated plugin that supports a scriptable interface that defines a legacy caller operation, then that must be the behavior of the object's legacy caller operation. Otherwise, the object's legacy caller operation must be to throw a NotSupportedError exception.

次の例においてJavaアプレットは、object要素を使用してページに埋め込まれている。(一般的に言って、アプリケーションが、サードパーティー製のプラグインを必要とすることなくすべてのウェブブラウザ上で動作するので、機能を提供するためにネイティヴのJavaScriptとHTMLを代わりに使用することで、このようなアプレットの使用を避けることがよりよい。特に組み込み機器は、多くのデバイスでJavaのようなサードパーティのテクノロジーをサポートしない。)

<figure>
 <object type="application/x-java-applet">
  <param name="code" value="MyJavaClass">
  <p>You do not have Java available, or it is disabled.</p>
 </object>
 <figcaption>My Java Clock</figcaption>
</figure>

この例において、HTMLページはobject要素を使用して埋め込まれている。

<figure>
 <object data="clock.html"></object>
 <figcaption>My HTML Clock</figcaption>
</figure>

次の例は、プラグインが(この場合においてFlashプラグインは、ビデオファイルを表示するために)HTMLで使用できる様子を示す。フォールバックは、Flashが有効でないユーザーに提供される。この場合、video要素の使用は、videoをサポートするユーザーエージェントを使用するものに対して動画を表示し、最終的にFlashもvideoをサポートしないブラウザのどちらも持たない人に対するビデオへのリンクを提供する。

<p>Look at my video:
 <object type="application/x-shockwave-flash">
  <param name=movie value="http://video.example.com/library/watch.swf">
  <param name=allowfullscreen value=true>
  <param name=flashvars value="http://video.example.com/vids/315981">
  <video controls src="http://video.example.com/vids/315981">
   <a href="http://video.example.com/vids/315981">View video</a>.
  </video>
 </object>
</p>

4.7.9 param要素

カテゴリ
なし。
この要素を使用できるコンテキスト
任意のフローコンテンツの前の、object要素の子として。
コンテンツモデル
空。
コンテンツ属性
グローバル属性
name - パラメータ名
value - パラメータ値
text/htmlにおけるタグ省略
終了タグなし
許可されるARIAロール属性値:
なし
許可されるARIAステートおよびプロパティー
グローバルaria-* 属性
DOMインターフェース
interface HTMLParamElement : HTMLElement {
           attribute DOMString name;
           attribute DOMString value;
};

param要素は、object要素によって呼び出されるプラグインのパラメータを定義する。この要素は、自分自身で何かを表すものではない。

name属性は、パラメータの名前を与える。

value属性は、パラメータの値を与える。

両方の属性が存在しなければならない。これらは、任意の値を持ってもよい。

If both attributes are present, and if the parent element of the param is an object element, then the element defines a parameter with the given name-value pair.

If either the name or value of a parameter defined by a param element that is the child of an object element that represents an instantiated plugin changes, and if that plugin is communicating with the user agent using an API that features the ability to update the plugin when the name or value of a parameter so changes, then the user agent must appropriately exercise that ability to notify the plugin of the change.

The IDL attributes name and value must both reflect the respective content attributes of the same name.

この場合O3Dプラグインにおいて、param要素が、プラグインにパラメータを渡すために使用する様子を次に示す。

<!DOCTYPE HTML>
<html lang="en">
  <head>
   <title>O3D Utah Teapot</title>
  </head>
  <body>
   <p>
    <object type="application/vnd.o3d.auto">
     <param name="o3d_features" value="FloatingPointTextures">
     <img src="o3d-teapot.png"
          title="3D Utah Teapot illustration rendered using O3D."
          alt="When O3D renders the Utah Teapot, it appears as a squat
          teapot with a shiny metallic finish on which the
          surroundings are reflected, with a faint shadow caused by
          the lighting.">
     <p>To see the teapot actually rendered by O3D on your
     computer, please download and install the <a
     href="http://code.google.com/apis/o3d/docs/gettingstarted.html#install">O3D plugin</a>.</p>
    </object>
    <script src="o3d-teapot.js"></script>
   </p>
  </body>
</html>

4.7.10 video要素

カテゴリ
フローコンテンツ
フレージングコンテンツ
エンベディッドコンテンツ
要素がcontrols属性を持つ場合:インタラクティブコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
エンベディッドコンテンツが期待される場所。
コンテンツモデル
要素がsrc属性を持つ場合:0個以上のtrack要素で、次に透過的だが、media要素子孫をもたない。
要素がsrc属性を持たない場合:0個以上のsource要素で、次に0個以上のtrackで、次に透過的だが、media要素子孫をもたない。
コンテンツ属性
グローバル属性
src - リソースのアドレス
crossorigin — 要素がcrossorigin要求を処理する方法
poster - 先にビデオプレイバックを見せるポスターフレーム
preload - メディアリソースがどの程度バッファリングに必要になるかのヒント
autoplay - ページが読み込まれる際にメディアリソースが自動的に開始可能というヒント
mediagroup - 暗黙のMediaControllerをもつメディア要素グループ
loop - メディアリソースをループするかどうか
muted - デフォルトでメディアリソースをミュートするかどうか
controls - ユーザーエージェントのコントロールを表示する
width - 横の次元
height - 縦の次元
text/htmlにおけるタグ省略
どちらのタグも省略不可
許可されるARIAロール属性値:
application.
許可されるARIAステートおよびプロパティー
グローバルaria-* 属性
許可されるロールで受け入れ可能な任意のaria-*属性。
DOMインターフェース
interface HTMLVideoElement : HTMLMediaElement {
           attribute unsigned long width;
           attribute unsigned long height;
  readonly attribute unsigned long videoWidth;
  readonly attribute unsigned long videoHeight;
           attribute DOMString poster;
};

video要素は字幕付きのビデオやムービー、オーディオファイルを再生するために使用される。

Content may be provided inside the video element. User agents should not show this content to the user; it is intended for older Web browsers which do not support video, so that legacy video plugins can be tried, or to show text to the users of these older browsers informing them of how to access the video contents.

特に、このコンテンツはアクセシビリティーの懸念に対処するためのものではない。弱視、目の見えない、難聴、耳が聞こえない、および他の身体または認知障害を持つ人々へのビデオコンテンツにアクセシブルにするための、さまざまな機能が利用可能である。字幕は、ビデオストリームの埋め込みまたはtrack要素を使用する外部ファイルとしてのいずれかを提供できる。手話トラックは、ビデオストリームの埋め込みまたはmediagroup属性またはMediaControllerオブジェクトを使用する、複数のvideo要素を同期させることのいずれかで提供できる。オーディオの説明は、ビデオストリームに埋め込まれた個別のトラックとして、video要素として同じコントローラにスレーブaudio要素での個別のオーディオトラックとして、またはtrack要素を使用して参照され、かつユーザーエージェントによって音声に合成されたWebVTTファイルを使用するテキスト形式でのいずれかとして提供できる。WebVTTはまた、章のタイトルを提供するために使用できる。むしろ一切のメディア要素を使用しないだろうユーザーの場合、複写物またはその他のテキストの選択肢は単にvideo要素の近くに文でそれらにリンクすることによって提供されうる。[WEBVTT]

video要素はmedia要素であり、そのメディアデータがおそらく関連する音声データをもつ、表面上は映像データである。

srcpreloadautoplaymediagrouploopmuted、およびcontrols属性は、すべてのメディア要素に共通の属性である。

poster属性はビデオデータが利用可能でない間に、ユーザーエージェントが表示できる画像ファイルのアドレスを与える。属性が存在する場合、潜在的にスペースで囲まれた妥当な空でないURLを含まなければならない。

If the specified resource is to be used, then, when the element is created or when the poster attribute is set, changed, or removed, the user agent must run the following steps to determine the element's poster frame (regardless of the value of the element's show poster flag):

  1. If there is an existing instance of this algorithm running for this video element, abort that instance of this algorithm without changing the poster frame.

  2. If the poster attribute's value is the empty string or if the attribute is absent, then there is no poster frame; abort these steps.

  3. Resolve the poster attribute's value relative to the element. If this fails, then there is no poster frame; abort these steps.

  4. Fetch the resulting absolute URL, from the element's Document's origin. This must delay the load event of the element's document.

  5. If an image is thus obtained, the poster frame is that image. Otherwise, there is no poster frame.

poster属性によって与えられた画像、poster frameは、ユーザーに映像がどのようなものであるかのテーマを与える映像の代表フレーム(通常は最初の空白でないフレームの1つ)であることを意図する。


A video element represents what is given for the first matching condition in the list below:

When no video data is available (the element's readyState attribute is either HAVE_NOTHING, or HAVE_METADATA but no video data has yet been obtained at all, or the element's readyState attribute is any subsequent value but the media resource does not have a video channel)
The video element represents its poster frame, if any, or else transparent black with no intrinsic dimensions.
When the video element is paused, the current playback position is the first frame of video, and the element's show poster flag is set
The video element represents its poster frame, if any, or else the first frame of the video.
When the video element is paused, and the frame of video corresponding to the current playback position is not available (e.g. because the video is seeking or buffering)
When the video element is neither potentially playing nor paused (e.g. when seeking or stalled)
The video element represents the last frame of the video to have been rendered.
When the video element is paused
The video element represents the frame of video corresponding to the current playback position.
Otherwise (the video element has a video channel and is potentially playing)
The video element represents the frame of video at the continuously increasing "current" position. When the current playback position changes such that the last frame rendered is no longer the frame corresponding to the current playback position in the video, the new frame must be rendered.

Frames of video must be obtained from the video track that was selected when the event loop last reached step 1.

Which frame in a video stream corresponds to a particular playback position is defined by the video stream's format.

The video element also represents any text track cues whose text track cue active flag is set and whose text track is in the showing mode, and any audio from the media resource, at the current playback position.

Any audio associated with the media resource must, if played, be played synchronised with the current playback position, at the element's effective media volume. The user agent must play the audio from audio tracks that were enabled when the event loop last reached step 1.

In addition to the above, the user agent may provide messages to the user (such as "buffering", "no video loaded", "error", or more detailed information) by overlaying text or icons on the video or other areas of the element's playback area, or in another appropriate manner.

User agents that cannot render the video may instead make the element represent a link to an external video playback utility or to the video data itself.

When a video element's media resource has a video channel, the element provides a paint source whose width is the media resource's intrinsic width, whose height is the media resource's intrinsic height, and whose appearance is the frame of video corresponding to the current playback position, if that is available, or else (e.g. when the video is seeking or buffering) its previous appearance, if any, or else (e.g. because the video is still loading the first frame) blackness.


video . videoWidth
video . videoHeight

これらの属性はビデオの内在寸法を返し、寸法が未知の場合に0を返す。

The intrinsic width and intrinsic height of the media resource are the dimensions of the resource in CSS pixels after taking into account the resource's dimensions, aspect ratio, clean aperture, resolution, and so forth, as defined for the format used by the resource. If an anamorphic format does not define how to apply the aspect ratio to the video data's dimensions to obtain the "correct" dimensions, then the user agent must apply the ratio by increasing one dimension and leaving the other unchanged.

The videoWidth IDL attribute must return the intrinsic width of the video in CSS pixels. The videoHeight IDL attribute must return the intrinsic height of the video in CSS pixels. If the element's readyState attribute is HAVE_NOTHING, then the attributes must return 0.

Whenever the intrinsic width or intrinsic height of the video changes (including, for example, because the selected video track was changed), if the element's readyState attribute is not HAVE_NOTHING, the user agent must queue a task to fire a simple event named resize at the media element.

video要素は、寸法属性をサポートする。

In the absence of style rules to the contrary, video content should be rendered inside the element's playback area such that the video content is shown centered in the playback area at the largest possible size that fits completely within it, with the video content's aspect ratio being preserved. Thus, if the aspect ratio of the playback area does not match the aspect ratio of the video, the video will be shown letterboxed or pillarboxed. Areas of the element's playback area that do not contain the video represent nothing.

In user agents that implement CSS, the above requirement can be implemented by using the style rule suggested in the rendering section.

The intrinsic width of a video element's playback area is the intrinsic width of the poster frame, if that is available and the element currently represents its poster frame; otherwise, it is the intrinsic width of the video resource, if that is available; otherwise the intrinsic width is missing.

The intrinsic height of a video element's playback area is the intrinsic height of the poster frame, if that is available and the element currently represents its poster frame; otherwise it is the intrinsic height of the video resource, if that is available; otherwise the intrinsic height is missing.

The default object size is a width of 300 CSS pixels and a height of 150 CSS pixels. [CSSIMAGES]


User agents should provide controls to enable or disable the display of closed captions, audio description tracks, and other additional data associated with the video stream, though such features should, again, not interfere with the page's normal rendering.

User agents may allow users to view the video content in manners more suitable to the user (e.g. full-screen or in an independent resizable window). As for the other user interface features, controls to enable this should not interfere with the page's normal rendering unless the user agent is exposing a user interface. In such an independent context, however, user agents may make full user interfaces visible, with, e.g., play, pause, seeking, and volume controls, even if the controls attribute is absent.

User agents may allow video playback to affect system features that could interfere with the user's experience; for example, user agents could disable screensavers while video playback is in progress.


The poster IDL attribute must reflect the poster content attribute.

この例は、ビデオを正常に再生するために障害が発生したことを検出する様子を示す:

<script>
 function failed(e) {
   // video playback failed - show a message saying why
   switch (e.target.error.code) {
     case e.target.error.MEDIA_ERR_ABORTED:
       alert('You aborted the video playback.');
       break;
     case e.target.error.MEDIA_ERR_NETWORK:
       alert('A network error caused the video download to fail part-way.');
       break;
     case e.target.error.MEDIA_ERR_DECODE:
       alert('The video playback was aborted due to a corruption problem or because the video used features your browser did not support.');
       break;
     case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
       alert('The video could not be loaded, either because the server or network failed or because the format is not supported.');
       break;
     default:
       alert('An unknown error occurred.');
       break;
   }
 }
</script>
<p><video src="tgif.vid" autoplay controls onerror="failed(event)"></video></p>
<p><a href="tgif.vid">Download the video file</a>.</p>

4.7.11 audio要素

カテゴリ
フローコンテンツ
フレージングコンテンツ
エンベディッドコンテンツ
要素がcontrols属性を持つ場合:インタラクティブコンテンツ
要素がcontrols属性を持つ場合:パルパブルコンテンツ
この要素を使用できるコンテキスト
エンベディッドコンテンツが期待される場所。
コンテンツモデル
要素がsrc属性を持つ場合:0個以上のtrack要素で、次に透過的だが、media要素子孫をもたない。
要素がsrc属性を持たない場合:0個以上のsource要素で、次に0個以上のtrackで、次に透過的だが、media要素子孫をもたない。
コンテンツ属性
グローバル属性
src - リソースのアドレス
crossorigin — 要素がcrossorigin要求を処理する方法
preload - メディアリソースがどの程度バッファリングに必要になるかのヒント
autoplay - ページが読み込まれる際にメディアリソースが自動的に開始可能というヒント
mediagroup - 暗黙のMediaControllerをもつメディア要素グループ
loop - メディアリソースをループするかどうか
muted - デフォルトでメディアリソースをミュートするかどうか
controls - ユーザーエージェントのコントロールを表示する
text/htmlにおけるタグ省略
どちらのタグも省略不可
許可されるARIAロール属性値:
application.
許可されるARIAステートおよびプロパティー
グローバルaria-* 属性
許可されるロールで受け入れ可能な任意のaria-*属性。
DOMインターフェース
[NamedConstructor=Audio(optional DOMString src)]
interface HTMLAudioElement : HTMLMediaElement {};

audio要素は、音やオーディオのストリームを表す

Content may be provided inside the audio element. User agents should not show this content to the user; it is intended for older Web browsers which do not support audio, so that legacy audio plugins can be tried, or to show text to the users of these older browsers informing them of how to access the audio contents.

特に、このコンテンツはアクセシビリティーの懸念に対処するためのものではない。聴覚障害、または他の身体または認知障害を持つ人々へのオーディオコンテンツにアクセシブルにするための、さまざまな機能が利用可能である。字幕や手話の映像が使用可能な場合、video要素は、ユーザーが視覚的な選択肢を有効にすることができ、オーディオを再生するaudio要素の代わりに使用できる。章タイトルは、track要素とWebVTTファイルを使用して、ナビゲーションを補助するために提供できる。そして当然のことながら、複写物またはその他のテキストの選択肢は単にaudio要素の近くに文でそれらにリンクすることによって提供されうる。[WEBVTT]

audio要素は、メディアデータが表面上は音声データであるmedia要素である。

srcpreloadautoplaymediagrouploopmuted、およびcontrols属性は、すべてのメディア要素に共通の属性である。

When an audio element is potentially playing, it must have its audio data played synchronised with the current playback position, at the element's effective media volume. The user agent must play the audio from audio tracks that were enabled when the event loop last reached step 1.

When an audio element is not potentially playing, audio must not play for the element.

audio = new Audio( [ url ] )

該当する場合、引数で渡された値に設定するsrc属性とともに、新しいaudio要素を返す。

A constructor is provided for creating HTMLAudioElement objects (in addition to the factory methods from DOM such as createElement()): Audio(src). When invoked as a constructor, it must return a new HTMLAudioElement object (a new audio element). The element must be created with its preload attribute set to the literal value "auto". If the src argument is present, the object created must be created with its src content attribute set to the provided value (this will cause the user agent to invoke the object's resource selection algorithm before returning). The element's document must be the active document of the browsing context of the Window object on which the interface object of the invoked constructor is found.

4.7.12 source要素

カテゴリ
なし。
この要素を使用できるコンテキスト
任意のフローコンテンツまたはtrack要素の前で、メディア要素の子として。
コンテンツモデル
空。
コンテンツ属性
グローバル属性
src - リソースのアドレス
type — 埋め込みリソースタイプ
text/htmlにおけるタグ省略
終了タグなし
許可されるARIAロール属性値:
なし
許可されるARIAステートおよびプロパティー
グローバルaria-* 属性
DOMインターフェース
interface HTMLSourceElement : HTMLElement {
           attribute DOMString src;
           attribute DOMString type;
};

source要素は、著者がメディア要素に対する複数の代替メディアリソースを指定できる。この要素は、自分自身で何かを表すものではない。

src属性は、メディアリソースのアドレスを与える。値は、潜在的にスペースで囲まれた妥当な空でないURLでなければならない。この属性は存在しなければならない。

要素がvideoaudio要素にすでに挿入されている場合、source要素とその属性を動的に変更しても効果はない。再生している内容を変更するためには、使用可能なリソースの中から選択するcanPlayType()メソッドをおそらく利用して、直接メディア要素src属性を単に使用する。一般に、文書が解析された後に手動でsource要素を操作することは、不必要に複雑なアプローチとなる。

type属性は、この属性をフェッチする前に、このメディアリソースを再生できるかどうかをユーザーエージェントが判断するために、メディアリソースの型を示す。指定された場合、その値は妥当なMIMEタイプでなければならない。特定のMIMEタイプが定義するコーデックパラメータは、リソースがエンコードされる方法を正確に指定する必要があるかもしれない。[RFC4281]

次のリストは、type属性でcodecs=MIMEパラメータを使用する方法の例を示す。

H.264制約ベースラインプロファイルビデオ(メインおよび拡張ビデオ互換性のある)レベル3とMP4コンテナでのLow-Complexity AACオーディオ
<source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
H.264拡張プロファイルビデオ(ベースライン対応)レベル3とMP4コンテナでのLow-Complexity AACオーディオ
<source src='video.mp4' type='video/mp4; codecs="avc1.58A01E, mp4a.40.2"'>
H.264メインプロファイルビデオレベル3とMP4コンテナのLow-Complexity AACオーディオ
<source src='video.mp4' type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>
H.264 'High'プロフィールビデオ(メイン、ベースライン、または拡張プロファイルと互換性がない)レベル3とMP4コンテナでのLow-Complexity AACオーディオ
<source src='video.mp4' type='video/mp4; codecs="avc1.64001E, mp4a.40.2"'>
MPEG-4ビジュアルのシンプルプロファイルレベル0ビデオとMP4コンテナのLow-Complexity AACオーディオ
<source src='video.mp4' type='video/mp4; codecs="mp4v.20.8, mp4a.40.2"'>
MPEG-4アドバンストシンプルプロファイルレベル0ビデオとMP4コンテナのLow-Complexity AACオーディオ
<source src='video.mp4' type='video/mp4; codecs="mp4v.20.240, mp4a.40.2"'>
MPEG-4映像シンプルプロファイルレベル0ビデオおよび3GPPコンテナ内AMRオーディオ
<source src='video.3gp' type='video/3gpp; codecs="mp4v.20.8, samr"'>
TheoraビデオとOggコンテナでのVorbisオーディオ
<source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'>
TheoraビデオとOggコンテナ内のSpeexオーディオ
<source src='video.ogv' type='video/ogg; codecs="theora, speex"'>
OggコンテナでVorbisオーディオ単独
<source src='audio.ogg' type='audio/ogg; codecs=vorbis'>
Oggコンテナ内のSpeexオーディオ単独
<source src='audio.spx' type='audio/ogg; codecs=speex'>
Oggコンテナ内のFLACオーディオ単独
<source src='audio.oga' type='audio/ogg; codecs=flac'>
DiracビデオとOggコンテナでのVorbisオーディオ
<source src='video.ogv' type='video/ogg; codecs="dirac, vorbis"'>

If a source element is inserted as a child of a media element that has no src attribute and whose networkState has the value NETWORK_EMPTY, the user agent must invoke the media element's resource selection algorithm.

The IDL attributes src and type must reflect the respective content attributes of the same name.

ユーザーエージェントがすべて提供されたメディアリソースをレンダリングすることができるかどうか、著者が確信できない場合、著者は最後のsource要素のフォールバック動作にerrorイベントをリッスンできる:

<script>
 function fallback(video) {
   // replace <video> with its contents
   while (video.hasChildNodes()) {
     if (video.firstChild instanceof HTMLSourceElement)
       video.removeChild(video.firstChild);
     else
       video.parentNode.insertBefore(video.firstChild, video);
   }
   video.parentNode.removeChild(video);
 }
</script>
<video controls autoplay>
 <source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
 <source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'
         onerror="fallback(parentNode)">
 ...
</video>

4.7.13 track要素

カテゴリ
なし。
この要素を使用できるコンテキスト
任意のフローコンテンツの前の、メディア要素要素の子として。
コンテンツモデル
空。
コンテンツ属性
グローバル属性
kind - テキストトラックの種類
src - リソースのアドレス
srclang - テキストトラックの言語
label - ユーザー可視ラベル
default - 他のテキストトラックがより適切でない場合にトラックを作動させる
text/htmlにおけるタグ省略
終了タグなし
許可されるARIAロール属性値:
なし
許可されるARIAステートおよびプロパティー
グローバルaria-* 属性
DOMインターフェース
interface HTMLTrackElement : HTMLElement {
           attribute DOMString kind;
           attribute DOMString src;
           attribute DOMString srclang;
           attribute DOMString label;
           attribute boolean default;

  const unsigned short NONE = 0;
  const unsigned short LOADING = 1;
  const unsigned short LOADED = 2;
  const unsigned short ERROR = 3;
  readonly attribute unsigned short readyState;

  readonly attribute TextTrack track;
};

track要素は、著者がメディア要素に対して明示的に外部調節されたテキストトラックを指定できる。この要素は、自分自身で何かを表すものではない。

kind属性は、列挙属性である。以下の表は、この属性に対して定義されたキーワードを列挙する。各行の最初のセルに与えられるキーワードは、2番目のセルで与えられる状態に対応する。

キーワード 状態 概要
subtitles Subtitles 音声が利用可能な場合に適するが、理解できない(ユーザーがメディアリソースのオーディオトラックの言語を理解していないためなど)対話の翻字または翻訳。ビデオにオーバーレイする。
captions Captions 音声が利用できないか、はっきりと聞こえない場合適した(たとえば、無言である、周囲の騒音によってかき消される、またはユーザーが聴覚障害者であるので)、対話の翻字または翻訳、音響効果、関連する音楽の合図、およびその他の関連オーディオ情報。ビデオにオーバーレイし、難聴者に対して適切に表示される。
descriptions 概要 映像コンポーネントが不明瞭、利用できない、または使用可能でない(たとえばユーザーが運転中に画面なしでアプリケーションと情報をやりとりするため、またはユーザーが盲目であるため)際の音声合成に対して意図される、メディアリソースのビデオコンポーネントのテキスト記述。オーディオとして合成される。
chapters Chapters メディアリソースのナビゲートに使用されることを意図した、章のタイトル。ユーザーエージェントのインターフェース内のインタラクティブな(潜在的に入れ子な)リストとして表示される。
metadata Metadata トラックは、スクリプトから使用するためのものである。ユーザーエージェントによって表示されない。

属性は省略してもよい。欠損値のデフォルトは、subtitles状態である。

src属性はテキストトラックデータのアドレスを与える。値は、潜在的にスペースで囲まれた妥当な空でないURLでなければならない。この属性は存在しなければならない。

If the element has a src attribute whose value is not the empty string and whose value, when the attribute was set, could be successfully resolved relative to the element, then the element's track URL is the resulting absolute URL. Otherwise, the element's track URL is the empty string.

要素のトラックURLWebVTTリソースを識別し、その要素のkind属性がメタデータ状態でない場合、WebVTTファイルはキューテキストを使用したWebVTTファイルでなければならない。[WEBVTT]

さらに、要素のトラックURLWebVTTリソースを識別し、その要素のkind属性がchapters状態である場合、WebVTTファイルはキューテキストを使用したWebVTTファイルネストのみされたキューを使用したWebVTTファイルの両方でなければならない。[WEBVTT]

srclang属性は、テキストトラックデータの言語を提供する。値は、妥当なBCP 47言語タグでなければならない。要素のkind属性が字幕状態である場合、この属性は存在しなければならない。[BCP47]

If the element has a srclang attribute whose value is not the empty string, then the element's track language is the value of the attribute. Otherwise, the element has no track language.

label属性は、トラックのユーザーが読めるタイトルを与える。それらのユーザーインターフェースで字幕キャプション、および音声解説トラックを一覧表示する際に、このタイトルはユーザーエージェントによって使用される。

label属性の値は属性が存在する場合、空文字列であってはならない。また、同じ状態にあるkind属性の同じメディア要素に属する2つのtrack要素の子があってはならず、そのsrclangは属性が欠落しているか、同じ言語を表す値を持つ、およびそのlabel属性が再び両方欠落するか、または両方同じ値を持つかの両方である。

If the element has a label attribute whose value is not the empty string, then the element's track label is the value of the attribute. Otherwise, the element's track label is an empty string.

default属性は真偽属性であり、指定された場合に、ユーザーの嗜好が別のトラックがより適切であることを示さない場合、トラックが有効にされることを示す。

メディア要素は、kind属性がsubtitlesまたはcaptions状態かつdefault属性が指定されるtrack要素の子を複数個持ってはならない。

メディア要素は、kind属性がdescription状態かつdefault属性が指定されるtrack要素の子を複数個持ってはならない。

メディア要素は、kind属性がchapters状態かつdefault属性が指定されるtrack要素の子を複数個持ってはならない。

kind属性がmetadata状態かつdefault属性が指定されるtrackの数に制限は存在しない。

track . readyState

以下のリストから番号で表されるテキストトラック準備状態を返す:

track . NONE (0)

テキストトラックがロードされない状態。

track . LOADING (1)

テキストトラックがロードしている状態。

track . LOADED (2)

テキストトラックがロードされた状態。

track . ERROR (3)

テキストトラックがロードに失敗した状態。

track . track

track要素のテキストトラックに対応するTextTrackオブジェクトを返す。

The readyState attribute must return the numeric value corresponding to the text track readiness state of the track element's text track, as defined by the following list:

NONE (numeric value 0)
テキストトラックがロードされない状態。
LOADING (numeric value 1)
テキストトラックがロードしている状態。
LOADED (numeric value 2)
テキストトラックがロードされた状態。
ERROR (numeric value 3)
テキストトラックがロードに失敗した状態。

The track IDL attribute must, on getting, return the track element's text track's corresponding TextTrack object.

The src, srclang, label, and default IDL attributes must reflect the respective content attributes of the same name. The kind IDL attribute must reflect the content attribute of the same name, limited to only known values.

このビデオは、複数言語の字幕を持つ:

<video src="brave.webm">
 <track kind=subtitles src=brave.en.vtt srclang=en label="English">
 <track kind=captions src=brave.en.hoh.vtt srclang=en label="English for the Hard of Hearing">
 <track kind=subtitles src=brave.fr.vtt srclang=fr lang=fr label="Français">
 <track kind=subtitles src=brave.de.vtt srclang=de lang=de label="Deutsch">
</video>

(最後の2つのlang属性は、字幕自体の言語ではなく、label属性の言語を記述する。字幕の言語はsrclang属性によって与えられる。)

4.7.14 メディア要素

メディア要素(この仕様ではaudioおよびvideo)は次のインターフェースを実装する:

enum CanPlayTypeResult { "" /* empty string */, "maybe", "probably" };
interface HTMLMediaElement : HTMLElement {

  // error state
  readonly attribute MediaError? error;

  // network state
           attribute DOMString src;
  readonly attribute DOMString currentSrc;
           attribute DOMString crossOrigin;
  const unsigned short NETWORK_EMPTY = 0;
  const unsigned short NETWORK_IDLE = 1;
  const unsigned short NETWORK_LOADING = 2;
  const unsigned short NETWORK_NO_SOURCE = 3;
  readonly attribute unsigned short networkState;
           attribute DOMString preload;
  readonly attribute TimeRanges buffered;
  void load();
  CanPlayTypeResult canPlayType(DOMString type);

  // ready state
  const unsigned short HAVE_NOTHING = 0;
  const unsigned short HAVE_METADATA = 1;
  const unsigned short HAVE_CURRENT_DATA = 2;
  const unsigned short HAVE_FUTURE_DATA = 3;
  const unsigned short HAVE_ENOUGH_DATA = 4;
  readonly attribute unsigned short readyState;
  readonly attribute boolean seeking;

  // playback state
           attribute double currentTime;
  void fastSeek(double time);
  readonly attribute unrestricted double duration;
  Date getStartDate();
  readonly attribute boolean paused;
           attribute double defaultPlaybackRate;
           attribute double playbackRate;
  readonly attribute TimeRanges played;
  readonly attribute TimeRanges seekable;
  readonly attribute boolean ended;
           attribute boolean autoplay;
           attribute boolean loop;
  void play();
  void pause();

  // media controller
           attribute DOMString mediaGroup;
           attribute MediaController? controller;

  // controls
           attribute boolean controls;
           attribute double volume;
           attribute boolean muted;
           attribute boolean defaultMuted;

  // tracks
  readonly attribute AudioTrackList audioTracks;
  readonly attribute VideoTrackList videoTracks;
  readonly attribute TextTrackList textTracks;
  TextTrack addTextTrack(TextTrackKind kind, optional DOMString label = "", optional DOMString language = "");
};

メディア要素の属性srccrossoriginpreloadautoplaymediagrouploopmuted、およびcontrolsは、すべてのメディア要素に適用する。これらは、この節で定義される。

メディア要素は、音声データ、または映像と音声のデータをユーザーに示すために使用される。この節は音声や映像に対するメディア要素にも同様に適用されるので、これは、この節においてメディアデータと見なされる。用語メディアリソースは、たとえば完全なビデオファイル、または完全なオーディオファイルなど、メディアデータの完全な集合を参照するために使用される。

メディアリソースは、複数のオーディオおよびビデオトラックを持つことができる。メディア要素の目的に対して、メディアリソースの映像データは、イベントループがステップ1に到達する際に要素のvideoTracks属性で(もしあれば)与えられるように現在選択されるトラックのみであり、かつメディアリソースの音声データは、イベントループがステップ1に到達する際に(もしあれば)要素のaudioTracks属性によって与えられるすべての現在の有効なトラックは、混合の結果である。

audiovideoの両方の要素は、オーディオとビデオの両方に使用できる。2つの間の主な違いは、video要素が持つのに対して、audio要素は、視覚コンテンツ(ビデオやキャプションなど)に対する再生領域を持たないことだけである。

Except where otherwise explicitly specified, the task source for all the tasks queued in this section and its subsections is the media element event task source of the media element in question.

4.7.14.1 エラーコード
media . error

要素の現在のエラー状態を表すMediaErrorオブジェクトを返す。

エラーが無い場合nullを返す。

All media elements have an associated error status, which records the last error the element encountered since its resource selection algorithm was last invoked. The error attribute, on getting, must return the MediaError object created for this last error, or null if there has not been an error.

interface MediaError {
  const unsigned short MEDIA_ERR_ABORTED = 1;
  const unsigned short MEDIA_ERR_NETWORK = 2;
  const unsigned short MEDIA_ERR_DECODE = 3;
  const unsigned short MEDIA_ERR_SRC_NOT_SUPPORTED = 4;
  readonly attribute unsigned short code;
};
media . error . code

下記のリストから、現在のエラーのエラーコードを返す。

The code attribute of a MediaError object must return the code for the error, which must be one of the following:

MEDIA_ERR_ABORTED(数値1)
メディアリソースに対するフェッチプロセスが、ユーザーの要求でユーザーエージェントによって中止された。
MEDIA_ERR_NETWORK(数値2)
リソースが使用可能であることが確立された後、一部の説明のネットワークエラーは、ユーザーエージェントにメディアリソースのフェッチを停止させた。
MEDIA_ERR_DECODE(数値3)
リソースが使用可能であることが確立された後に、メディアリソースをデコードする間に説明のエラーが発生した。
MEDIA_ERR_SRC_NOT_SUPPORTED(数値4)
src属性で示されるメディアリソースは適さなかった。
4.7.14.2 メディアリソースの場所

メディア要素srcコンテンツ属性は、表示するメディアリソース(ビデオ、オーディオ)のアドレスを与える。属性が存在する場合、潜在的にスペースで囲まれた妥当な空でないURLを含まなければならない。

itempropメディア要素要素で指定される場合、src属性も指定されなければならない。

メディア要素上のcrossoriginコンテンツ属性は、CORS設定属性である。

If a media element is created with a src attribute, the user agent must synchronously invoke the media element's resource selection algorithm.

If a src attribute of a media element is set or changed, the user agent must invoke the media element's media element load algorithm. (Removing the src attribute does not do this, even if there are source elements present.)

The src IDL attribute on media elements must reflect the content attribute of the same name.

The crossOrigin IDL attribute must reflect the crossorigin content attribute, limited to only known values.

media . currentSrc

現在のメディアリソースのアドレスを返す。

メディアリソースが存在しない場合空文字列を返す。

The currentSrc IDL attribute is initially the empty string. Its value is changed by the resource selection algorithm defined below.

メディアリソースsrc属性、またはsource要素を指定する2つの方法がある。属性は要素を上書きする。

4.7.14.3 MIMEタイプ

メディアリソースは、codecパラメータをもつ一部の場合において、そのタイプ、具体的にはMIMEタイプの観点から説明できる。(codecパラメータが許可されるまたはMIMEタイプに依存しないかどうかに関わらない)[RFC4281]

タイプは、通常多少不完全な記述である。たとえば"video/mpeg"は、コンテナタイプが何であるかを除いて何でも言わず、"video/mp4; codecs="avc1.42E01E, mp4a.40.2""のような型も実際のビットレート(最大ビットレートのみ)のような情報が含まれない。したがって、タイプを指定されるユーザーエージェントは、(信頼のレベルを変化させた)そのタイプのメディアを再生できるかもしれないかどうか、または間違いなくそのタイプのメディアを再生できないかどうかをたびたび知ることができる。

ユーザーエージェントがレンダリングできないことを認識するタイプは、たとえばコンテナの種類を認識しない、または列挙されたコーデックをサポートしないため、ユーザーエージェントは間違いなくサポートしないことにリソースを記述するものである。

パラメータのない"application/octet-stream" MIMEタイプは、ユーザーエージェントがレンダリングできないことを認識するタイプにならない。潜在的なメディアリソースにラベルを付けるために使用される際、ユーザーエージェントは、明示的なContent-Typeメタデータの欠如と同等としてそのタイプを扱わなければならない。

ここでパラメータなしのMIMEタイプ "application/octet-stream"は特殊な場合である。任意のパラメータが型に出現する場合、その型は他のMIMEタイプと同じように扱われるだろう。これは、未知のMIMEタイプのパラメータは無視されるべきであるという規則からの逸脱である。

media . canPlayType(type)

ユーザーエージェントはそれが与えられた型のメディアリソースを再生できる"maybe"、または"probably"方法に基づいて空の文字列(否定応答)を返す。

The canPlayType(type) method must return the empty string if type is a type that the user agent knows it cannot render or is the type "application/octet-stream"; it must return "probably" if the user agent is confident that the type represents a media resource that it can render if used in with this audio or video element; and it must return "maybe" otherwise. Implementors are encouraged to return "maybe" unless the type can be confidently established as being supported or not. Generally, a user agent should never return "probably" for a type that allows the codecs parameter if that parameter is not present.

このスクリプトは、ユーザーエージェントが動的にvideo要素またはプラグインを使用するかどうかを決定する(架空の)新たなフォーマットをサポートしているかどうかをテストする。

<section id="video">
 <p><a href="playing-cats.nfv">Download video</a></p>
</section>
<script>
 var videoSection = document.getElementById('video');
 var videoElement = document.createElement('video');
 var support = videoElement.canPlayType('video/x-new-fictional-format;codecs="kittens,bunnies"');
 if (support != "probably" && "New Fictional Video Plugin" in navigator.plugins) {
   // not confident of browser support
   // but we have a plugin
   // so use plugin instead
   videoElement = document.createElement("embed");
 } else if (support == "") {
   // no support from browser and no plugin
   // do nothing
   videoElement = null;
 }
 if (videoElement) {
   while (videoSection.hasChildNodes())
     videoSection.removeChild(videoSection.firstChild);
   videoElement.setAttribute("src", "playing-cats.nfv");
   videoSection.appendChild(videoElement);
 }
</script>

source要素のtype属性は、ユーザーエージェントがレンダリングできないフォーマットを使用するリソースのダウンロードを回避できる。

4.7.14.4 ネットワーク状態
media . networkState

下記のリストのコードから、要素に対するネットワーク活動の現在の状態を返す。

As media elements interact with the network, their current network activity is represented by the networkState attribute. On getting, it must return the current network state of the element, which must be one of the following values:

NETWORK_EMPTY(数値0)
要素はまだ初期化されていない。すべての属性は、初期状態である。
NETWORK_IDLE(数値1)
The element's resource selection algorithm is active and has selected a resource, but it is not actually using the network at this time.
NETWORK_LOADING(数値2)
ユーザーエージェントは、積極的にデータをダウンロードしようとしている。
NETWORK_NO_SOURCE(数値3)
The element's resource selection algorithm is active, but it has not yet found a resource to use.

The resource selection algorithm defined below describes exactly when the networkState attribute changes value and what events fire to indicate changes in this state.

4.7.14.5 メディアリソースの読み込み
media . load()

要素をリセットさせ、最初から新しいメディアリソースの選択と読み込みを開始させる。

All media elements have an autoplaying flag, which must begin in the true state, and a delaying-the-load-event flag, which must begin in the false state. While the delaying-the-load-event flag is true, the element must delay the load event of its document.

When the load() method on a media element is invoked, the user agent must run the media element load algorithm.

The media element load algorithm consists of the following steps.

  1. Abort any already-running instance of the resource selection algorithm for this element.

  2. If there are any tasks from the media element's media element event task source in one of the task queues, then remove those tasks.

    Basically, pending events and callbacks for the media element are discarded when the media element starts loading a new resource.

  3. If the media element's networkState is set to NETWORK_LOADING or NETWORK_IDLE, queue a task to fire a simple event named abort at the media element.

  4. If the media element's networkState is not set to NETWORK_EMPTY, then run these substeps:

    1. Queue a task to fire a simple event named emptied at the media element.

    2. If a fetching process is in progress for the media element, the user agent should stop it.

    3. Forget the media element's media-resource-specific tracks.

    4. If readyState is not set to HAVE_NOTHING, then set it to that state.

    5. If the paused attribute is false, then set it to true.

    6. If seeking is true, set it to false.

    7. Set the current playback position to 0.

      Set the official playback position to 0.

      If this changed the official playback position, then queue a task to fire a simple event named timeupdate at the media element.

    8. Set the initial playback position to 0.

    9. Set the timeline offset to Not-a-Number (NaN).

    10. Update the duration attribute to Not-a-Number (NaN).

      The user agent will not fire a durationchange event for this particular change of the duration.

  5. Set the playbackRate attribute to the value of the defaultPlaybackRate attribute.

  6. Set the error attribute to null and the autoplaying flag to true.

  7. Invoke the media element's resource selection algorithm.

  8. Playback of any previously playing media resource for this element stops.

The resource selection algorithm for a media element is as follows. This algorithm is always invoked synchronously, but one of the first steps in the algorithm is to return and continue running the remaining steps asynchronously, meaning that it runs in the background with scripts and other tasks running in parallel. In addition, this algorithm interacts closely with the event loop mechanism; in particular, it has synchronous sections (which are triggered as part of the event loop algorithm). Steps in such sections are marked with ⌛.

  1. Set the element's networkState attribute to the NETWORK_NO_SOURCE value.

  2. Set the element's show poster flag to true.

  3. Set the media element's delaying-the-load-event flag to true (this delays the load event).

  4. Asynchronously await a stable state, allowing the task that invoked this algorithm to continue. The synchronous section consists of all the remaining steps of this algorithm until the algorithm says the synchronous section has ended. (Steps in synchronous sections are marked with ⌛.)

  5. ⌛ If the media element's blocked-on-parser flag is false, then populate the list of pending text tracks.

  6. ⌛ If the media element has a src attribute, then let mode be attribute.

    ⌛ Otherwise, if the media element does not have a src attribute but has a source element child, then let mode be children and let candidate be the first such source element child in tree order.

    ⌛ Otherwise the media element has neither a src attribute nor a source element child: set the networkState to NETWORK_EMPTY, and abort these steps; the synchronous section ends.

  7. ⌛ Set the media element's networkState to NETWORK_LOADING.

  8. Queue a task to fire a simple event named loadstart at the media element.

  9. If mode is attribute, then run these substeps:

    1. ⌛ If the src attribute's value is the empty string, then end the synchronous section, and jump down to the failed with attribute step below.

    2. ⌛ Let absolute URL be the absolute URL that would have resulted from resolving the URL specified by the src attribute's value relative to the media element when the src attribute was last changed.

    3. ⌛ If absolute URL was obtained successfully, set the currentSrc attribute to absolute URL.

    4. End the synchronous section, continuing the remaining steps asynchronously.

    5. If absolute URL was obtained successfully, run the resource fetch algorithm with absolute URL. If that algorithm returns without aborting this one, then the load failed.

    6. Failed with attribute: Reaching this step indicates that the media resource failed to load or that the given URL could not be resolved. Queue a task to run the following steps:

      1. Set the error attribute to a new MediaError object whose code attribute is set to MEDIA_ERR_SRC_NOT_SUPPORTED.

      2. Forget the media element's media-resource-specific tracks.

      3. Set the element's networkState attribute to the NETWORK_NO_SOURCE value.

      4. Set the element's show poster flag to true.

      5. Fire a simple event named error at the media element.

      6. Set the element's delaying-the-load-event flag to false. This stops delaying the load event.

    7. Wait for the task queued by the previous step to have executed.

    8. Abort these steps. Until the load() method is invoked or the src attribute is changed, the element won't attempt to load another resource.

    Otherwise, the source elements will be used; run these substeps:

    1. ⌛ Let pointer be a position defined by two adjacent nodes in the media element's child list, treating the start of the list (before the first child in the list, if any) and end of the list (after the last child in the list, if any) as nodes in their own right. One node is the node before pointer, and the other node is the node after pointer. Initially, let pointer be the position between the candidate node and the next node, if there are any, or the end of the list, if it is the last node.

      As nodes are inserted and removed into the media element, pointer must be updated as follows:

      If a new node is inserted between the two nodes that define pointer
      Let pointer be the point between the node before pointer and the new node. In other words, insertions at pointer go after pointer.
      If the node before pointer is removed
      Let pointer be the point between the node after pointer and the node before the node after pointer. In other words, pointer doesn't move relative to the remaining nodes.
      If the node after pointer is removed
      Let pointer be the point between the node before pointer and the node after the node before pointer. Just as with the previous case, pointer doesn't move relative to the remaining nodes.

      Other changes don't affect pointer.

    2. Process candidate: If candidate does not have a src attribute, or if its src attribute's value is the empty string, then end the synchronous section, and jump down to the failed with elements step below.

    3. ⌛ Let absolute URL be the absolute URL that would have resulted from resolving the URL specified by candidate's src attribute's value relative to the candidate when the src attribute was last changed.

    4. ⌛ If absolute URL was not obtained successfully, then end the synchronous section, and jump down to the failed with elements step below.

    5. ⌛ If candidate has a type attribute whose value, when parsed as a MIME type (including any codecs described by the codecs parameter, for types that define that parameter), represents a type that the user agent knows it cannot render, then end the synchronous section, and jump down to the failed with elements step below.

    6. ⌛ Set the currentSrc attribute to absolute URL.

    7. End the synchronous section, continuing the remaining steps asynchronously.

    8. Run the resource fetch algorithm with absolute URL. If that algorithm returns without aborting this one, then the load failed.

    9. Failed with elements: Queue a task to fire a simple event named error at the candidate element.

    10. Asynchronously await a stable state. The synchronous section consists of all the remaining steps of this algorithm until the algorithm says the synchronous section has ended. (Steps in synchronous sections are marked with ⌛.)

    11. Forget the media element's media-resource-specific tracks.

    12. Find next candidate: Let candidate be null.

    13. Search loop: If the node after pointer is the end of the list, then jump to the waiting step below.

    14. ⌛ If the node after pointer is a source element, let candidate be that element.

    15. ⌛ Advance pointer so that the node before pointer is now the node that was after pointer, and the node after pointer is the node after the node that used to be after pointer, if any.

    16. ⌛ If candidate is null, jump back to the search loop step. Otherwise, jump back to the process candidate step.

    17. Waiting: Set the element's networkState attribute to the NETWORK_NO_SOURCE value.

    18. ⌛ Set the element's show poster flag to true.

    19. Queue a task to set the element's delaying-the-load-event flag to false. This stops delaying the load event.

    20. End the synchronous section, continuing the remaining steps asynchronously.

    21. Wait until the node after pointer is a node other than the end of the list. (This step might wait forever.)

    22. Asynchronously await a stable state. The synchronous section consists of all the remaining steps of this algorithm until the algorithm says the synchronous section has ended. (Steps in synchronous sections are marked with ⌛.)

    23. ⌛ Set the element's delaying-the-load-event flag back to true (this delays the load event again, in case it hasn't been fired yet).

    24. ⌛ Set the networkState back to NETWORK_LOADING.

    25. ⌛ Jump back to the find next candidate step above.

The resource fetch algorithm for a media element and a given absolute URL is as follows:

  1. Let the current media resource be the resource given by the absolute URL passed to this algorithm. This is now the element's media resource.

  2. Remove all media-resource-specific text tracks from the media element's list of pending text tracks, if any.

  3. Optionally, run the following substeps. This is the expected behavior if the user agent intends to not attempt to fetch the resource until the user requests it explicitly (e.g. as a way to implement the preload attribute's none keyword).

    1. Set the networkState to NETWORK_IDLE.

    2. Queue a task to fire a simple event named suspend at the element.

    3. Queue a task to set the element's delaying-the-load-event flag to false. This stops delaying the load event.

    4. Wait for the task to be run.

    5. Wait for an implementation-defined event (e.g. the user requesting that the media element begin playback).

    6. Set the element's delaying-the-load-event flag back to true (this delays the load event again, in case it hasn't been fired yet).

    7. Set the networkState to NETWORK_LOADING.

  4. Perform a potentially CORS-enabled fetch of the current media resource's absolute URL, with the mode being the state of the media element's crossorigin content attribute, the origin being the origin of the media element's Document, and the default origin behaviour set to taint.

    The resource obtained in this fashion, if any, contains the media data. It can be CORS-same-origin or CORS-cross-origin; this affects whether subtitles referenced in the media data are exposed in the API and, for video elements, whether a canvas gets tainted when the video is drawn on it.

    While the load is not suspended (see below), every 350ms (±200ms) or for every byte received, whichever is least frequent, queue a task to fire a simple event named progress at the element.

    The stall timeout is a user-agent defined length of time, which should be about three seconds. When a media element that is actively attempting to obtain media data has failed to receive any data for a duration equal to the stall timeout, the user agent must queue a task to fire a simple event named stalled at the element.

    User agents may allow users to selectively block or slow media data downloads. When a media element's download has been blocked altogether, the user agent must act as if it was stalled (as opposed to acting as if the connection was closed). The rate of the download may also be throttled automatically by the user agent, e.g. to balance the download with other connections sharing the same bandwidth.

    User agents may decide to not download more content at any time, e.g. after buffering five minutes of a one hour media resource, while waiting for the user to decide whether to play the resource or not, while waiting for user input in an interactive resource, or when the user navigates away from the page. When a media element's download has been suspended, the user agent must queue a task, to set the networkState to NETWORK_IDLE and fire a simple event named suspend at the element. If and when downloading of the resource resumes, the user agent must queue a task to set the networkState to NETWORK_LOADING. Between the queuing of these tasks, the load is suspended (so progress events don't fire, as described above).

    The preload attribute provides a hint regarding how much buffering the author thinks is advisable, even in the absence of the autoplay attribute.

    When a user agent decides to completely stall a download, e.g. if it is waiting until the user starts playback before downloading any further content, the user agent must queue a task to set the element's delaying-the-load-event flag to false. This stops delaying the load event.

    The user agent may use whatever means necessary to fetch the resource (within the constraints put forward by this and other specifications); for example, reconnecting to the server in the face of network errors, using HTTP range retrieval requests, or switching to a streaming protocol. The user agent must consider a resource erroneous only if it has given up trying to fetch it.

    This specification does not currently say whether or how to check the MIME types of the media resources, or whether or how to perform file type sniffing using the actual file data. Implementors differ in their intentions on this matter and it is therefore unclear what the right solution is. In the absence of any requirement here, the HTTP specification's strict requirement to follow the Content-Type header prevails ("Content-Type specifies the media type of the underlying data." ... "If and only if the media type is not given by a Content-Type field, the recipient MAY attempt to guess the media type via inspection of its content and./or the name extension(s) of the URI used to identify the resource.").

    The networking task source tasks to process the data as it is being fetched must each immediately queue a task to run the first appropriate steps from the following list. (A new task is used for this so that the work described below occurs relative to the media element event task source rather than the networking task source.)

    If the media data cannot be fetched at all, due to network errors, causing the user agent to give up trying to fetch the resource
    If the media data can be fetched but is found by inspection to be in an unsupported format, or can otherwise not be rendered at all

    DNS errors, HTTP 4xx and 5xx errors (and equivalents in other protocols), and other fatal network errors that occur before the user agent has established whether the current media resource is usable, as well as the file using an unsupported container format, or using unsupported codecs for all the data, must cause the user agent to execute the following steps:

    1. The user agent should cancel the fetching process.

    2. Abort this subalgorithm, returning to the resource selection algorithm.

    If the media resource is found to have an audio track
    1. Create an AudioTrack object to represent the audio track.

    2. Update the media element's audioTracks attribute's AudioTrackList object with the new AudioTrack object.

    3. Let enable be unknown.

    4. If either the media resource or the address of the current media resource indicate a particular set of audio tracks to enable, or if the user agent has information that would facilitate the selection of specific audio tracks to improve the user's experience, then: if this audio track is one of the ones to enable, then set enable to true, otherwise, set enable to false.

      This could be triggered by Media Fragments URI fragment identifier syntax, but it could also be triggered e.g. by the user agent selecting a 5.1 surround sound audio track over a stereo audio track. [MEDIAFRAG]

    5. If enable is still unknown, then, if the media element does not yet have an enabled audio track, then set enable to true, otherwise, set enable to false.

    6. If enable is true, then enable this audio track, otherwise, do not enable this audio track.

    7. Fire a trusted event with the name addtrack, that does not bubble and is not cancelable, and that uses the TrackEvent interface, with the track attribute initialised to the new AudioTrack object, at this AudioTrackList object.

    If the media resource is found to have a video track
    1. Create a VideoTrack object to represent the video track.

    2. Update the media element's videoTracks attribute's VideoTrackList object with the new VideoTrack object.

    3. Let enable be unknown.

    4. If either the media resource or the address of the current media resource indicate a particular set of video tracks to enable, or if the user agent has information that would facilitate the selection of specific video tracks to improve the user's experience, then: if this video track is the first such video track, then set enable to true, otherwise, set enable to false.

      This could again be triggered by Media Fragments URI fragment identifier syntax.

    5. If enable is still unknown, then, if the media element does not yet have a selected video track, then set enable to true, otherwise, set enable to false.

    6. If enable is true, then select this track and unselect any previously selected video tracks, otherwise, do not select this video track. If other tracks are unselected, then a change event will be fired.

    7. Fire a trusted event with the name addtrack, that does not bubble and is not cancelable, and that uses the TrackEvent interface, with the track attribute initialised to the new VideoTrack object, at this VideoTrackList object.

    Once enough of the media data has been fetched to determine the duration of the media resource, its dimensions, and other metadata

    This indicates that the resource is usable. The user agent must follow these substeps:

    1. Establish the media timeline for the purposes of the current playback position, the earliest possible position, and the initial playback position, based on the media data.

    2. Update the timeline offset to the date and time that corresponds to the zero time in the media timeline established in the previous step, if any. If no explicit time and date is given by the media resource, the timeline offset must be set to Not-a-Number (NaN).

    3. Set the current playback position and the official playback position to the earliest possible position.

    4. Update the duration attribute with the time of the last frame of the resource, if known, on the media timeline established above. If it is not known (e.g. a stream that is in principle infinite), update the duration attribute to the value positive Infinity.

      The user agent will queue a task to fire a simple event named durationchange at the element at this point.

    5. For video elements, set the videoWidth and videoHeight attributes, and queue a task to fire a simple event named resize at the media element.

      Further resize events will be fired if the dimensions subsequently change.

    6. Set the readyState attribute to HAVE_METADATA.

      A loadedmetadata DOM event will be fired as part of setting the readyState attribute to a new value.

    7. Let jumped be false.

    8. If the media element's default playback start position is greater than zero, then seek to that time, and let jumped be true.

    9. Let the media element's default playback start position be zero.

    10. If either the media resource or the address of the current media resource indicate a particular start time, then set the initial playback position to that time and, if jumped is still false, seek to that time and let jumped be true.

      For example, with media formats that support the Media Fragments URI fragment identifier syntax, the fragment identifier can be used to indicate a start position. [MEDIAFRAG]

    11. If there is no enabled audio track, then enable an audio track. This will cause a change event to be fired.

    12. If there is no selected video track, then select a video track. This will cause a change event to be fired.

    13. If the media element has a current media controller, then: if jumped is true and the initial playback position, relative to the current media controller's timeline, is greater than the current media controller's media controller position, then seek the media controller to the media element's initial playback position, relative to the current media controller's timeline; otherwise, seek the media element to the media controller position, relative to the media element's timeline.

    Once the readyState attribute reaches HAVE_CURRENT_DATA, after the loadeddata event has been fired, set the element's delaying-the-load-event flag to false. This stops delaying the load event.

    A user agent that is attempting to reduce network usage while still fetching the metadata for each media resource would also stop buffering at this point, following the rules described previously, which involve the networkState attribute switching to the NETWORK_IDLE value and a suspend event firing.

    The user agent is required to determine the duration of the media resource and go through this step before playing.

    Once the entire media resource has been fetched (but potentially before any of it has been decoded)

    Fire a simple event named progress at the media element.

    Set the networkState to NETWORK_IDLE and fire a simple event named suspend at the media element.

    If the user agent ever discards any media data and then needs to resume the network activity to obtain it again, then it must queue a task to set the networkState to NETWORK_LOADING.

    If the user agent can keep the media resource loaded, then the algorithm will continue to its final step below, which aborts the algorithm.

    If the connection is interrupted after some media data has been received, causing the user agent to give up trying to fetch the resource

    Fatal network errors that occur after the user agent has established whether the current media resource is usable (i.e. once the media element's readyState attribute is no longer HAVE_NOTHING) must cause the user agent to execute the following steps:

    1. The user agent should cancel the fetching process.

    2. Set the error attribute to a new MediaError object whose code attribute is set to MEDIA_ERR_NETWORK.

    3. Fire a simple event named error at the media element.

    4. Set the element's networkState attribute to the NETWORK_IDLE value.

    5. Set the element's delaying-the-load-event flag to false. This stops delaying the load event.

    6. Abort the overall resource selection algorithm.

    If the media data is corrupted

    Fatal errors in decoding the media data that occur after the user agent has established whether the current media resource is usable must cause the user agent to execute the following steps:

    1. The user agent should cancel the fetching process.

    2. Set the error attribute to a new MediaError object whose code attribute is set to MEDIA_ERR_DECODE.

    3. Fire a simple event named error at the media element.

    4. If the media element's readyState attribute has a value equal to HAVE_NOTHING, set the element's networkState attribute to the NETWORK_EMPTY value, set the element's show poster flag to true, and fire a simple event named emptied at the element.

      Otherwise, set the element's networkState attribute to the NETWORK_IDLE value.

    5. Set the element's delaying-the-load-event flag to false. This stops delaying the load event.

    6. Abort the overall resource selection algorithm.

    If the media data fetching process is aborted by the user

    The fetching process is aborted by the user, e.g. because the user pressed a "stop" button, the user agent must execute the following steps. These steps are not followed if the load() method itself is invoked while these steps are running, as the steps above handle that particular kind of abort.

    1. The user agent should cancel the fetching process.

    2. Set the error attribute to a new MediaError object whose code attribute is set to MEDIA_ERR_ABORTED.

    3. Fire a simple event named abort at the media element.

    4. If the media element's readyState attribute has a value equal to HAVE_NOTHING, set the element's networkState attribute to the NETWORK_EMPTY value, set the element's show poster flag to true, and fire a simple event named emptied at the element.

      Otherwise, set the element's networkState attribute to the NETWORK_IDLE value.

    5. Set the element's delaying-the-load-event flag to false. This stops delaying the load event.

    6. Abort the overall resource selection algorithm.

    If the media data can be fetched but has non-fatal errors or uses, in part, codecs that are unsupported, preventing the user agent from rendering the content completely correctly but not preventing playback altogether

    The server returning data that is partially usable but cannot be optimally rendered must cause the user agent to render just the bits it can handle, and ignore the rest.

    If the media resource is found to declare a media-resource-specific text track that the user agent supports

    If the media data is CORS-same-origin, run the steps to expose a media-resource-specific text track with the relevant data.

    Cross-origin videos do not expose their subtitles, since that would allow attacks such as hostile sites reading subtitles from confidential videos on a user's intranet.

    When the networking task source has queued the last task as part of fetching the media resource (i.e. once the download has completed), if the fetching process completes without errors, including decoding the media data, and if all of the data is available to the user agent without network access, then, the user agent must move on to the next step. This might never happen, e.g. when streaming an infinite resource such as Web radio, or if the resource is longer than the user agent's ability to cache data.

    While the user agent might still need network access to obtain parts of the media resource, the user agent must remain on this step.

    For example, if the user agent has discarded the first half of a video, the user agent will remain at this step even once the playback has ended, because there is always the chance the user will seek back to the start. In fact, in this situation, once playback has ended, the user agent will end up firing a suspend event, as described earlier.

  5. If the user agent ever reaches this step (which can only happen if the entire resource gets loaded and kept available): abort the overall resource selection algorithm.

When a media element is to forget the media element's media-resource-specific tracks, the user agent must remove from the media element's list of text tracks all the media-resource-specific text tracks, then empty the media element's audioTracks attribute's AudioTrackList object, then empty the media element's videoTracks attribute's VideoTrackList object. No events (in particular, no removetrack events) are fired as part of this; the error and emptied events, fired by the algorithms that invoke this one, can be used instead.


preload属性は列挙属性である。次の表は、キーワードと属性の状態を示す。1列目のキーワードは、キーワードと同じ行で2列目のセル内の状態に対応づける。メディアリソースがバッファまたは再生されている場合でも属性を変更できる。下記の表の説明では、この点に留意して解釈されるべきである。

キーワード 状態 概要
なし なし 著者がメディアリソースを必要とすることをユーザーに期待しない、またはサーバが不要なトラフィックを最小限にしたいのいずれかのユーザーエージェントへのヒント。バッファリングはとにかく開始する(たとえばユーザーが"play"に当たる)場合、この状態は、メディアリソースを実際にダウンロードする方法に関して積極的にヒントを提供しない。
metadata Metadata 著者がメディアリソースを必要とするとユーザーに期待しないが、リソースのメタデータ(寸法、トラックリスト、期間など)フェッチし、そしておそらく最初の数フレームが合理的であるユーザーエージェントへのヒント。ユーザーエージェントが正確にメタデータ以上のものをフェッチしない場合、典型的には、一部のフレームも同様に得られ、おそらくHAVE_CURRENT_DATAまたはHAVE_FUTURE_DATAになるにもかかわらず、メディア要素HAVE_METADATAに設定されるreadyState属性に終わる。メディアリソースが再生する際、たとえばメディアデータが依然として一貫した再生を維持し最も遅い可能性のレートで得られるようにダウンロードを絞ることが示唆するような、帯域幅の不足を考慮すべきであるというユーザーエージェントへのヒント。
auto Automatic ユーザーエージェントが、楽観的に全体のリソースのダウンロードを含め、サーバーへのリスクなしに、最初のユーザーのニーズを置くことができるというユーザーエージェントへのヒント。

空文字列もまた妥当なキーワードであり、自動状態に対応づける。メタデータ状態はサーバーの負荷を軽減し、最適なユーザーエクスペリエンスを提供する妥協点として示唆されるけれども、属性の欠損デフォルト値は、ユーザーエージェント定義である。

一度ユーザーが再生を始めると、著者は、動的に"none"または"metadata"から"auto"に属性を切り替えるかもしれない。たとえば、多くのビデオをもつページ上で、要求されないが一度に動画積極的にダウンロードされる限り、これは多くの動画がダウンロードされるべきではないことを示すために使用されるかもしれない。

The preload attribute is intended to provide a hint to the user agent about what the author thinks will lead to the best user experience. The attribute may be ignored altogether, for example based on explicit user preferences or based on the available connectivity.

The preload IDL attribute must reflect the content attribute of the same name, limited to only known values.

(メディアを再生する場合、preload属性によって与えられるヒントにかかわらず、自然に最初のバッファを持つので)autoplay属性はpreload属性を上書きできる。しかし、両方を含めることはエラーではない。


media . buffered

ユーザーエージェントがバッファリングしたメディアリソースの範囲を表すTimeRangesオブジェクトを返す。

The buffered attribute must return a new static normalised TimeRanges object that represents the ranges of the media resource, if any, that the user agent has buffered, at the time the attribute is evaluated. Users agents must accurately determine the ranges available, even for media streams where this can only be determined by tedious inspection.

Typically this will be a single range anchored at the zero point, but if, e.g. the user agent uses HTTP range requests in response to seeking, then there could be multiple ranges.

User agents may discard previously buffered data.

Thus, a time position included within a range of the objects return by the buffered attribute at one time can end up being not included in the range(s) of objects returned by the same attribute at later times.

4.7.14.6 メディアリソースからのオフセット
media . duration

メディアリソースの始点が時間ゼロであると仮定して、秒単位でメディアリソースの長さを返す。

期間が利用できない場合はNaNを返す。

際限のないストリームに対してInfinityを返す。

media . currentTime [ = value ]

秒単位で、公式の再生位置を返す。

指定時間にシークするために、設定可能である。

選択したメディアリソースがない場合、または現在のメディアコントローラがある場合、InvalidStateError例外を投げる。

A media resource has a media timeline that maps times (in seconds) to positions in the media resource. The origin of a timeline is its earliest defined position. The duration of a timeline is its last defined position.

Establishing the media timeline: If the media resource somehow specifies an explicit timeline whose origin is not negative (i.e. gives each frame a specific time offset and gives the first frame a zero or positive offset), then the media timeline should be that timeline. (Whether the media resource can specify a timeline or not depends on the media resource's format.) If the media resource specifies an explicit start time and date, then that time and date should be considered the zero point in the media timeline; the timeline offset will be the time and date, exposed using the getStartDate() method.

If the media resource has a discontinuous timeline, the user agent must extend the timeline used at the start of the resource across the entire resource, so that the media timeline of the media resource increases linearly starting from the earliest possible position (as defined below), even if the underlying media data has out-of-order or even overlapping time codes.

For example, if two clips have been concatenated into one video file, but the video format exposes the original times for the two clips, the video data might expose a timeline that goes, say, 00:15..00:29 and then 00:05..00:38. However, the user agent would not expose those times; it would instead expose the times as 00:15..00:29 and 00:29..01:02, as a single video.

In the rare case of a media resource that does not have an explicit timeline, the zero time on the media timeline should correspond to the first frame of the media resource. In the even rarer case of a media resource with no explicit timings of any kind, not even frame durations, the user agent must itself determine the time for each frame in a user-agent-defined manner. (This is a fingerprinting vector.)

An example of a file format with no explicit timeline but with explicit frame durations is the Animated GIF format. An example of a file format with no explicit timings at all is the JPEG-push format (multipart/x-mixed-replace with JPEG frames, often used as the format for MJPEG streams).

If, in the case of a resource with no timing information, the user agent will nonetheless be able to seek to an earlier point than the first frame originally provided by the server, then the zero time should correspond to the earliest seekable time of the media resource; otherwise, it should correspond to the first frame received from the server (the point in the media resource at which the user agent began receiving the stream).

At the time of writing, there is no known format that lacks explicit frame time offsets yet still supports seeking to a frame before the first frame sent by the server.

Consider a stream from a TV broadcaster, which begins streaming on a sunny Friday afternoon in October, and always sends connecting user agents the media data on the same media timeline, with its zero time set to the start of this stream. Months later, user agents connecting to this stream will find that the first frame they receive has a time with millions of seconds. The getStartDate() method would always return the date that the broadcast started; this would allow controllers to display real times in their scrubber (e.g. "2:30pm") rather than a time relative to when the broadcast began ("8 months, 4 hours, 12 minutes, and 23 seconds").

Consider a stream that carries a video with several concatenated fragments, broadcast by a server that does not allow user agents to request specific times but instead just streams the video data in a predetermined order, with the first frame delivered always being identified as the frame with time zero. If a user agent connects to this stream and receives fragments defined as covering timestamps 2010-03-20 23:15:00 UTC to 2010-03-21 00:05:00 UTC and 2010-02-12 14:25:00 UTC to 2010-02-12 14:35:00 UTC, it would expose this with a media timeline starting at 0s and extending to 3,600s (one hour). Assuming the streaming server disconnected at the end of the second clip, the duration attribute would then return 3,600. The getStartDate() method would return a Date object with a time corresponding to 2010-03-20 23:15:00 UTC. However, if a different user agent connected five minutes later, it would (presumably) receive fragments covering timestamps 2010-03-20 23:20:00 UTC to 2010-03-21 00:05:00 UTC and 2010-02-12 14:25:00 UTC to 2010-02-12 14:35:00 UTC, and would expose this with a media timeline starting at 0s and extending to 3,300s (fifty five minutes). In this case, the getStartDate() method would return a Date object with a time corresponding to 2010-03-20 23:20:00 UTC.

In both of these examples, the seekable attribute would give the ranges that the controller would want to actually display in its UI; typically, if the servers don't support seeking to arbitrary times, this would be the range of time from the moment the user agent connected to the stream up to the latest frame that the user agent has obtained; however, if the user agent starts discarding earlier information, the actual range might be shorter.

In any case, the user agent must ensure that the earliest possible position (as defined below) using the established media timeline, is greater than or equal to zero.

The media timeline also has an associated clock. Which clock is used is user-agent defined, and may be media resource-dependent, but it should approximate the user's wall clock.

All the media elements that share current media controller use the same clock for their media timeline.

Media elements have a current playback position, which must initially (i.e. in the absence of media data) be zero seconds. The current playback position is a time on the media timeline.

Media elements also have an official playback position, which must initially be set to zero seconds. The official playback position is an approximation of the current playback position that is kept stable while scripts are running.

Media elements also have a default playback start position, which must initially be set to zero seconds. This time is used to allow the element to be seeked even before the media is loaded.

Each media element has a show poster flag. When a media element is created, this flag must be set to true. This flag is used to control when the user agent is to show a poster frame for a video element instead of showing the video contents.

The currentTime attribute must, on getting, return the media element's default playback start position, unless that is zero, in which case it must return the element's official playback position. The returned value must be expressed in seconds. On setting, if the media element has a current media controller, then the user agent must throw an InvalidStateError exception; otherwise, if the media element's readyState is HAVE_NOTHING, then it must set the media element's default playback start position to the new value; otherwise, it must set the official playback position to the new value and then seek to the new value. The new value must be interpreted as being in seconds.

Media elements have an initial playback position, which must initially (i.e. in the absence of media data) be zero seconds. The initial playback position is updated when a media resource is loaded. The initial playback position is a time on the media timeline.

If the media resource is a streaming resource, then the user agent might be unable to obtain certain parts of the resource after it has expired from its buffer. Similarly, some media resources might have a media timeline that doesn't start at zero. The earliest possible position is the earliest position in the stream or resource that the user agent can ever obtain again. It is also a time on the media timeline.

The earliest possible position is not explicitly exposed in the API; it corresponds to the start time of the first range in the seekable attribute's TimeRanges object, if any, or the current playback position otherwise.

When the earliest possible position changes, then: if the current playback position is before the earliest possible position, the user agent must seek to the earliest possible position; otherwise, if the user agent has not fired a timeupdate event at the element in the past 15 to 250ms and is not still running event handlers for such an event, then the user agent must queue a task to fire a simple event named timeupdate at the element.

Because of the above requirement and the requirement in the resource fetch algorithm that kicks in when the metadata of the clip becomes known, the current playback position can never be less than the earliest possible position.

If at any time the user agent learns that an audio or video track has ended and all media data relating to that track corresponds to parts of the media timeline that are before the earliest possible position, the user agent may queue a task to first remove the track from the audioTracks attribute's AudioTrackList object or the videoTracks attribute's VideoTrackList object as appropriate and then fire a trusted event with the name removetrack, that does not bubble and is not cancelable, and that uses the TrackEvent interface, with the track attribute initialised to the AudioTrack or VideoTrack object representing the track, at the media element's aforementioned AudioTrackList or VideoTrackList object.

The duration attribute must return the time of the end of the media resource, in seconds, on the media timeline. If no media data is available, then the attributes must return the Not-a-Number (NaN) value. If the media resource is not known to be bounded (e.g. streaming radio, or a live event with no announced end time), then the attribute must return the positive Infinity value.

The user agent must determine the duration of the media resource before playing any part of the media data and before setting readyState to a value equal to or greater than HAVE_METADATA, even if doing so requires fetching multiple parts of the resource.

When the length of the media resource changes to a known value (e.g. from being unknown to known, or from a previously established length to a new length) the user agent must queue a task to fire a simple event named durationchange at the media element. (The event is not fired when the duration is reset as part of loading a new media resource.) If the duration is changed such that the current playback position ends up being greater than the time of the end of the media resource, then the user agent must also seek to the time of the end of the media resource.

If an "infinite" stream ends for some reason, then the duration would change from positive Infinity to the time of the last frame or sample in the stream, and the durationchange event would be fired. Similarly, if the user agent initially estimated the media resource's duration instead of determining it precisely, and later revises the estimate based on new information, then the duration would change and the durationchange event would be fired.

Some video files also have an explicit date and time corresponding to the zero time in the media timeline, known as the timeline offset. Initially, the timeline offset must be set to Not-a-Number (NaN).

The getStartDate() method must return a new Date object representing the current timeline offset.


loop属性は真偽属性であり、指定される場合、終端に達するとメディアリソースの先頭に戻ってシークするメディア要素であることを示す。

要素が現在のメディアコントローラを持つ一方で、loop属性は効果がない。

The loop IDL attribute must reflect the content attribute of the same name.

4.7.14.7 準備状態
media . readyState

以下のリストのコードから、現在の再生位置をレンダリングに対する要素の現在の状態を表す値を返す。

Media elements have a ready state, which describes to what degree they are ready to be rendered at the current playback position. The possible values are as follows; the ready state of a media element at any particular time is the greatest value describing the state of the element:

HAVE_NOTHING(数値0)

メディアリソースに関する情報が入手できない。現在の再生位置のデータが入手できない。networkState属性がNETWORK_EMPTYに設定されるメディア要素は常にHAVE_NOTHING状態にある。

HAVE_METADATA(数値1)

リソースの継続時間が使用可能であるような、十分なリソースが得られている。video要素の場合、ビデオの寸法もまた利用可能である。シーク時にAPIはもはや例外を投げない。メディアデータは、すぐに現在の再生位置に対して利用できない。

HAVE_CURRENT_DATA(数値2)

直接の現在の再生位置に対するデータは使用可能であるが、直ちにHAVE_METADATA状態に戻ることなく、まったく再生方向にない現在の再生位置を正常に進めることができるユーザーエージェントを利用可能とするのに十分なデータがないか、再生方向で入手するためのこれ以上データが存在しないかのいずれかである。たとえば、ビデオにおいて現在の再生位置が現在のフレームの端にある、および再生が終了した場合、これは次のフレームではなく、現在のフレームからデータを持つユーザーエージェントに対応する。

HAVE_FUTURE_DATA(数値3)

直接の現在の再生位置に対するデータが利用可能であり、直ちにHAVE_METADATAの状態に戻ることなく、少なくとも再生方向での現在の再生位置を進めるためのユーザーエージェントに対する十分なデータが同様にあり、テキストトラックは準備が整う。たとえば、ビデオにおいて、現在の再生位置が2つのフレーム間の瞬間である際に、少なくとも現在のフレームと次のフレームに対するデータを持つユーザーエージェントにこれは対応するか、現在の再生位置がフレームの途中にある際、少なくとも再生を維持するための現在のフレームと音声データに対するビデオデータを持つユーザーエージェントに対応する。この場合において、現在の再生位置は進めることはできないので、再生が終了した場合にユーザーエージェントはこの状態にはならない。

HAVE_ENOUGH_DATA(数値4)

HAVE_FUTURE_DATA状態について説明されるすべての条件が満たされ、加えて、以下のいずれかの条件が真である:

実際には、HAVE_METADATAHAVE_CURRENT_DATAとの違いはごくわずかである。canvasvideo要素を描画する際のみ、本当に違いが関連している。ここで、何かが描画される(HAVE_CURRENT_DATA以上)場合と何も描画されない(HAVE_METADATA以下)場合を区別する。同様に、HAVE_CURRENT_DATA(現在のフレームのみ)とHAVE_FUTURE_DATA(少なくともこのフレームと次)の差は、無視できる(極端には、1フレームだけ)。ページが"フレームごとの"ナビゲーションにインターフェースを提供する際に、方向が本当に重要な単なる時間である。

When the ready state of a media element whose networkState is not NETWORK_EMPTY changes, the user agent must follow the steps given below:

  1. Apply the first applicable set of substeps from the following list:

    If the previous ready state was HAVE_NOTHING, and the new ready state is HAVE_METADATA

    Queue a task to fire a simple event named loadedmetadata at the element.

    Before this task is run, as part of the event loop mechanism, the rendering will have been updated to resize the video element if appropriate.

    If the previous ready state was HAVE_METADATA and the new ready state is HAVE_CURRENT_DATA or greater

    If this is the first time this occurs for this media element since the load() algorithm was last invoked, the user agent must queue a task to fire a simple event named loadeddata at the element.

    If the new ready state is HAVE_FUTURE_DATA or HAVE_ENOUGH_DATA, then the relevant steps below must then be run also.

    If the previous ready state was HAVE_FUTURE_DATA or more, and the new ready state is HAVE_CURRENT_DATA or less

    If the media element was potentially playing before its readyState attribute changed to a value lower than HAVE_FUTURE_DATA, and the element has not ended playback, and playback has not stopped due to errors, paused for user interaction, or paused for in-band content, the user agent must queue a task to fire a simple event named timeupdate at the element, and queue a task to fire a simple event named waiting at the element.

    If the previous ready state was HAVE_CURRENT_DATA or less, and the new ready state is HAVE_FUTURE_DATA

    The user agent must queue a task to fire a simple event named canplay at the element.

    If the element's paused attribute is false, the user agent must queue a task to fire a simple event named playing at the element.

    If the new ready state is HAVE_ENOUGH_DATA

    If the previous ready state was HAVE_CURRENT_DATA or less, the user agent must queue a task to fire a simple event named canplay at the element, and, if the element's paused attribute is false, queue a task to fire a simple event named playing at the element.

    If the autoplaying flag is true, and the paused attribute is true, and the media element has an autoplay attribute specified, and the media element's Document's active sandboxing flag set does not have the sandboxed automatic features browsing context flag set, then the user agent may also run the following substeps:

    1. Set the paused attribute to false.
    2. If the element's show poster flag is true, set it to false and run the time marches on steps.
    3. Queue a task to fire a simple event named play at the element.
    4. Queue a task to fire a simple event named playing at the element.

    User agents do not need to support autoplay, and it is suggested that user agents honor user preferences on the matter. Authors are urged to use the autoplay attribute rather than using script to force the video to play, so as to allow the user to override the behavior if so desired.

    In any case, the user agent must finally queue a task to fire a simple event named canplaythrough at the element.

  2. If the media element has a current media controller, then report the controller state for the media element's current media controller.

メディア要素の準備状態は、これらの状態間を不連続にジャンプすることが可能である。たとえば、メディア要素の状態は、HAVE_CURRENT_DATAHAVE_FUTURE_DATA状態を経由せずにHAVE_METADATAからHAVE_ENOUGH_DATAに直接ジャンプできる。

The readyState IDL attribute must, on getting, return the value described above that describes the current ready state of the media element.

autoplay属性は真偽属性である。When present, the user agent (as described in the algorithm described herein) will automatically begin playback of the media resource as soon as it can do so without stopping.

著者は、望まれない場合、たとえばスクリーンリーダーを使用する場合、ユーザーが自動再生を上書きできるよう、自動再生を誘発するためのスクリプトを使用するよりも、autoplay属性を使用するように促される。著者はまた、一切自動再生の動作を使用することなく、代わりに明示的に再生を開始するためのユーザーに対してユーザーエージェントが待機しないよう考慮することが推奨される。

The autoplay IDL attribute must reflect the content attribute of the same name.

4.7.14.8 メディアリソースの再生
media . paused

再生が一時停止された場合はtrueを返し、そうでなければfalseを返す。

media . ended

再生がメディアリソースの終わりに達した場合trueを返す。

media . defaultPlaybackRate [ = value ]

メディアリソースを介してユーザーが早送りまたは巻き戻ししない場合に対し、再生のデフォルト率を返す。

再生のデフォルト率を変更する設定が可能である。

デフォルト率は再生に直接影響を与えないが、ユーザーが早送りモードに切り替えた場合、モードが通常の再生モードに戻った際に、再生速度が再生のデフォルト率に戻されることが期待される。

要素が現在のメディアコントローラを持つ場合、defaultPlaybackRate属性は無視され、現在のメディアコントローラdefaultPlaybackRateが代わりに使用される。

media . playbackRate [ = value ]

現在の再生率を返す。ここで1.0が通常の速度である。

再生速度を変更する設定が可能である。

要素が現在のメディアコントローラを持つ場合、playbackRate属性は無視され、現在のメディアコントローラplaybackRateが代わりに使用される。

media . played

ユーザーエージェントが再生したメディアリソースの範囲を表すTimeRangesオブジェクトを返す。

media . play()

必要に応じてメディアリソースを読み込んで再生を開始し、paused属性をfalseに設定する。再生が終了した場合、最初からリソースを再スタートする。

media . pause()

必要に応じて、メディアリソースを読み込み、paused属性をtrueに設定する。

The paused attribute represents whether the media element is paused or not. The attribute must initially be true.

A media element is a blocked media element if its readyState attribute is in the HAVE_NOTHING state, the HAVE_METADATA state, or the HAVE_CURRENT_DATA state, or if the element has paused for user interaction or paused for in-band content.

A media element is said to be potentially playing when its paused attribute is false, the element has not ended playback, playback has not stopped due to errors, the element either has no current media controller or has a current media controller but is not blocked on its media controller, and the element is not a blocked media element.

A waiting DOM event can be fired as a result of an element that is potentially playing stopping playback due to its readyState attribute changing to a value lower than HAVE_FUTURE_DATA.

A media element is said to have ended playback when:

The ended attribute must return true if, the last time the event loop reached step 1, the media element had ended playback and the direction of playback was forwards, and false otherwise.

A media element is said to have stopped due to errors when the element's readyState attribute is HAVE_METADATA or greater, and the user agent encounters a non-fatal error during the processing of the media data, and due to that error, is not able to play the content at the current playback position.

A media element is said to have paused for user interaction when its paused attribute is false, the readyState attribute is either HAVE_FUTURE_DATA or HAVE_ENOUGH_DATA and the user agent has reached a point in the media resource where the user has to make a selection for the resource to continue. If the media element has a current media controller when this happens, then the user agent must report the controller state for the media element's current media controller. If the media element has a current media controller when the user makes a selection, allowing playback to resume, the user agent must similarly report the controller state for the media element's current media controller.

It is possible for a media element to have both ended playback and paused for user interaction at the same time.

When a media element that is potentially playing stops playing because it has paused for user interaction, the user agent must queue a task to fire a simple event named timeupdate at the element.

A media element is said to have paused for in-band content when its paused attribute is false, the readyState attribute is either HAVE_FUTURE_DATA or HAVE_ENOUGH_DATA and the user agent has suspended playback of the media resource in order to play content that is temporally anchored to the media resource and has a non-zero length, or to play content that is temporally anchored to a segment of the media resource but has a length longer than that segment. If the media element has a current media controller when this happens, then the user agent must report the controller state for the media element's current media controller. If the media element has a current media controller when the user agent unsuspends playback, the user agent must similarly report the controller state for the media element's current media controller.

One example of when a media element would be paused for in-band content is when the user agent is playing audio descriptions from an external WebVTT file, and the synthesized speech generated for a cue is longer than the time between the text track cue start time and the text track cue end time.


When the current playback position reaches the end of the media resource when the direction of playback is forwards, then the user agent must follow these steps:

  1. If the media element has a loop attribute specified and does not have a current media controller, then seek to the earliest possible position of the media resource and abort these steps.

  2. As defined above, the ended IDL attribute starts returning true once the event loop returns to step 1.

  3. Queue a task to fire a simple event named timeupdate at the media element.

  4. Queue a task that, if the media element does not have a current media controller, and the media element has still ended playback, and the direction of playback is still forwards, and paused is false, changes paused to true and fires a simple event named pause at the media element.

  5. Queue a task to fire a simple event named ended at the media element.

  6. If the media element has a current media controller, then report the controller state for the media element's current media controller.

When the current playback position reaches the earliest possible position of the media resource when the direction of playback is backwards, then the user agent must only queue a task to fire a simple event named timeupdate at the element.

The word "reaches" here does not imply that the current playback position needs to have changed during normal playback; it could be via seeking, for instance.


The defaultPlaybackRate attribute gives the desired speed at which the media resource is to play, as a multiple of its intrinsic speed. The attribute is mutable: on getting it must return the last value it was set to, or 1.0 if it hasn't yet been set; on setting the attribute must be set to the new value.

The defaultPlaybackRate is used by the user agent when it exposes a user interface to the user.

The playbackRate attribute gives the effective playback rate (assuming there is no current media controller overriding it), which is the speed at which the media resource plays, as a multiple of its intrinsic speed. If it is not equal to the defaultPlaybackRate, then the implication is that the user is using a feature such as fast forward or slow motion playback. The attribute is mutable: on getting it must return the last value it was set to, or 1.0 if it hasn't yet been set; on setting the attribute must be set to the new value, and the playback will change speed (if the element is potentially playing and there is no current media controller).

When the defaultPlaybackRate or playbackRate attributes change value (either by being set by script or by being changed directly by the user agent, e.g. in response to user control) the user agent must queue a task to fire a simple event named ratechange at the media element.

The defaultPlaybackRate and playbackRate attributes have no effect when the media element has a current media controller; the namesake attributes on the MediaController object are used instead in that situation.


The played attribute must return a new static normalised TimeRanges object that represents the ranges of points on the media timeline of the media resource reached through the usual monotonic increase of the current playback position during normal playback, if any, at the time the attribute is evaluated.


When the play() method on a media element is invoked, the user agent must run the following steps.

  1. If the media element's networkState attribute has the value NETWORK_EMPTY, invoke the media element's resource selection algorithm.

  2. If the playback has ended and the direction of playback is forwards, and the media element does not have a current media controller, seek to the earliest possible position of the media resource.

    This will cause the user agent to queue a task to fire a simple event named timeupdate at the media element.

  3. If the media element has a current media controller, then bring the media element up to speed with its new media controller.

  4. If the media element's paused attribute is true, run the following substeps:

    1. Change the value of paused to false.

    2. If the show poster flag is true, set the element's show poster flag to false and run the time marches on steps.

    3. Queue a task to fire a simple event named play at the element.

    4. If the media element's readyState attribute has the value HAVE_NOTHING, HAVE_METADATA, or HAVE_CURRENT_DATA, queue a task to fire a simple event named waiting at the element.

      Otherwise, the media element's readyState attribute has the value HAVE_FUTURE_DATA or HAVE_ENOUGH_DATA: queue a task to fire a simple event named playing at the element.

  5. Set the media element's autoplaying flag to false.

  6. If the media element has a current media controller, then report the controller state for the media element's current media controller.


When the pause() method is invoked, and when the user agent is required to pause the media element, the user agent must run the following steps:

  1. If the media element's networkState attribute has the value NETWORK_EMPTY, invoke the media element's resource selection algorithm.

  2. Run the internal pause steps for the media element.

The internal pause steps for a media element are as follows:

  1. Set the media element's autoplaying flag to false.

  2. If the media element's paused attribute is false, run the following steps:

    1. Change the value of paused to true.

    2. Queue a task to fire a simple event named timeupdate at the element.

    3. Queue a task to fire a simple event named pause at the element.

    4. Set the official playback position to the current playback position.

  3. If the media element has a current media controller, then report the controller state for the media element's current media controller.


The effective playback rate is not necessarily the element's playbackRate. When a media element has a current media controller, its effective playback rate is the MediaController's media controller playback rate. Otherwise, the effective playback rate is just the element's playbackRate. Thus, the current media controller overrides the media element.

If the effective playback rate is positive or zero, then the direction of playback is forwards. Otherwise, it is backwards.

When a media element is potentially playing and its Document is a fully active Document, its current playback position must increase monotonically at effective playback rate units of media time per unit time of the media timeline's clock. (This specification always refers to this as an increase, but that increase could actually be a decrease if the effective playback rate is negative.)

The effective playback rate can be 0.0, in which case the current playback position doesn't move, despite playback not being paused (paused doesn't become true, and the pause event doesn't fire).

This specification doesn't define how the user agent achieves the appropriate playback rate — depending on the protocol and media available, it is plausible that the user agent could negotiate with the server to have the server provide the media data at the appropriate rate, so that (except for the period between when the rate is changed and when the server updates the stream's playback rate) the client doesn't actually have to drop or interpolate any frames.

Any time the user agent provides a stable state, the official playback position must be set to the current playback position.

While the direction of playback is backwards, any corresponding audio must be muted. While the effective playback rate is so low or so high that the user agent cannot play audio usefully, the corresponding audio must also be muted. If the effective playback rate is not 1.0, the user agent may apply pitch adjustments to the audio as necessary to render it faithfully.

Media elements that are potentially playing while not in a Document must not play any video, but should play any audio component. Media elements must not stop playing just because all references to them have been removed; only once a media element is in a state where no further audio could ever be played by that element may the element be garbage collected.

It is possible for an element to which no explicit references exist to play audio, even if such an element is not still actively playing: for instance, it could have a current media controller that still has references and can still be unpaused, or it could be unpaused but stalled waiting for content to buffer.


Each media element has a list of newly introduced cues, which must be initially empty. Whenever a text track cue is added to the list of cues of a text track that is in the list of text tracks for a media element, that cue must be added to the media element's list of newly introduced cues. Whenever a text track is added to the list of text tracks for a media element, all of the cues in that text track's list of cues must be added to the media element's list of newly introduced cues. When a media element's list of newly introduced cues has new cues added while the media element's show poster flag is not set, then the user agent must run the time marches on steps.

When a text track cue is removed from the list of cues of a text track that is in the list of text tracks for a media element, and whenever a text track is removed from the list of text tracks of a media element, if the media element's show poster flag is not set, then the user agent must run the time marches on steps.

When the current playback position of a media element changes (e.g. due to playback or seeking), the user agent must run the time marches on steps. If the current playback position changes while the steps are running, then the user agent must wait for the steps to complete, and then must immediately rerun the steps. (These steps are thus run as often as possible or needed — if one iteration takes a long time, this can cause certain cues to be skipped over as the user agent rushes ahead to "catch up".)

The time marches on steps are as follows:

  1. Let current cues be a list of cues, initialised to contain all the cues of all the hidden or showing text tracks of the media element (not the disabled ones) whose start times are less than or equal to the current playback position and whose end times are greater than the current playback position.

  2. Let other cues be a list of cues, initialised to contain all the cues of hidden and showing text tracks of the media element that are not present in current cues.

  3. Let last time be the current playback position at the time this algorithm was last run for this media element, if this is not the first time it has run.

  4. If the current playback position has, since the last time this algorithm was run, only changed through its usual monotonic increase during normal playback, then let missed cues be the list of cues in other cues whose start times are greater than or equal to last time and whose end times are less than or equal to the current playback position. Otherwise, let missed cues be an empty list.

  5. Remove all the cues in missed cues that are also in the media element's list of newly introduced cues, and then empty the element's list of newly introduced cues.

  6. If the time was reached through the usual monotonic increase of the current playback position during normal playback, and if the user agent has not fired a timeupdate event at the element in the past 15 to 250ms and is not still running event handlers for such an event, then the user agent must queue a task to fire a simple event named timeupdate at the element. (In the other cases, such as explicit seeks, relevant events get fired as part of the overall process of changing the current playback position.)

    The event thus is not to be fired faster than about 66Hz or slower than 4Hz (assuming the event handlers don't take longer than 250ms to run). User agents are encouraged to vary the frequency of the event based on the system load and the average cost of processing the event each time, so that the UI updates are not any more frequent than the user agent can comfortably handle while decoding the video.

  7. If all of the cues in current cues have their text track cue active flag set, none of the cues in other cues have their text track cue active flag set, and missed cues is empty, then abort these steps.

  8. If the time was reached through the usual monotonic increase of the current playback position during normal playback, and there are cues in other cues that have their text track cue pause-on-exit flag set and that either have their text track cue active flag set or are also in missed cues, then immediately pause the media element.

    In the other cases, such as explicit seeks, playback is not paused by going past the end time of a cue, even if that cue has its text track cue pause-on-exit flag set.

  9. Let events be a list of tasks, initially empty. Each task in this list will be associated with a text track, a text track cue, and a time, which are used to sort the list before the tasks are queued.

    Let affected tracks be a list of text tracks, initially empty.

    When the steps below say to prepare an event named event for a text track cue target with a time time, the user agent must run these substeps:

    1. Let track be the text track with which the text track cue target is associated.

    2. Create a task to fire a simple event named event at target.

    3. Add the newly created task to events, associated with the time time, the text track track, and the text track cue target.

    4. Add track to affected tracks.

  10. For each text track cue in missed cues, prepare an event named enter for the TextTrackCue object with the text track cue start time.

  11. For each text track cue in other cues that either has its text track cue active flag set or is in missed cues, prepare an event named exit for the TextTrackCue object with the later of the text track cue end time and the text track cue start time.

  12. For each text track cue in current cues that does not have its text track cue active flag set, prepare an event named enter for the TextTrackCue object with the text track cue start time.

  13. Sort the tasks in events in ascending time order (tasks with earlier times first).

    Further sort tasks in events that have the same time by the relative text track cue order of the text track cues associated with these tasks.

    Finally, sort tasks in events that have the same time and same text track cue order by placing tasks that fire enter events before those that fire exit events.

  14. Queue each task in events, in list order.

  15. Sort affected tracks in the same order as the text tracks appear in the media element's list of text tracks, and remove duplicates.

  16. For each text track in affected tracks, in the list order, queue a task to fire a simple event named cuechange at the TextTrack object, and, if the text track has a corresponding track element, to then fire a simple event named cuechange at the track element as well.

  17. Set the text track cue active flag of all the cues in the current cues, and unset the text track cue active flag of all the cues in the other cues.

  18. Run the rules for updating the text track rendering of each of the text tracks in affected tracks that are showing. For example, for text tracks based on WebVTT, the rules for updating the display of WebVTT text tracks. [WEBVTT]

For the purposes of the algorithm above, a text track cue is considered to be part of a text track only if it is listed in the text track list of cues, not merely if it is associated with the text track.

If the media element's Document stops being a fully active document, then the playback will stop until the document is active again.

When a media element is removed from a Document, the user agent must run the following steps:

  1. Asynchronously await a stable state, allowing the task that removed the media element from the Document to continue. The synchronous section consists of all the remaining steps of this algorithm. (Steps in the synchronous section are marked with ⌛.)

  2. ⌛ If the media element is in a Document, abort these steps.

  3. ⌛ Run the internal pause steps for the media element.

4.7.14.9 シーク
media . seeking

ユーザーエージェントが現在シークしている場合にtrueを返す。

media . seekable

ユーザーエージェントがシーク可能であるメディアリソースの範囲を表すTimeRangesオブジェクトを返す。

media . fastSeek( time )

高速化のため、できるだけ早く近くに与えられたtimeをシークする。(正確な時刻を求めるために、currentTime属性を使用する。)

メディアリソースがロードされない場合、これは何もしない。

The seeking attribute must initially have the value false.

The fastSeek() method must seek to the time given by the method's argument, with the approximate-for-speed flag set.

When the user agent is required to seek to a particular new playback position in the media resource, optionally with the approximate-for-speed flag set, it means that the user agent must run the following steps. This algorithm interacts closely with the event loop mechanism; in particular, it has a synchronous section (which is triggered as part of the event loop algorithm). Steps in that section are marked with ⌛.

  1. Set the media element's show poster flag to false.

  2. If the media element's readyState is HAVE_NOTHING, abort these steps.

  3. If the element's seeking IDL attribute is true, then another instance of this algorithm is already running. Abort that other instance of the algorithm without waiting for the step that it is running to complete.

  4. Set the seeking IDL attribute to true.

  5. If the seek was in response to a DOM method call or setting of an IDL attribute, then continue the script. The remainder of these steps must be run asynchronously. With the exception of the steps marked with ⌛, they could be aborted at any time by another instance of this algorithm being invoked.

  6. If the new playback position is later than the end of the media resource, then let it be the end of the media resource instead.

  7. If the new playback position is less than the earliest possible position, let it be that position instead.

  8. If the (possibly now changed) new playback position is not in one of the ranges given in the seekable attribute, then let it be the position in one of the ranges given in the seekable attribute that is the nearest to the new playback position. If two positions both satisfy that constraint (i.e. the new playback position is exactly in the middle between two ranges in the seekable attribute) then use the position that is closest to the current playback position. If there are no ranges given in the seekable attribute then set the seeking IDL attribute to false and abort these steps.

  9. If the approximate-for-speed flag is set, adjust the new playback position to a value that will allow for playback to resume promptly. If new playback position before this step is before current playback position, then the adjusted new playback position must also be before the current playback position. Similarly, if the new playback position before this step is after current playback position, then the adjusted new playback position must also be after the current playback position.

    For example, the user agent could snap to the nearest key frame, so that it doesn't have to spend time decoding then discarding intermediate frames before resuming playback.

  10. Queue a task to fire a simple event named seeking at the element.

  11. Set the current playback position to the given new playback position.

    If the media element was potentially playing immediately before it started seeking, but seeking caused its readyState attribute to change to a value lower than HAVE_FUTURE_DATA, then a waiting will be fired at the element.

    This step sets the current playback position, and thus can immediately trigger other conditions, such as the rules regarding when playback "reaches the end of the media resource" (part of the logic that handles looping), even before the user agent is actually able to render the media data for that position (as determined in the next step).

    The currentTime attribute does not get updated asynchronously, as it returns the official playback position, not the current playback position.

  12. Wait until the user agent has established whether or not the media data for the new playback position is available, and, if it is, until it has decoded enough data to play back that position.

  13. Await a stable state. The synchronous section consists of all the remaining steps of this algorithm. (Steps in the synchronous section are marked with ⌛.)

  14. ⌛ Set the seeking IDL attribute to false.

  15. ⌛ Run the time marches on steps.

  16. Queue a task to fire a simple event named timeupdate at the element.

  17. Queue a task to fire a simple event named seeked at the element.


The seekable attribute must return a new static normalised TimeRanges object that represents the ranges of the media resource, if any, that the user agent is able to seek to, at the time the attribute is evaluated.

If the user agent can seek to anywhere in the media resource, e.g. because it is a simple movie file and the user agent and the server support HTTP Range requests, then the attribute would return an object with one range, whose start is the time of the first frame (the earliest possible position, typically zero), and whose end is the same as the time of the first frame plus the duration attribute's value (which would equal the time of the last frame, and might be positive Infinity).

The range might be continuously changing, e.g. if the user agent is buffering a sliding window on an infinite stream. This is the behavior seen with DVRs viewing live TV, for instance.

Media resources might be internally scripted or interactive. Thus, a media element could play in a non-linear fashion. If this happens, the user agent must act as if the algorithm for seeking was used whenever the current playback position changes in a discontinuous fashion (so that the relevant events fire). If the media element has a current media controller, then the user agent must seek the media controller appropriately instead.

4.7.14.10 複数のメディアトラックを伴うメディアリソース

メディアリソース は、複数の埋め込みオーディオおよびビデオトラックを持つことができる。たとえば、主ビデオトラックとオーディオトラックに加えて、メディアリソースは、外国語吹き替えのやりとり、監督の解説、音声による説明、代替アングル、または手話のオーバーレイを持つかもしれない。

media . audioTracks

メディアリソースで使用可能なオーディオトラックを表すAudioTrackListオブジェクトを返す。

media . videoTracks

メディアリソースで使用可能なビデオトラックを表すVideoTrackListオブジェクトを返す。

The audioTracks attribute of a media element must return a live AudioTrackList object representing the audio tracks available in the media element's media resource. The same object must be returned each time.

The videoTracks attribute of a media element must return a live VideoTrackList object representing the video tracks available in the media element's media resource. The same object must be returned each time.

There are only ever one AudioTrackList object and one VideoTrackList object per media element, even if another media resource is loaded into the element: the objects are reused. (The AudioTrack and VideoTrack objects are not, though.)

この例において、スクリプトは、ビデオおよび動画が配置される要素の参照へのURLを取得する関数を定義する。その機能はビデオの読み込みを試み、そして、一度読み込まれると、利用可能な手話トラックがあるかどうかをチェックする。存在する場合、そのトラックも表示する。両方のトラックは与えられたコンテナにのみ配置される。スタイルが巧妙な方法でこの作業を行うために適用されることを前提にしている。

<script>
 function loadVideo(url, container) {
   var controller = new MediaController();
   var video = document.createElement('video');
   video.src = url;
   video.autoplay = true;
   video.controls = true;
   video.controller = controller;
   container.appendChild(video);
   video.onloadedmetadata = function (event) {
     for (var i = 0; i < video.videoTracks.length; i += 1) {
       if (video.videoTracks[i].kind == 'sign') {
         var sign = document.createElement('video');
         sign.src = url + '#track=' + video.videoTracks[i].id; 
         sign.autoplay = true;
         sign.controller = controller;
         container.appendChild(sign);
         return;
       }
     }
   };
 }
</script>
4.7.14.10.1 AudioTrackListおよびVideoTrackListオブジェクト

AudioTrackListおよびVideoTrackListインターフェースは、前節で定義された属性で使用される。

interface AudioTrackList : EventTarget {
  readonly attribute unsigned long length;
  getter AudioTrack (unsigned long index);
  AudioTrack? getTrackById(DOMString id);

           attribute EventHandler onchange;
           attribute EventHandler onaddtrack;
           attribute EventHandler onremovetrack;
};

interface AudioTrack {
  readonly attribute DOMString id;
  readonly attribute DOMString kind;
  readonly attribute DOMString label;
  readonly attribute DOMString language;
           attribute boolean enabled;
};

interface VideoTrackList : EventTarget {
  readonly attribute unsigned long length;
  getter VideoTrack (unsigned long index);
  VideoTrack? getTrackById(DOMString id);
  readonly attribute long selectedIndex;

           attribute EventHandler onchange;
           attribute EventHandler onaddtrack;
           attribute EventHandler onremovetrack;
};

interface VideoTrack {
  readonly attribute DOMString id;
  readonly attribute DOMString kind;
  readonly attribute DOMString label;
  readonly attribute DOMString language;
           attribute boolean selected;
};
media . audioTracks . length
media . videoTracks . length

リスト内のトラックの数を返す。

audioTrack = media . audioTracks[index]
videoTrack = media . videoTracks[index]

指定AudioTrackまたはVideoTrackオブジェクトを返す。

audioTrack = media . audioTracks . getTrackById( id )
videoTrack = media . videoTracks . getTrackById( id )

与えられた識別子とともにAudioTrackまたはVideoTrackオブジェクトを返す、または一切トラックがその識別子を持たない場合nullを返す。

audioTrack . id
videoTrack . id

指定されたトラックのIDを返す。フォーマットがMedia Fragments URI構文をサポートし、getTrackById()メソッドとともに使用できる場合、これは、フラグメント識別子で使用できるIDである。[MEDIAFRAG]

audioTrack . kind
videoTrack . kind

与えられたトラックに該当するカテゴリを返す。可能なトラックカテゴリは以下の通り。

audioTrack . label
videoTrack . label

既知の場合、指定されたトラックのラベルを返し、そうでなければ空文字列を返す。

audioTrack . language
videoTrack . language

既知の場合、指定されたトラックの言語を返し、そうでなければ空の文字列を返す。

audioTrack . enabled [ = value ]

指定されたトラックがアクティブである場合、trueを返し、そうでなければfalseを返す。

トラックが有効かどうかを変更する設定が可能である。複数のオーディオトラックが同時に有効である場合、それらが混在している。

media . videoTracks . selectedIndex

もしあれば、現在選択されているトラックのインデックスを返し、そうでなければ-1を返す。

videoTrack . selected [ = value ]

指定されたトラックがアクティブである場合、trueを返し、そうでなければfalseを返す。

トラックが選択されるかどうかを変更する設定が可能である。0個または1つのいずれかのビデオトラックが選択される。前の1つが選択されている間に新しいトラックを選択すると、1つ前の選択を解除する。

An AudioTrackList object represents a dynamic list of zero or more audio tracks, of which zero or more can be enabled at a time. Each audio track is represented by an AudioTrack object.

A VideoTrackList object represents a dynamic list of zero or more video tracks, of which zero or one can be selected at a time. Each video track is represented by a VideoTrack object.

Tracks in AudioTrackList and VideoTrackList objects must be consistently ordered. If the media resource is in a format that defines an order, then that order must be used; otherwise, the order must be the relative order in which the tracks are declared in the media resource. The order used is called the natural order of the list.

Each track in a TrackList thus has an index; the first has the index 0, and each subsequent track is numbered one higher than the previous one. If a media resource dynamically adds or removes audio or video tracks, then the indices of the tracks will change dynamically. If the media resource changes entirely, then all the previous tracks will be removed and replaced with new tracks.

The AudioTrackList.length and VideoTrackList.length attributes must return the number of tracks represented by their objects at the time of getting.

The supported property indices of AudioTrackList and VideoTrackList objects at any instant are the numbers from zero to the number of tracks represented by the respective object minus one, if any tracks are represented. If an AudioTrackList or VideoTrackList object represents no tracks, it has no supported property indices.

To determine the value of an indexed property for a given index index in an AudioTrackList or VideoTrackList object list, the user agent must return the AudioTrack or VideoTrack object that represents the indexth track in list.

The AudioTrackList.getTrackById(id) and VideoTrackList.getTrackById(id) methods must return the first AudioTrack or VideoTrack object (respectively) in the AudioTrackList or VideoTrackList object (respectively) whose identifier is equal to the value of the id argument (in the natural order of the list, as defined above). When no tracks match the given argument, the methods must return null.

The AudioTrack and VideoTrack objects represent specific tracks of a media resource. Each track can have an identifier, category, label, and language. These aspects of a track are permanent for the lifetime of the track; even if a track is removed from a media resource's AudioTrackList or VideoTrackList objects, those aspects do not change.

In addition, AudioTrack objects can each be enabled or disabled; this is the audio track's enabled state. When an AudioTrack is created, its enabled state must be set to false (disabled). The resource fetch algorithm can override this.

Similarly, a single VideoTrack object per VideoTrackList object can be selected, this is the video track's selection state. When a VideoTrack is created, its selection state must be set to false (not selected). The resource fetch algorithm can override this.

The AudioTrack.id and VideoTrack.id attributes must return the identifier of the track, if it has one, or the empty string otherwise. If the media resource is in a format that supports the Media Fragments URI fragment identifier syntax, the identifier returned for a particular track must be the same identifier that would enable the track if used as the name of a track in the track dimension of such a fragment identifier. [MEDIAFRAG]

For example, in Ogg files, this would be the Name header field of the track. [OGGSKELETONHEADERS]

The AudioTrack.kind and VideoTrack.kind attributes must return the category of the track, if it has one, or the empty string otherwise.

The category of a track is the string given in the first column of the table below that is the most appropriate for the track based on the definitions in the table's second and third columns, as determined by the metadata included in the track in the media resource. The cell in the third column of a row says what the category given in the cell in the first column of that row applies to; a category is only appropriate for an audio track if it applies to audio tracks, and a category is only appropriate for video tracks if it applies to video tracks. Categories must only be returned for AudioTrack objects if they are appropriate for audio, and must only be returned for VideoTrack objects if they are appropriate for video.

AudioTrack.kind()およびVideoTrack.kind()に値を返す
カテゴリ 定義 適用対象
"alternative" メイントラックへの可能な代替、たとえば、曲の別テイク(オーディオ)、または別アングル(ビデオ)。 Audioとvideo。
"captions" 焼き付き字幕をもつ主ビデオトラックのバージョン。(レガシーコンテンツ用。新しいコンテンツはテキストトラックを使用する。) Videoのみ。
"descriptions" ビデオトラックの音声解説。 Audioのみ。
"main" 主オーディオまたはビデオトラック。 Audioとvideo。
"main-desc" 音声解説と混合された、主オーディオトラック。 Audioのみ。
"sign" オーディオトラックの手話通訳。 Videoのみ。
"subtitles" 焼き付き字幕をもつ主ビデオトラックのバージョン。(レガシーコンテンツ用。新しいコンテンツはテキストトラックを使用する。) Videoのみ。
"translation" 主オーディオトラックの翻訳バージョン。 Audioのみ。
"commentary" 主オーディオまたはビデオトラックのコメンタリ。たとえばディレクターのコメント。 Audioとvideo。
""(空文字列) 明示的な種類がないか、トラックのメタデータで指定された種類は、ユーザーエージェントによって認識されない。 Audioとvideo。

The AudioTrack.label and VideoTrack.label attributes must return the label of the track, if it has one, or the empty string otherwise.

The AudioTrack.language and VideoTrack.language attributes must return the BCP 47 language tag of the language of the track, if it has one, or the empty string otherwise. If the user agent is not able to express that language as a BCP 47 language tag (for example because the language information in the media resource's format is a free-form string without a defined interpretation), then the method must return the empty string, as if the track had no language.

Source attribute values for id, kind, label and language of multitrack audio and video tracks as described for the relevant media resource format. [INBANDTRACKS]

The AudioTrack.enabled attribute, on getting, must return true if the track is currently enabled, and false otherwise. On setting, it must enable the track if the new value is true, and disable it otherwise. (If the track is no longer in an AudioTrackList object, then the track being enabled or disabled has no effect beyond changing the value of the attribute on the AudioTrack object.)

Whenever an audio track in an AudioTrackList that was disabled is enabled, and whenever one that was enabled is disabled, the user agent must queue a task to fire a simple event named change at the AudioTrackList object.

The VideoTrackList.selectedIndex attribute must return the index of the currently selected track, if any. If the VideoTrackList object does not currently represent any tracks, or if none of the tracks are selected, it must instead return −1.

The VideoTrack.selected attribute, on getting, must return true if the track is currently selected, and false otherwise. On setting, it must select the track if the new value is true, and unselect it otherwise. If the track is in a VideoTrackList, then all the other VideoTrack objects in that list must be unselected. (If the track is no longer in a VideoTrackList object, then the track being selected or unselected has no effect beyond changing the value of the attribute on the VideoTrack object.)

Whenever a track in a VideoTrackList that was previously not selected is selected, the user agent must queue a task to fire a simple event named change at the VideoTrackList object. This task must be queued before the task that fires the resize event, if any.


The following are the event handlers (and their corresponding event handler event types) that must be supported, as event handler IDL attributes, by all objects implementing the AudioTrackList and VideoTrackList interfaces:

イベントハンドラ イベントハンドライベント型
onchange change
onaddtrack addtrack
onremovetrack removetrack
4.7.14.10.2 宣言的に特定のオーディオとビデオトラックを選択する

audioTracksおよびvideoTracks属性はスクリプトを再生すべきそのトラックを選択できるが、メディアリソースURLのフラグメント識別子で特定のトラックを指定することにより、宣言的に特定のトラックを選択することも可能である。フラグメント識別子の形式は、メディアリソースMIMEタイプに依存する。[RFC2046] [URL]

この例において、Media Fragments URIフラグメント識別子の構文をサポートする形式を使用するビデオが、ラベル"Alternative"として代替アングルがデフォルトのビデオトラックの代わりに有効にされるように埋め込まれている。[MEDIAFRAG]

<video src="myvideo#track=Alternative"></video>
4.7.14.11 複数のメディア要素を同期する
4.7.14.11.1 導入

メディア要素MediaControllerを持つことができる。MediaControllerは、たとえば手話通訳のトラックが同期を取ってビデオトラックに重ねることができるような、複数のメディア要素の再生を調整するオブジェクトである。

デフォルトで、メディア要素MediaControllerを持たない。暗黙のMediaControllermediagroupコンテンツ属性を使用して割り当てることができる。明示的なMediaControllerは、直接controllerIDL属性を使用して割り当てることができる。

MediaControllerを伴うメディア要素は、そのコントローラに従属すると言われる。MediaControllerは、再生速度とそれに従属するメディア要素のそれぞれの再生音量を変更し、その従属するメディア要素のいずれかが予期せず失速した場合、他方が同時に停止することを保証する。

メディア要素MediaControllerに従属される場合、その再生速度は同じMediaControllerの他のトラックのものに固定され、任意のループが無効になる。

4.7.14.11.2 メディアコントローラ
enum MediaControllerPlaybackState { "waiting", "playing", "ended" };
[Constructor]
interface MediaController : EventTarget {
  readonly attribute unsigned short readyState; // uses HTMLMediaElement.readyState's values

  readonly attribute TimeRanges buffered;
  readonly attribute TimeRanges seekable;
  readonly attribute unrestricted double duration;
           attribute double currentTime;

  readonly attribute boolean paused;
  readonly attribute MediaControllerPlaybackState playbackState;
  readonly attribute TimeRanges played;
  void pause();
  void unpause();
  void play(); // calls play() on all media elements as well

           attribute double defaultPlaybackRate;
           attribute double playbackRate;

           attribute double volume;
           attribute boolean muted;

           attribute EventHandler onemptied;
           attribute EventHandler onloadedmetadata;
           attribute EventHandler onloadeddata;
           attribute EventHandler oncanplay;
           attribute EventHandler oncanplaythrough;
           attribute EventHandler onplaying;
           attribute EventHandler onended;
           attribute EventHandler onwaiting;

           attribute EventHandler ondurationchange;
           attribute EventHandler ontimeupdate;
           attribute EventHandler onplay;
           attribute EventHandler onpause;
           attribute EventHandler onratechange;
           attribute EventHandler onvolumechange;
};
controller = new MediaController()

新しいMediaControllerオブジェクトを返す。

media . controller [ = controller ]

もしあれば、メディア要素に対する現在のMediaControllerを返し、そうでなければnullを返す。

明示的なMediaControllerを設定することが可能である。もしあれば、設定してmediagroup属性を削除する。

controller . readyState

MediaControllerは、それがコントローラの状態を報告する結果としてイベントを発生させた最後の時間であった状態を返す。この属性の値は、メディア要素readyState属性の場合と同じである。

controller . buffered

ユーザーエージェントが、すべての従属メディア要素に関連するすべてのメディアのデータを持つ時間範囲の共通部分を表すTimeRangesオブジェクトを返す。

controller . seekable

ユーザーエージェントが、すべての従属メディア要素をシークできる時間範囲の共通部分を表すTimeRangesオブジェクトを返す。

controller . duration

(問題のデータが実際にバッファリングされた、または直接シーク可能ではないが、無限のストリームに対する将来の時間を含むかどうかを考慮しない)最も早い再生時点と最も遅い再生時点の差を返す。メディアが存在しない場合は0を返す。

controller . currentTime [ = value ]

秒単位で、0時間と現在時間のdurationの間の位置として、現在の再生位置を返す。

指定時間にシークするために、設定可能である。

controller . paused

再生が一時停止された場合はtrueを返し、そうでなければfalseを返す。この属性がtrueの場合、このコントローラに従属するすべてのメディア要素が停止される。

controller . playbackState

MediaControllerは、それがコントローラの状態を報告する結果としてイベントを発生させた最後の時間であった状態を返す。この属性の値は、メディアが積極的に再生されることを示す"playing"、すべての従属メディア要素の最後に到達しているために再生されていないことを示す"ended"、またはその他の理由(たとえばMediaControllerが一時停止されている)のために再生されていないことを示す"waiting"のいずれかである。

controller . pause()

trueにpaused属性を設定する。

controller . unpause()

falseにpaused属性を設定する。

controller . play()

falseにpaused属性を設定し、各従属メディア要素play()メソッドを呼び出す。

controller . played

再生されているすべての従属メディア要素で時間範囲の和集合を表すTimeRangesオブジェクトを返す。

controller . defaultPlaybackRate [ = value ]

再生のデフォルト率を返す。

再生のデフォルト率を変更する設定が可能である。

デフォルト率は再生に直接影響を与えないが、ユーザーが早送りモードに切り替えた場合、モードが通常の再生モードに戻った際に、再生速度(playbackRate)がデフォルト率に戻されることが期待される。

controller . playbackRate [ = value ]

再生の現在速度を返す。

再生速度を変更する設定が可能である。

controller . volume [ = value ]

0.0から1.0までの範囲の数字として、現在の再生音量の乗数を返す。ここで0.0は最小音量で1.0は最大音量である。

音量の乗数を変更する設定が可能である。

新しい値が範囲0.0から1.0に含まれない場合、IndexSizeErrorを投げる。

controller . muted [ = value ]

(コントローラ上、またはこのコントローラに従属する任意のメディア要素のいずれかで他の属性に関係なく)すべてのオーディオがミュートである場合、trueを返し、そうでなければfalseを返す。

オーディオがミュートであるかどうかを変更する設定が可能である。

A media element can have a current media controller, which is a MediaController object. When a media element is created without a mediagroup attribute, it does not have a current media controller. (If it is created with such an attribute, then that attribute initializes the current media controller, as defined below.)

The slaved media elements of a MediaController are the media elements whose current media controller is that MediaController. All the slaved media elements of a MediaController must use the same clock for their definition of their media timeline's unit time. When the user agent is required to act on each slaved media element in turn, they must be processed in the order that they were last associated with the MediaController.


The controller attribute on a media element, on getting, must return the element's current media controller, if any, or null otherwise. On setting, the user agent must run the following steps:

  1. Let m be the media element in question.

  2. Let old controller be m's current media controller, if it currently has one, and null otherwise.

  3. Let new controller be null.

  4. Let m have no current media controller, if it currently has one.

  5. Remove the element's mediagroup content attribute, if any.

  6. If the new value is null, then jump to the update controllers step below.

  7. Let m's current media controller be the new value.

  8. Let new controller be m's current media controller.

  9. Bring the media element up to speed with its new media controller.

  10. Update controllers: If old controller and new controller are the same (whether both null or both the same controller) then abort these steps.

  11. If old controller is not null and still has one or more slaved media elements, then report the controller state for old controller.

  12. If new controller is not null, then report the controller state for new controller.


The MediaController() constructor, when invoked, must return a newly created MediaController object.


The readyState attribute must return the value to which it was most recently set. When the MediaController object is created, the attribute must be set to the value 0 (HAVE_NOTHING). The value is updated by the report the controller state algorithm below.

The seekable attribute must return a new static normalised TimeRanges object that represents the intersection of the ranges of the media resources of the slaved media elements that the user agent is able to seek to, at the time the attribute is evaluated.

The buffered attribute must return a new static normalised TimeRanges object that represents the intersection of the ranges of the media resources of the slaved media elements that the user agent has buffered, at the time the attribute is evaluated. Users agents must accurately determine the ranges available, even for media streams where this can only be determined by tedious inspection.

The duration attribute must return the media controller duration.

Every 15 to 250ms, or whenever the MediaController's media controller duration changes, whichever happens least often, the user agent must queue a task to fire a simple event named durationchange at the MediaController. If the MediaController's media controller duration decreases such that the media controller position is greater than the media controller duration, the user agent must immediately seek the media controller to media controller duration.

The currentTime attribute must return the media controller position on getting, and on setting must seek the media controller to the new value.

Every 15 to 250ms, or whenever the MediaController's media controller position changes, whichever happens least often, the user agent must queue a task to fire a simple event named timeupdate at the MediaController.


When a MediaController is created it is a playing media controller. It can be changed into a paused media controller and back either via the user agent's user interface (when the element is exposing a user interface to the user) or by script using the APIs defined in this section (see below).

The paused attribute must return true if the MediaController object is a paused media controller, and false otherwise.

When the pause() method is invoked, if the MediaController is a playing media controller then the user agent must change the MediaController into a paused media controller, queue a task to fire a simple event named pause at the MediaController, and then report the controller state of the MediaController.

When the unpause() method is invoked, if the MediaController is a paused media controller, the user agent must change the MediaController into a playing media controller, queue a task to fire a simple event named play at the MediaController, and then report the controller state of the MediaController.

When the play() method is invoked, the user agent must invoke the play() method of each slaved media element in turn, and then invoke the unpause method of the MediaController.

The playbackState attribute must return the value to which it was most recently set. When the MediaController object is created, the attribute must be set to the value "waiting". The value is updated by the report the controller state algorithm below.

The played attribute must return a new static normalised TimeRanges object that represents the union of the ranges of points on the media timelines of the media resources of the slaved media elements that the user agent has so far reached through the usual monotonic increase of their current playback positions during normal playback, at the time the attribute is evaluated.


A MediaController has a media controller default playback rate and a media controller playback rate, which must both be set to 1.0 when the MediaController object is created.

The defaultPlaybackRate attribute, on getting, must return the MediaController's media controller default playback rate, and on setting, must set the MediaController's media controller default playback rate to the new value, then queue a task to fire a simple event named ratechange at the MediaController.

The playbackRate attribute, on getting, must return the MediaController's media controller playback rate, and on setting, must set the MediaController's media controller playback rate to the new value, then queue a task to fire a simple event named ratechange at the MediaController.


A MediaController has a media controller volume multiplier, which must be set to 1.0 when the MediaController object is created, and a media controller mute override, much must initially be false.

The volume attribute, on getting, must return the MediaController's media controller volume multiplier, and on setting, if the new value is in the range 0.0 to 1.0 inclusive, must set the MediaController's media controller volume multiplier to the new value and queue a task to fire a simple event named volumechange at the MediaController. If the new value is outside the range 0.0 to 1.0 inclusive, then, on setting, an IndexSizeError exception must be thrown instead.

The muted attribute, on getting, must return the MediaController's media controller mute override, and on setting, must set the MediaController's media controller mute override to the new value and queue a task to fire a simple event named volumechange at the MediaController.


The media resources of all the slaved media elements of a MediaController have a defined temporal relationship which provides relative offsets between the zero time of each such media resource: for media resources with a timeline offset, their relative offsets are the difference between their timeline offset; the zero times of all the media resources without a timeline offset are not offset from each other (i.e. the origins of their timelines are cotemporal); and finally, the zero time of the media resource with the earliest timeline offset (if any) is not offset from the zero times of the media resources without a timeline offset (i.e. the origins of media resources without a timeline offset are further cotemporal with the earliest defined point on the timeline of the media resource with the earliest timeline offset).

The media resource end position of a media resource in a media element is defined as follows: if the media resource has a finite and known duration, the media resource end position is the duration of the media resource's timeline (the last defined position on that timeline); otherwise, the media resource's duration is infinite or unknown, and the media resource end position is the time of the last frame of media data currently available for that media resource.

Each MediaController also has its own defined timeline. On this timeline, all the media resources of all the slaved media elements of the MediaController are temporally aligned according to their defined offsets. The media controller duration of that MediaController is the time from the earliest earliest possible position, relative to this MediaController timeline, of any of the media resources of the slaved media elements of the MediaController, to the time of the latest media resource end position of the media resources of the slaved media elements of the MediaController, again relative to this MediaController timeline.

Each MediaController has a media controller position. This is the time on the MediaController's timeline at which the user agent is trying to play the slaved media elements. When a MediaController is created, its media controller position is initially zero.

When the user agent is to bring a media element up to speed with its new media controller, it must seek that media element to the MediaController's media controller position relative to the media element's timeline.

When the user agent is to seek the media controller to a particular new playback position, it must follow these steps:

  1. If the new playback position is less than zero, then set it to zero.

  2. If the new playback position is greater than the media controller duration, then set it to the media controller duration.

  3. Set the media controller position to the new playback position.

  4. Seek each slaved media element to the new playback position relative to the media element timeline.

A MediaController is a restrained media controller if the MediaController is a playing media controller, but either at least one of its slaved media elements whose autoplaying flag is true still has its paused attribute set to true, or, all of its slaved media elements have their paused attribute set to true.

A MediaController is a blocked media controller if the MediaController is a paused media controller, or if any of its slaved media elements are blocked media elements, or if any of its slaved media elements whose autoplaying flag is true still have their paused attribute set to true, or if all of its slaved media elements have their paused attribute set to true.

A media element is blocked on its media controller if the MediaController is a blocked media controller, or if its media controller position is either before the media resource's earliest possible position relative to the MediaController's timeline or after the end of the media resource relative to the MediaController's timeline.

When a MediaController is not a blocked media controller and it has at least one slaved media element whose Document is a fully active Document, the MediaController's media controller position must increase monotonically at media controller playback rate units of time on the MediaController's timeline per unit time of the clock used by its slaved media elements.

When the zero point on the timeline of a MediaController moves relative to the timelines of the slaved media elements by a time difference ΔT, the MediaController's media controller position must be decremented by ΔT.

In some situations, e.g. when playing back a live stream without buffering anything, the media controller position would increase monotonically as described above at the same rate as the ΔT described in the previous paragraph decreases it, with the end result that for all intents and purposes, the media controller position would appear to remain constant (probably with the value 0).


A MediaController has a most recently reported readiness state, which is a number from 0 to 4 derived from the numbers used for the media element readyState attribute, and a most recently reported playback state, which is either playing, waiting, or ended.

When a MediaController is created, its most recently reported readiness state must be set to 0, and its most recently reported playback state must be set to waiting.

When a user agent is required to report the controller state for a MediaController, the user agent must run the following steps:

  1. If the MediaController has no slaved media elements, let new readiness state be 0.

    Otherwise, let it have the lowest value of the readyState IDL attributes of all of its slaved media elements.

  2. If the MediaController's most recently reported readiness state is less than the new readiness state, then run these substeps:

    1. Let next state be the MediaController's most recently reported readiness state.

    2. Loop: Increment next state by one.

    3. Queue a task to run the following steps:

      1. Set the MediaController's readyState attribute to the value next state.

      2. Fire a simple event at the MediaController object, whose name is the event name corresponding to the value of next state given in the table below.

    4. If next state is less than new readiness state, then return to the step labeled loop.

    Otherwise, if the MediaController's most recently reported readiness state is greater than new readiness state then queue a task to fire a simple event at the MediaController object, whose name is the event name corresponding to the value of new readiness state given in the table below.

    Value of new readiness state イベント名
    0 emptied
    1 loadedmetadata
    2 loadeddata
    3 canplay
    4 canplaythrough
  3. Let the MediaController's most recently reported readiness state be new readiness state.

  4. Initialise new playback state by setting it to the state given for the first matching condition from the following list:

    If the MediaController has no slaved media elements
    Let new playback state be waiting.
    If all of the MediaController's slaved media elements have ended playback and the media controller playback rate is positive or zero
    Let new playback state be ended.
    If the MediaController is a blocked media controller
    Let new playback state be waiting.
    そうでなければ
    Let new playback state be playing.
  5. If the MediaController's most recently reported playback state is not equal to new playback state and the new playback state is ended, then queue a task that, if the MediaController object is a playing media controller, and all of the MediaController's slaved media elements have still ended playback, and the media controller playback rate is still positive or zero, changes the MediaController object to a paused media controller and then fires a simple event named pause at the MediaController object.

  6. If the MediaController's most recently reported playback state is not equal to new playback state then queue a task to run the following steps:

    1. Set the MediaController's playbackState attribute to the value given in the second column of the row of the following table whose first column contains the new playback state.

    2. Fire a simple event at the MediaController object, whose name is the value given in the third column of the row of the following table whose first column contains the new playback state.

    New playback state New value for playbackState イベント名
    playing "playing" playing
    waiting "waiting" waiting
    ended "ended" ended
  7. Let the MediaController's most recently reported playback state be new playback state.


The following are the event handlers (and their corresponding event handler event types) that must be supported, as event handler IDL attributes, by all objects implementing the MediaController interface:

イベントハンドラ イベントハンドライベント型
onemptied emptied
onloadedmetadata loadedmetadata
onloadeddata loadeddata
oncanplay canplay
oncanplaythrough canplaythrough
onplaying playing
onended ended
onwaiting waiting
ondurationchange durationchange
ontimeupdate timeupdate
onplay play
onpause pause
onratechange ratechange
onvolumechange volumechange

このセクションに記載されるタスクタスクソースは、DOM操作タスクソースである。

4.7.14.11.3 宣言的メディアコントローラを割り当てる

メディア要素mediagroupコンテンツ属性は、暗黙的にMediaControllerを作成することによって、複数のメディア要素をリンクするために使用できる。値はテキストである。同じ値を持つメディア要素はユーザーエージェントによって自動的にリンクされる。

When a media element is created with a mediagroup attribute, and when a media element's mediagroup attribute is set, changed, or removed, the user agent must run the following steps:

  1. Let m be the media element in question.

  2. Let old controller be m's current media controller, if it currently has one, and null otherwise.

  3. Let new controller be null.

  4. Let m have no current media controller, if it currently has one.

  5. If m's mediagroup attribute is being removed, then jump to the update controllers step below.

  6. If there is another media element whose Document is the same as m's Document (even if one or both of these elements are not actually in the Document), and which also has a mediagroup attribute, and whose mediagroup attribute has the same value as the new value of m's mediagroup attribute, then let controller be that media element's current media controller.

    Otherwise, let controller be a newly created MediaController.

  7. Let m's current media controller be controller.

  8. Let new controller be m's current media controller.

  9. Bring the media element up to speed with its new media controller.

  10. Update controllers: If old controller and new controller are the same (whether both null or both the same controller) then abort these steps.

  11. If old controller is not null and still has one or more slaved media elements, then report the controller state for old controller.

  12. If new controller is not null, then report the controller state for new controller.

The mediaGroup IDL attribute on media elements must reflect the mediagroup content attribute.

同じメディアリソースを参照する複数のメディア要素は、単一のネットワーク要求を共有する。これは、画面上の2つの異なる場所で同じメディアリソースから2つの(ビデオ)トラックを効率的に再生するために使用できる。mediagroup属性と共に使用して、これらの要素はまた同期を維持できる。

この例において、ムービーファイル由来の手話通訳トラックが、2つのvideo要素、複数のCSS、および暗黙的なMediaControllerを使用する、その同じビデオファイルの主ビデオトラック上にオーバーレイされる:

<article>
 <style scoped>
  div { margin: 1em auto; position: relative; width: 400px; height: 300px; }
  video { position; absolute; bottom: 0; right: 0; }
  video:first-child { width: 100%; height: 100%; }
  video:last-child { width: 30%; }
 </style>
 <div>
  <video src="movie.vid#track=Video&amp;track=English" autoplay controls mediagroup=movie></video>
  <video src="movie.vid#track=sign" autoplay mediagroup=movie></video>
 </div>
</article>
4.7.14.12 時限テキストトラック
4.7.14.12.1 テキストトラックモデル

メディア要素は、メディア要素テキストトラックのリストとして知られ、関連したテキストトラックのグループを持つことができる。テキストトラックは以下のようにソートされる:

  1. ツリー順で、メディア要素track要素の子に対応するテキストトラック
  2. 古いものから順で、追加された順に、addTextTrack()メソッドを使用して追加された任意のテキストトラック
  3. メディアリソースの書式仕様によって定義された順序で、任意のメディアリソース固有のテキストトラックメディアリソースが内のデータに対応するテキストトラック)。

テキストトラックの構成要素は次のとおり:

テキストトラックの種類

これは、トラックがユーザーエージェントによって処理される方法を決定する。種類は文字列で表される。可能性のある文字列は次のとおり:

track要素に対応するテキストトラックの場合、トラックの種類は動的に変更できる。

ラベル

これは、ユーザーに対するトラックを特定するために意図する判読可能な文字列である。

track要素に対応するテキストトラックの場合、トラックのラベルは動的に変更できる。

テキストトラックのラベルが空の文字列である場合、ユーザーエージェントは自動的にそのユーザーインターフェースで使用するためのテキストトラックの他のプロパティー(たとえばテキストトラックの種類とテキストトラックの言語など)から適切なラベルを生成すべきである。この自動生成されたラベルは、APIで公開されない。

帯域内のメタデータトラックディスパッチタイプ

これは、文書内の別のスクリプトに派遣できるようにするためにトラックを有効にする帯域内メタデータトラックに対するメディアリソースから抽出された文字列である。

たとえば、ウェブ上やウェブ固有のインタラクティブ機能でのストリーミングによる従来のTV局の放送は、広告対象、ゲームショーの間のトリビアゲームデータ、スポーツゲームの間の選手の状態、食糧計画中のレシピ情報などに対するメタデータをもつテキストトラックを含むかもしれない。各プログラムが開始および終了すると、新しいトラックが追加されたりストリームから削除されたり、各トラックが追加されると、ユーザーエージェントはこの属性値を使用する専用のスクリプトモジュールにトラックを結合できる。

帯域内のメタデータテキストトラック以外では、帯域内のメタデータトラックディスパッチタイプは、空の文字列である。この値が異なるメディア形式に対してどのように設定されるかは、メディアリソース固有のテキストトラックを公開するための手順に記載される。

言語

これは、テキストトラックのキューの言語を表す文字列(BCP 47言語タグ)である。[BCP47]

track要素に対応するテキストトラックの場合、テキストトラックの言語は、動的に変更できる。

準備状態

以下のうちの1つをとる:

ロードされてない

テキストトラックのキューが得られていないことを示す。

ロード中

テキストトラックがロードされており、これまでに検出された致命的なエラーがないことを示す。追加のキューは、依然としてパーサによってトラックに追加されるかもしれない。

ロードされた

テキストトラックが致命的なエラーなしでロードされたことを示す。

ロードに失敗した

テキストトラックは有効であるが、ユーザーエージェントがトラックを取得しようとした際、これが何らかの方法(たとえばURL解決できなかった、ネットワークエラー、未知のテキストトラック形式など)で失敗したことを示す。キューの一部または全部は、おそらく欠落しているか、含まれていないだろう。

トラックが得られるように、テキストトラック準備状態を動的に変更する。

モード

以下のうちの1つをとる:

無効

テキストトラックがアクティブでないことを示す。DOM内のトラックを公開する目的以外では、ユーザーエージェントはテキストトラックを無視している。どのキューもアクティブでなく、どのイベントも発火せず、ユーザーエージェントは、トラックのキューを得ることを試みることはない。

非表示

テキストトラックがアクティブであるが、ユーザーエージェントは、積極的にキューを表示していないことを示す。どの試みもまだトラックのキューを得るために行われていない場合、ユーザーエージェントは、一瞬そのような試みを実行する。ユーザーエージェントは、キューがアクティブであるリストを維持しており、イベントはそれに応じて発火されている。

表示

テキストトラックがアクティブであることを示す。どの試みもまだトラックのキューを得るために行われていない場合、ユーザーエージェントは、一瞬そのような試みを実行する。ユーザーエージェントは、キューがアクティブであるリストを維持しており、イベントはそれに応じて発火されている。また、種類subtitlescaptionsであるテキストトラックで、キューは必要に応じてビデオにオーバーレイされている。種類descriptionsであるテキストトラックで、ユーザーエージェントは、非視覚的な方法でユーザーに使用可能なキューを作成している。そして、種類chaptersであるテキストトラックで、ユーザーエージェントは、ユーザーがキューを選択することによってメディアリソースの任意のポイントに移動することができるメカニズムをユーザーに利用可能にしている。

0個以上のキューリスト

テキストトラックのレンダリングを更新するための規則とともに、テキストトラックキューのリスト。たとえば、WebVTTに対して、WebVTTテキストトラックの表示を更新するための規則[WEBVTT]

テキストトラックのキューのリストは、テキスト·トラックまだロードされていないか、すでにロード中である、またはDOM操作に起因してのいずれかのために、動的に変更できる。

テキストトラックは、対応するTextTrackオブジェクトを持つ。


メディア要素は、最初は空でなければならない保留中のテキストトラックのリスト、最初はfalseでなければならないblocked-on-parserフラグ、最初はfalseでなければならないdid-perform-automatic-track-selectionフラグを持つ。

ユーザーエージェントがメディア要素に属する保留中のテキストトラックのリストを追加する必要がある場合、ユーザーエージェントは、保留中のテキストトラックのリストに要素のテキストトラックのリストで各テキストトラックを追加しなければならない。要素のテキストトラックのリストでテキストトラックモード無効であり、かつそのリストのテキストトラックの準備状態ロード中である。

track要素の親ノードが変更ときはいつでも、ユーザーエージェントは、要素が属する全保留中のテキストトラックのリストから該当するテキストトラックを削除しなければならない。

テキストトラックテキストトラックの準備状態ロードされるか、ロードに失敗するのいずれかに変更されるときはいつでも、ユーザーエージェントは、テキストトラックが属する全保留中のテキストトラックのリストから削除しなければならない。

メディア要素HTMLパーサXMLパーサによって作成された場合、ユーザーエージェントは、要素のblocked-on-parserフラグをtrueに設定しなければならない。メディア要素HTMLパーサXMLパーサオープン要素のスタックからポップされる場合、ユーザーエージェントは、自動テキストトラックの選択に対してユーザーの好みを尊重しなければならず、保留中のテキストトラックのリストを追加し、要素のblocked-on-parserフラグをfalseに設定する。

要素の保留中のテキストトラックのリストが空であり、要素のblocked-on-parserフラグがfalseの両方である場合、メディア要素テキストトラック準備ができている。

メディア要素は、最初に未設定でなければならない保留中のテキストトラック変更通知フラグを持つ。

メディア要素テキストトラックのリストに属するテキストトラックが、そのテキストトラックモード変更値を持つたびに、ユーザーエージェントは、メディア要素のために次の手順を実行しなければならない:

  1. メディア要素保留中のテキストトラックの変更通知フラグが設定される場合、この手順を中止する。

  2. メディア要素保留中のテキストトラック変更通知フラグを設定する。

  3. 次の手順を実行するキュータスク

    1. メディア要素保留中のテキストトラック変更通知フラグを設定解除する。

    2. メディア要素textTracks属性のTextTrackListオブジェクトでchangeに名付けられる単純イベントを発火する

  4. メディア要素ショーポスターフラグが設定されていない場合、手順の時間行進を実行する。

このセクションに記載されるタスクタスクソースは、DOM操作タスクソースである。


テキストトラックキューは、特定の時刻に表示され別の時刻に消滅するテキストに字幕やキャプションに対するインスタンスに対応する、テキストトラックで時刻依存のデータの単位である。

テキストトラックキューの構成は次のとおり:

識別子

任意の文字列。

開始時刻

時刻は、秒、秒の小数で、キューが適用されるメディアデータの範囲の開始を表現する。

終了時刻

時刻は、秒、秒の小数で、キューが適用されるメディアデータの範囲の終了を表現する。

pause-on-exitフラグ

キューが適用される範囲の最後に達した際の、メディアリソースの再生が一時停止するかどうかを示す真偽値。

追加の形式固有のデータ

フォーマットのために必要なものとしての、追加フィールド。たとえば、WebVTTは、テキストトラックキュー書き込み方向などを持つ。[WEBVTT]

キューのデータ

キューの生データ、および分離してキューをレンダリングするための規則

このデータの正確な特徴は、フォーマットによって定義される。たとえば、WebVTTはテキストを使用する。

テキストトラックキューの開始時刻およびテキストトラックキューの終了時刻は負であってもよい。(時刻ゼロがアクティブにすることはできない前の全体のキュー、しかし、現在の再生位置は負になることはない。)

テキストトラックキューは、対応するTextTrackCueオブジェクト(より具体的には、たとえばWebVTTのキューがVTTCueインターフェースを使用するような、TextTrackCueを継承したオブジェクト)を持つ。テキストトラックキューのメモリ内表現は、動的にこのTextTrackCue APIを通して変更できる。[WEBVTT]

テキストトラックキューは、テキストトラックキューの特定の種類に対して仕様で定義されている、テキストトラックレンダリングを更新するための規則に関連付けられる。これらの規則は、キューを表すオブジェクトがaddCue()メソッドを使用してTextTrackオブジェクトに追加される際に特に使用される。

加えて、各テキストトラックキューは、動的な2つの情報を持つ:

アクティブフラグ

このフラグは、最初に設定を解除されなければならない。キューがアクティブまたは非アクティブになった際、フラグは、イベントが適切に発火されるように、および右のキューがレンダリングされることを確認するために使用される。

テキストトラックキューがそのテキストトラックキューのテキストトラックリストから削除されるたびに、テキストトラック自体はそのメディア要素テキストトラックのリストから削除される、または無効に変更されるそのテキストトラックモードを持つたびに、かつメディア要素readyStateHAVE_NOTHINGに戻されるたびに、ユーザーエージェントは同期的にこのフラグを設定解除しなければならない。フラグが、関連付帯条件より前に表示されていたテキストトラック内の1つ以上のキューに対してこの方法で解除される場合、影響を受けるすべてのキューに対してフラグを解除した後、ユーザーエージェントは、これらのテキストトラックに属するテキストトラックのレンダリングを更新するための規則を適用しなければならない。たとえば、WebVTTに基づくテキストトラック用、WebVTTテキストトラックの表示を更新するための規則など。[WEBVTT]

表示状態

これは、一貫性のある位置にキューを保つために、レンダリングモデルの一部として使用される。これは最初は空でなければならない。テキストトラックキューのアクティブフラグが設定解除されるたびに、ユーザーエージェントはテキストトラックキューの表示状態を空にしなければならない。

メディア要素テキストトラックテキストトラックキューは、テキストトラックキュー順に互いに相対的に順序付けされ、以下のように決定される:メディア要素テキストトラックのリストに出現するそれらのテキストトラックとして同じ順序でソートされるグループをもつ、それらのテキストトラックで最初のグループのキュー:次に、各グループ内で、キューは、最も早いものの順に、その開始時刻でソートされなければならない。それから、同じ開始時刻を持つ任意のキューは、最も遅いものの順に、その終了時刻でソートされなければならず、最後に、同一の終了時刻を持つ任意のキューは、最も古いものの順に、それらがそれぞれのキューのテキストトラックリストに最後に追加した順にソートされなければならない。(たとえば、WebVTTファイル由来のキューに対して、最初にファイルに記載されていた順でなど。)[WEBVTT]

4.7.14.12.2 帯域内テキストトラックの情報源

メディアリソース固有のテキストトラックメディアリソースで見つけられるデータに対応するテキストトラックである。

Rules for processing and rendering such data are defined by the relevant specifications, e.g. the specification of the video format if the media resource is a video.

When a media resource contains data that the user agent recognises and supports as being equivalent to a text track, the user agent runs the steps to expose a media-resource-specific text track with the relevant data, as follows.

  1. Associate the relevant data with a new text track and its corresponding new TextTrack object. The text track is a media-resource-specific text track.

  2. Set the new text track's kind, label, and language based on the semantics of the relevant data, as defined for the relevant format [INBANDTRACKS]. If there is no label in that data, then the label must be set to the empty string.

  3. Associate the text track list of cues with the rules for updating the text track rendering appropriate for the format in question.

  4. If the new text track's kind is metadata, then set the text track in-band metadata track dispatch type as follows, based on the type of the media resource:

    If the media resource is an Ogg file
    The text track in-band metadata track dispatch type must be set to the value of the Role header field. [OGGSKELETONHEADERS]
    If the media resource is a WebM file
    The text track in-band metadata track dispatch type must be set to the value of the CodecID element. [WEBMCG]
    If the media resource is an MPEG-2 file
    Let stream type be the value of the "stream_type" field describing the text track's type in the file's program map section, interpreted as an 8-bit unsigned integer. Let length be the value of the "ES_info_length" field for the track in the same part of the program map section, interpreted as an integer as defined by the MPEG-2 specification. Let descriptor bytes be the length bytes following the "ES_info_length" field. The text track in-band metadata track dispatch type must be set to the concatenation of the stream type byte and the zero or more descriptor bytes bytes, expressed in hexadecimal using uppercase ASCII hex digits. [MPEG2]
    If the media resource is an MPEG-4 file
    Let the first stsd box of the first stbl box of the first minf box of the first mdia box of the text track's trak box in the first moov box of the file be the stsd box, if any. If the file has no stsd box, or if the stsd box has neither a mett box nor a metx box, then the text track in-band metadata track dispatch type must be set to the empty string. Otherwise, if the stsd box has a mett box then the text track in-band metadata track dispatch type must be set to the concatenation of the string "mett", a U+0020 SPACE character, and the value of the first mime_format field of the first mett box of the stsd box, or the empty string if that field is absent in that box. Otherwise, if the stsd box has no mett box but has a metx box then the text track in-band metadata track dispatch type must be set to the concatenation of the string "metx", a U+0020 SPACE character, and the value of the first namespace field of the first metx box of the stsd box, or the empty string if that field is absent in that box. [MPEG4]
    If the media resource is a DASH media resource
    The text track in-band metadata track dispatch type must be set to the concatenation of the "AdaptationSet" element attributes and all child Role descriptors. [DASH]
  5. Populate the new text track's list of cues with the cues parsed so far, following the guidelines for exposing cues, and begin updating it dynamically as necessary.

  6. Set the new text track's readiness state to loaded.

  7. Set the new text track's mode to the mode consistent with the user's preferences and the requirements of the relevant specification for the data.

    For instance, if there are no other active subtitles, and this is a forced subtitle track (a subtitle track giving subtitles in the audio track's primary language, but only for audio that is actually in another language), then those subtitles might be activated here.

  8. Add the new text track to the media element's list of text tracks.

  9. Fire a trusted event with the name addtrack, that does not bubble and is not cancelable, and that uses the TrackEvent interface, with the track attribute initialised to the text track's TextTrack object, at the media element's textTracks attribute's TextTrackList object.

4.7.14.12.3 Sourcing out-of-band text tracks

When a track element is created, it must be associated with a new text track (with its value set as defined below) and its corresponding new TextTrack object.

The text track kind is determined from the state of the element's kind attribute according to the following table; for a state given in a cell of the first column, the kind is the string given in the second column:

状態 String
Subtitles subtitles
Captions captions
概要 descriptions
Chapters chapters
Metadata metadata

The text track label is the element's track label.

The text track language is the element's track language, if any, or the empty string otherwise.

As the kind, label, and srclang attributes are set, changed, or removed, the text track must update accordingly, as per the definitions above.

Changes to the track URL are handled in the algorithm below.

The text track readiness state is initially not loaded, and the text track mode is initially disabled.

The text track list of cues is initially empty. It is dynamically modified when the referenced file is parsed. Associated with the list are the rules for updating the text track rendering appropriate for the format in question; for WebVTT, this is the rules for updating the display of WebVTT text tracks. [WEBVTT]

When a track element's parent element changes and the new parent is a media element, then the user agent must add the track element's corresponding text track to the media element's list of text tracks, and then queue a task to fire a trusted event with the name addtrack, that does not bubble and is not cancelable, and that uses the TrackEvent interface, with the track attribute initialised to the text track's TextTrack object, at the media element's textTracks attribute's TextTrackList object.

When a track element's parent element changes and the old parent was a media element, then the user agent must remove the track element's corresponding text track from the media element's list of text tracks, and then queue a task to fire a trusted event with the name removetrack, that does not bubble and is not cancelable, and that uses the TrackEvent interface, with the track attribute initialised to the text track's TextTrack object, at the media element's textTracks attribute's TextTrackList object.


When a text track corresponding to a track element is added to a media element's list of text tracks, the user agent must queue a task to run the following steps for the media element:

  1. If the element's blocked-on-parser flag is true, abort these steps.

  2. If the element's did-perform-automatic-track-selection flag is true, abort these steps.

  3. Honor user preferences for automatic text track selection for this element.

When the user agent is required to honor user preferences for automatic text track selection for a media element, the user agent must run the following steps:

  1. Perform automatic text track selection for subtitles and captions.

  2. Perform automatic text track selection for descriptions.

  3. Perform automatic text track selection for chapters.

  4. If there are any text tracks in the media element's list of text tracks whose text track kind is metadata that correspond to track elements with a default attribute set whose text track mode is set to disabled, then set the text track mode of all such tracks to hidden

  5. Set the element's did-perform-automatic-track-selection flag to true.

When the steps above say to perform automatic text track selection for one or more text track kinds, it means to run the following steps:

  1. Let candidates be a list consisting of the text tracks in the media element's list of text tracks whose text track kind is one of the kinds that were passed to the algorithm, if any, in the order given in the list of text tracks.

  2. If candidates is empty, then abort these steps.

  3. If any of the text tracks in candidates have a text track mode set to showing, abort these steps.

  4. If the user has expressed an interest in having a track from candidates enabled based on its text track kind, text track language, and text track label, then set its text track mode to showing

    For example, the user could have set a browser preference to the effect of "I want French captions whenever possible", or "If there is a subtitle track with 'Commentary' in the title, enable it", or "If there are audio description tracks available, enable one, ideally in Swiss German, but failing that in Standard Swiss German or Standard German".

    Otherwise, if there are any text tracks in candidates that correspond to track elements with a default attribute set whose text track mode is set to disabled, then set the text track mode of the first such track to showing.

When a text track corresponding to a track element experiences any of the following circumstances, the user agent must start the track processing model for that text track and its track element:

When a user agent is to start the track processing model for a text track and its track element, it must run the following algorithm. This algorithm interacts closely with the event loop mechanism; in particular, it has a synchronous section (which is triggered as part of the event loop algorithm). The steps in that section are marked with ⌛.

  1. If another occurrence of this algorithm is already running for this text track and its track element, abort these steps, letting that other algorithm take care of this element.

  2. If the text track's text track mode is not set to one of hidden or showing, abort these steps.

  3. If the text track's track element does not have a media element as a parent, abort these steps.

  4. Run the remainder of these steps asynchronously, allowing whatever caused these steps to run to continue.

  5. Top: Await a stable state. The synchronous section consists of the following steps. (The steps in the synchronous section are marked with ⌛.)

  6. ⌛ Set the text track readiness state to loading.

  7. ⌛ Let URL be the track URL of the track element.

  8. ⌛ If the track element's parent is a media element then let CORS mode be the state of the parent media element's crossorigin content attribute. Otherwise, let CORS mode be No CORS.

  9. End the synchronous section, continuing the remaining steps asynchronously.

  10. If URL is not the empty string, perform a potentially CORS-enabled fetch of URL, with the mode being CORS mode, the origin being the origin of the track element's Document, and the default origin behaviour set to fail.

    The resource obtained in this fashion, if any, contains the text track data. If any data is obtained, it is by definition CORS-same-origin (cross-origin resources that are not suitably CORS-enabled do not get this far).

    The tasks queued by the fetching algorithm on the networking task source to process the data as it is being fetched must determine the type of the resource If the type of the resource is not a supported text track format, the load will fail, as described below. Otherwise, the resource's data must be passed to the appropriate parser (e.g. the WebVTT parser) as it is received, with the text track list of cues being used for that parser's output. [WEBVTT]

    The appropriate parser will synchronously (during these networking task source tasks) and incrementally (as each such task is run with whatever data has been received from the network) update the text track list of cues.

    This specification does not currently say whether or how to check the MIME types of text tracks, or whether or how to perform file type sniffing using the actual file data. Implementors differ in their intentions on this matter and it is therefore unclear what the right solution is. In the absence of any requirement here, the HTTP specification's strict requirement to follow the Content-Type header prevails ("Content-Type specifies the media type of the underlying data." ... "If and only if the media type is not given by a Content-Type field, the recipient MAY attempt to guess the media type via inspection of its content and./or the name extension(s) of the URI used to identify the resource.").

    If the fetching algorithm fails for any reason (network error, the server returns an error code, a cross-origin check fails, etc), or if URL is the empty string, then queue a task to first change the text track readiness state to failed to load and then fire a simple event named error at the track element. This task must use the DOM manipulation task source.

    If the fetching algorithm does not fail, but the type of the resource is not a supported text track format, or the file was not successfully processed (e.g. the format in question is an XML format and the file contained a well-formedness error that the XML specification requires be detected and reported to the application), then the task that is queued by the networking task source in which the aforementioned problem is found must change the text track readiness state to failed to load and fire a simple event named error at the track element.

    If the fetching algorithm does not fail, and the file was successfully processed, then the final task that is queued by the networking task source, after it has finished parsing the data, must change the text track readiness state to loaded, and fire a simple event named load at the track element.

    If, while the fetching algorithm is active, either:

    ...then the user agent must abort the fetching algorithm, discarding any pending tasks generated by that algorithm (and in particular, not adding any cues to the text track list of cues after the moment the URL changed), and then queue a task that first changes the text track readiness state to failed to load and then fires a simple event named error at the track element. This task must use the DOM manipulation task source.

  11. Wait until the text track readiness state is no longer set to loading.

  12. Wait until the track URL is no longer equal to URL, at the same time as the text track mode is set to hidden or showing.

  13. Jump to the step labeled top.

Whenever a track element has its src attribute set, changed, or removed, the user agent must synchronously empty the element's text track's text track list of cues. (This also causes the algorithm above to stop adding cues from the resource being obtained using the previously given URL, if any.)

4.7.14.12.4 Guidelines for exposing cues in various formats as text track cues

How a specific format's text track cues are to be interpreted for the purposes of processing by an HTML user agent is defined by that format [INBANDTRACKS]. In the absence of such a specification, this section provides some constraints within which implementations can attempt to consistently expose such formats.

To support the text track model of HTML, each unit of timed data is converted to a text track cue. Where the mapping of the format's features to the aspects of a text track cue as defined in this specification are not defined, implementations must ensure that the mapping is consistent with the definitions of the aspects of a text track cue as defined above, as well as with the following constraints:

The text track cue identifier

Should be set to the empty string if the format has no obvious analogue to a per-cue identifier.

The text track cue pause-on-exit flag

Should be set to false.

For media-resource-specific text tracks of kind metadata, text track cues are exposed using the DataCue object unless there is a more appropriate TextTrackCue interface available. For example, if the media-resource-specific text track format is WebVTT, then VTTCue is more appropriate.

4.7.14.12.5 テキストトラックAPI
interface TextTrackList : EventTarget {
  readonly attribute unsigned long length;
  getter TextTrack (unsigned long index);
  TextTrack? getTrackById(DOMString id);

           attribute EventHandler onchange;
           attribute EventHandler onaddtrack;
           attribute EventHandler onremovetrack;
};
media . textTracks . length

メディア要素(たとえばtrack要素から)に関連付けられたテキストトラックの数を返す。これは、メディア要素テキストトラックのリストテキストトラックの数である。

media . textTracks[ n ]

メディア要素テキストトラックのリストn番目のテキストトラックを表すTextTrackオブジェクトを返す。

textTrack = media . textTracks . getTrackById( id )

与えられた識別子とともにTextTrackオブジェクトを返す、または一切トラックがその識別子を持たない場合nullを返す。

track . track

track要素のテキストトラックを表すTextTrackオブジェクトを返す。

A TextTrackList object represents a dynamically updating list of text tracks in a given order.

The textTracks attribute of media elements must return a TextTrackList object representing the TextTrack objects of the text tracks in the media element's list of text tracks, in the same order as in the list of text tracks. The same object must be returned each time the attribute is accessed. [WEBIDL]

The length attribute of a TextTrackList object must return the number of text tracks in the list represented by the TextTrackList object.

The supported property indices of a TextTrackList object at any instant are the numbers from zero to the number of text tracks in the list represented by the TextTrackList object minus one, if any. If there are no text tracks in the list, there are no supported property indices.

To determine the value of an indexed property of a TextTrackList object for a given index index, the user agent must return the indexth text track in the list represented by the TextTrackList object.

The getTrackById(id) method must return the first TextTrack in the TextTrackList object whose id IDL attribute would return a value equal to the value of the id argument. When no tracks match the given argument, the method must return null.


enum TextTrackMode { "disabled",  "hidden",  "showing" };
enum TextTrackKind { "subtitles",  "captions",  "descriptions",  "chapters",  "metadata" };
interface TextTrack : EventTarget {
  readonly attribute TextTrackKind kind;
  readonly attribute DOMString label;
  readonly attribute DOMString language;

  readonly attribute DOMString id;
  readonly attribute DOMString inBandMetadataTrackDispatchType;

           attribute TextTrackMode mode;

  readonly attribute TextTrackCueList? cues;
  readonly attribute TextTrackCueList? activeCues;

  void addCue(TextTrackCue cue);
  void removeCue(TextTrackCue cue);

           attribute EventHandler oncuechange;
};
textTrack = media . addTextTrack( kind [, label [, language ] ] )

メディア要素テキストトラックのリストに追加された新しいTextTrackオブジェクトを作成して返す。

textTrack . kind

テキストトラックの種類の文字列を返す。

textTrack . label

存在する、または空の文字列(オブジェクトがユーザーに公開される場合、オブジェクトの他の属性からおそらく生成する必要があるカスタムラベルを示す)がある場合、テキストトラックのラベルを返す。

textTrack . language

テキストトラックの言語の文字列を返す。

textTrack . id

指定されたトラックのIDを返す。

帯域内トラックに対して、フォーマットがMedia Fragments URI構文をサポートし、getTrackById()メソッドとともに使用できる場合、これは、フラグメント識別子で使用できるIDである。[MEDIAFRAG]

track要素に対応するTextTrackオブジェクトに対して、これはtrack要素のIDである。

textTrack . inBandMetadataTrackDispatchType

テキストトラック帯域内のメタデータトラックディスパッチタイプの文字列を返す。

textTrack . mode [ = value ]

以下のリストから文字列によって表される、テキストトラックモードを返す:

"disabled"

テキストトラック無効モード。

"hidden"

テキストトラック非表示モード。

"showing"

テキストトラック表示モード。

モードを変更する設定が可能である。

textTrack . cues

TextTrackCueListオブジェクトとして、キューのテキストトラックリストを返す。

textTrack . activeCues

TextTrackCueListオブジェクトとして、現在アクティブであるキューのテキストトラックリストから、テキストトラックキューを返す(つまり、現在の再生位置の前に開始し、その後で終了する)。

textTrack . addCue( cue )

textTrackキューのテキストトラックリストに指定されたキューを追加する。

textTrack . removeCue( cue )

textTrackキューのテキストトラックリストから指定されたキューを削除する。

The addTextTrack(kind, label, language) method of media elements, when invoked, must run the following steps:

  1. Create a new TextTrack object.

  2. Create a new text track corresponding to the new object, and set its text track kind to kind, its text track label to label, its text track language to language, its text track readiness state to the text track loaded state, its text track mode to the text track hidden mode, and its text track list of cues to an empty list.

    Initially, the text track list of cues is not associated with any rules for updating the text track rendering. When a text track cue is added to it, the text track list of cues has its rules permanently set accordingly.

  3. Add the new text track to the media element's list of text tracks.

  4. Queue a task to fire a trusted event with the name addtrack, that does not bubble and is not cancelable, and that uses the TrackEvent interface, with the track attribute initialised to the new text track's TextTrack object, at the media element's textTracks attribute's TextTrackList object.

  5. Return the new TextTrack object.


The kind attribute must return the text track kind of the text track that the TextTrack object represents.

The label attribute must return the text track label of the text track that the TextTrack object represents.

The language attribute must return the text track language of the text track that the TextTrack object represents.

The id attribute returns the track's identifier, if it has one, or the empty string otherwise. For tracks that correspond to track elements, the track's identifier is the value of the element's id attribute, if any. For in-band tracks, the track's identifier is specified by the media resource. If the media resource is in a format that supports the Media Fragments URI fragment identifier syntax, the identifier returned for a particular track must be the same identifier that would enable the track if used as the name of a track in the track dimension of such a fragment identifier. [MEDIAFRAG]

The inBandMetadataTrackDispatchType attribute must return the text track in-band metadata track dispatch type of the text track that the TextTrack object represents.

The mode attribute, on getting, must return the string corresponding to the text track mode of the text track that the TextTrack object represents, as defined by the following list:

"disabled"
テキストトラック無効モード。
"hidden"
テキストトラック非表示モード。
"showing"
テキストトラック表示モード。

On setting, if the new value isn't equal to what the attribute would currently return, the new value must be processed as follows:

If the new value is "disabled"

Set the text track mode of the text track that the TextTrack object represents to the text track disabled mode.

If the new value is "hidden"

Set the text track mode of the text track that the TextTrack object represents to the text track hidden mode.

If the new value is "showing"

Set the text track mode of the text track that the TextTrack object represents to the text track showing mode.

If the text track mode of the text track that the TextTrack object represents is not the text track disabled mode, then the cues attribute must return a live TextTrackCueList object that represents the subset of the text track list of cues of the text track that the TextTrack object represents whose end times occur at or after the earliest possible position when the script started, in text track cue order. Otherwise, it must return null. When an object is returned, the same object must be returned each time.

The earliest possible position when the script started is whatever the earliest possible position was the last time the event loop reached step 1.

If the text track mode of the text track that the TextTrack object represents is not the text track disabled mode, then the activeCues attribute must return a live TextTrackCueList object that represents the subset of the text track list of cues of the text track that the TextTrack object represents whose active flag was set when the script started, in text track cue order. Otherwise, it must return null. When an object is returned, the same object must be returned each time.

A text track cue's active flag was set when the script started if its text track cue active flag was set the last time the event loop reached step 1.


The addCue(cue) method of TextTrack objects, when invoked, must run the following steps:

  1. If the text track list of cues does not yet have any associated rules for updating the text track rendering, then associate the text track list of cues with the rules for updating the text track rendering appropriate to cue.

  2. If text track list of cues' associated rules for updating the text track rendering are not the same rules for updating the text track rendering as appropriate for cue, then throw an InvalidStateError exception and abort these steps.

  3. If the given cue is in a text track list of cues, then remove cue from that text track list of cues.

  4. Add cue to the method's TextTrack object's text track's text track list of cues.

The removeCue(cue) method of TextTrack objects, when invoked, must run the following steps:

  1. If the given cue is not currently listed in the method's TextTrack object's text track's text track list of cues, then throw a NotFoundError exception and abort these steps.

  2. Remove cue from the method's TextTrack object's text track's text track list of cues.

この例において、audio要素は、多数のサウンドエフェクトを含むサウンドファイルから特定のサウンドエフェクトを再生するために使用される。キューは、たとえブラウザが一部のスクリプトを実行してビジーであっても、オーディオがクリップの最後で正確に終了するよう、オーディオを一時停止するために使用される。ページがオーディオを一時停止するスクリプトに依存し、ブラウザは指定された正確な時間にスクリプトを実行することができなかった場合、次のクリップの出だしを聞いているかもしれない。

var sfx = new Audio('sfx.wav');
var sounds = sfx.addTextTrack('metadata');

// add sounds we care about
function addFX(start, end, name) {
  var cue = new VTTCue(start, end, '');
  cue.id = name;
  cue.pauseOnExit = true;
  sounds.addCue(cue);
}
addFX(12.783, 13.612, 'dog bark');
addFX(13.612, 15.091, 'kitten mew'))

function playSound(id) {
  sfx.currentTime = sounds.getCueById(id).startTime;
  sfx.play();
}

// play a bark as soon as we can
sfx.oncanplaythrough = function () {
  playSound('dog bark');
}
// meow when the user tries to leave
window.onbeforeunload = function () {
  playSound('kitten mew');
  return 'Are you sure you want to leave this awesome page?';
}

interface TextTrackCueList {
  readonly attribute unsigned long length;
  getter TextTrackCue (unsigned long index);
  TextTrackCue? getCueById(DOMString id);
};
cuelist . length

リスト内のキューの数を返す。

cuelist[index]

リスト内のインデックスindexを持つテキストトラックキューを返す。キューは、テキストトラックキュー順にソートされる。

cuelist . getCueById( id )

テキストトラックキュー識別子idを持つ(テキストトラックキュー順で)最初のテキストトラックキューを返す。

いずれのキューも指定された識別子を持たない場合、または引数が空の文字列である場合、nullを返す。

A TextTrackCueList object represents a dynamically updating list of text track cues in a given order.

The length attribute must return the number of cues in the list represented by the TextTrackCueList object.

The supported property indices of a TextTrackCueList object at any instant are the numbers from zero to the number of cues in the list represented by the TextTrackCueList object minus one, if any. If there are no cues in the list, there are no supported property indices.

To determine the value of an indexed property for a given index index, the user agent must return the indexth text track cue in the list represented by the TextTrackCueList object.

The getCueById(id) method, when called with an argument other than the empty string, must return the first text track cue in the list represented by the TextTrackCueList object whose text track cue identifier is id, if any, or null otherwise. If the argument is the empty string, then the method must return null.


interface TextTrackCue : EventTarget {
  readonly attribute TextTrack? track;

           attribute DOMString id;
           attribute double startTime;
           attribute double endTime;
           attribute boolean pauseOnExit;

           attribute EventHandler onenter;
           attribute EventHandler onexit;
};
cue . track

存在する場合、このテキストトラックキューが属するTextTrackオブジェクトを返し、そうでなければnullを返す。

cue . id [ = value ]

テキストトラックキュー識別子を返す。

設定可能である。

cue . startTime [ = value ]

秒単位で、テキストトラックキューの開始時刻を返す。

設定可能である。

cue . endTime [ = value ]

秒単位で、テキストトラックキューの終了時刻を返す。

設定可能である。

cue . pauseOnExit [ = value ]

テキスト·トラック·キューpause-on-exitフラグが設定される場合trueを返し、そうでなければfalseを返す。

設定可能である。

The track attribute, on getting, must return the TextTrack object of the text track in whose list of cues the text track cue that the TextTrackCue object represents finds itself, if any; or null otherwise.

The id attribute, on getting, must return the text track cue identifier of the text track cue that the TextTrackCue object represents. On setting, the text track cue identifier must be set to the new value.

The startTime attribute, on getting, must return the text track cue start time of the text track cue that the TextTrackCue object represents, in seconds. On setting, the text track cue start time must be set to the new value, interpreted in seconds; then, if the TextTrackCue object's text track cue is in a text track's list of cues, and that text track is in a media element's list of text tracks, and the media element's show poster flag is not set, then run the time marches on steps for that media element.

The endTime attribute, on getting, must return the text track cue end time of the text track cue that the TextTrackCue object represents, in seconds. On setting, the text track cue end time must be set to the new value, interpreted in seconds; then, if the TextTrackCue object's text track cue is in a text track's list of cues, and that text track is in a media element's list of text tracks, and the media element's show poster flag is not set, then run the time marches on steps for that media element.

The pauseOnExit attribute, on getting, must return true if the text track cue pause-on-exit flag of the text track cue that the TextTrackCue object represents is set; or false otherwise. On setting, the text track cue pause-on-exit flag must be set if the new value is true, and must be unset otherwise.

4.7.14.12.6 Text tracks exposing in-band metadata

メディアリソースは、1つ以上のブラウザがレンダリングしないデータを含むメディアリソース固有のテキストトラックを含むことが多いが、対処できるようにするスクリプトに公開する。

ブラウザがメディアリソース固有のテキストトラックのキューでデータを公開することがより適切であるTextTrackCueインターフェースを識別することができない場合、DataCueオブジェクトが使用される。[INBANDTRACKS]

[Constructor(double startTime, double endTime, ArrayBuffer data)]
   interface DataCue : TextTrackCue {
               attribute ArrayBuffer data;
};
cue = new DataCue( [ startTime, endTime, data ] )

addCue()メソッドとともに使用するために、新しいDataCueオブジェクトを返す。

startTime引数はテキストトラックキューの開始時刻を設定する。

endTime引数は、テキストトラックキューの終了時刻を設定する。

The data argument is copied as the text track cue data.

cue . data [ = value ]

生の未解析フォームでテキストトラックキューのデータを返す。

設定可能である。

The data attribute, on getting, must return the raw text track cue data of the text track cue that the TextTrackCue object represents. On setting, the text track cue data must be set to the new value.

ユーザーエージェントは、メタデータテキストトラックの種類を持つテキストトラックに所属するテキストトラックキューオブジェクトのみを公開するDataCueを使用するだろう。

一般的なメタデータがテキストトラックのために管理する必要がある場合、DataCueは、スクリプトにDataCueオブジェクトを作成できるようにするコンストラクタを持つ。

DataCueテキストトラックレンダリングを更新するための規則は、キューが表示モードでありかつ、テキストトラックの種類subtitlescaptionsdescriptionsまたはchaptersのいずれかであっても、単にレンダリングが存在しないと述べる。

4.7.14.12.7 章を記述するテキストトラック

章は、指定されたタイトルをもつメディアリソースの区分である。文書アウトラインのセクションでサブセクションを持つことができるのと同じように、章は入れ子にできる。

章を記述するために使用されているテキストトラック内の各テキストトラックキューは、章の開始時刻を与えるテキストトラックキューの開始時刻、章の終了時刻を与えるテキストトラックキューの終了時刻、および章のタイトルを与えるテキストトラックキューのテキストの3つの主要な機能を持つ。

The rules for constructing the chapter tree from a text track are as follows. They produce a potentially nested list of chapters, each of which have a start time, end time, title, and a list of nested chapters. This algorithm discards cues that do not correctly nest within each other, or that are out of order.

  1. Let list be a copy of the list of cues of the text track being processed.

  2. Remove from list any text track cue whose text track cue end time is before its text track cue start time.

  3. Let output be an empty list of chapters, where a chapter is a record consisting of a start time, an end time, a title, and a (potentially empty) list of nested chapters. For the purpose of this algorithm, each chapter also has a parent chapter.

  4. Let current chapter be a stand-in chapter whose start time is negative infinity, whose end time is positive infinity, and whose list of nested chapters is output. (This is just used to make the algorithm easier to describe.)

  5. Loop: If list is empty, jump to the step labeled end.

  6. Let current cue be the first cue in list, and then remove it from list.

  7. If current cue's text track cue start time is less than the start time of current chapter, then return to the step labeled loop.

  8. While current cue's text track cue start time is greater than or equal to current chapter's end time, let current chapter be current chapter's parent chapter.

  9. If current cue's text track cue end time is greater than the end time of current chapter, then return to the step labeled loop.

  10. Create a new chapter new chapter, whose start time is current cue's text track cue start time, whose end time is current cue's text track cue end time, whose title is current cue's text track cue data interpreted according to its rules for rendering the cue in isolation, and whose list of nested chapters is empty.

    For WebVTT, the rules for rendering the cue in isolation are the rules for interpreting WebVTT cue text. [WEBVTT]

  11. Append new chapter to current chapter's list of nested chapters, and let current chapter be new chapter's parent.

  12. Let current chapter be new chapter.

  13. Return to the step labeled loop.

  14. End: Return output.

WebVTTファイルの以下の断片は、ネストされた章をマークアップする様子を示す。ファイルは、3つの50分の章、"Astrophysics"、"Computational Physics"、および"General Relativity"を記述する。1つ目は3つのサブチャプターを持ち、2つ目は4つ、3つ目は2つのサブチャプターを持つ。[WEBVTT]

WEBVTT

00:00:00.000 --> 00:50:00.000
Astrophysics

00:00:00.000 --> 00:10:00.000
Introduction to Astrophysics

00:10:00.000 --> 00:45:00.000
The Solar System

00:00:00.000 --> 00:10:00.000
Coursework Description

00:50:00.000 --> 01:40:00.000
Computational Physics

00:50:00.000 --> 00:55:00.000
Introduction to Programming

00:55:00.000 --> 01:30:00.000
Data Structures

01:30:00.000 --> 01:35:00.000
Answers to Last Exam

01:35:00.000 --> 01:40:00.000
Coursework Description

01:40:00.000 --> 02:30:00.000
General Relativity

01:40:00.000 --> 02:00:00.000
Tensor Algebra

02:00:00.000 --> 02:30:00.000
The General Relativistic Field Equations
4.7.14.12.8 Event handlers for objects of the text track APIs

The following are the event handlers that (and their corresponding event handler event types) must be supported, as event handler IDL attributes, by all objects implementing the TextTrackList interface:

イベントハンドラ イベントハンドライベント型
onchange change
onaddtrack addtrack
onremovetrack removetrack

The following are the event handlers that (and their corresponding event handler event types) must be supported, as event handler IDL attributes, by all objects implementing the TextTrack interface:

イベントハンドラ イベントハンドライベント型
oncuechange cuechange

The following are the event handlers that (and their corresponding event handler event types) must be supported, as event handler IDL attributes, by all objects implementing the TextTrackCue interface:

イベントハンドラ イベントハンドライベント型
onenter enter
onexit exit
4.7.14.12.9 Best practices for metadata text tracks

この節は非規範的である。

テキストトラックは、対話型または拡張されたビューに対して、メディアデータに関連するデータを格納するために使用することができる。

たとえば、スポーツ中継を表示するページは、現在のスコアに関する情報を含むだろう。ロボット工学のコンテストがライブストリーミングされていたとする。次のように、画像にスコアを重ねることができる:

ユーザーがビデオ内の任意のポイントをシークするたびに、スコア表示を正しく描画させるために、メタデータテキストトラックキューは、スコアに適切であるようにする必要がある。たとえば、上のフレームにおいて、試合数を与える試合の長さに続く1つのキュー、青の同盟のスコアが変化するまで続く1つのキュー、そして赤の同盟のスコアが変化するまで続く1つのキューがおそらくあるだろう。ビデオがちょうどライブイベントのストリームである場合、右下における時間は、キューに基づくよりもむしろ、おそらく自動的に現在のビデオの時間から派生になる。しかし、ビデオが単なるハイライトだった場合、それはまたキューに記載されるかもしれない。

次は、このようなものの断片がWebVTTファイル内のようになるものを示す:

WEBVTT

...

05:10:00.000 --> 05:12:15.000
matchtype:qual
matchnumber:37

...

05:11:02.251 --> 05:11:17.198
red:78

05:11:03.672 --> 05:11:54.198
blue:66

05:11:17.198 --> 05:11:25.912
red:80

05:11:25.912 --> 05:11:26.522
red:83

05:11:26.522 --> 05:11:26.982
red:86

05:11:26.982 --> 05:11:27.499
red:89

...

ここで重要なことは、該当するイベントが適用する時間の長さに及ぶキューに情報が与えられることに注目することである。代わりに、スコアが変化する際に、スコアがゼロ長さ(または非常に短い、ほぼゼロ長さ)のキューとして指定された場合、 たとえば05:11:17.198で"red+2"、05:11:25.912で"red+3"などと言ったときに、問題は発生する。主に、スクリプトが一切の通知を見逃されていないことを確認するためにキューのリスト全体を渡り歩く必要があるため、シークは実装がはるかに困難である。キューが短い場合、スクリプトが明確にキューをリッスンしない限り、スクリプトはキューがアクティブであることを見ることはない。

この方法でキューを使用する場合、著者は、現在の注釈を更新するためにcuechangeイベントを使用することを勧める。(具体的には、それはキューが変更されていない場合でも、仕事をすることを必要とするようにtimeupdateイベントを使用することがあまり適切でなく、そしてより重要なことは、timeupdateイベントがレート制限されているため、メタデータキューがアクティブになる場合、かつ表示が更新される場合、間のより高いレイテンシーを導入する。)

4.7.14.13 ユーザーインターフェース

controls属性は真偽属性である。存在する場合、著者がスクリプト化されたコントローラを提供しておらず、ユーザーエージェントに独自のコントロールセットを提供したいと考えていることを示す。

If the attribute is present, or if scripting is disabled for the media element, then the user agent should expose a user interface to the user. This user interface should include features to begin playback, pause playback, seek to an arbitrary position in the content (if the content supports arbitrary seeking), change the volume, change the display of closed captions or embedded sign-language tracks, select different audio tracks or turn on audio descriptions, and show the media content in manners more suitable to the user (e.g. full-screen video or in an independent resizable window). Other controls may also be made available.

If the media element has a current media controller, then the user agent should expose audio tracks from all the slaved media elements (although avoiding duplicates if the same media resource is being used several times). If a media resource's audio track exposed in this way has no known name, and it is the only audio track for a particular media element, the user agent should use the element's title attribute, if any, as the name (or as part of the name) of that track.

Even when the attribute is absent, however, user agents may provide controls to affect playback of the media resource (e.g. play, pause, seeking, and volume controls), but such features should not interfere with the page's normal rendering. For example, such features could be exposed in the media element's context menu. The user agent may implement this simply by exposing a user interface to the user as described above (as if the controls attribute was present).

If the user agent exposes a user interface to the user by displaying controls over the media element, then the user agent should suppress any user interaction events while the user agent is interacting with this interface. (For example, if the user clicks on a video's playback control, mousedown events and so forth would not simultaneously be fired at elements on the page.)

Where possible (specifically, for starting, stopping, pausing, and unpausing playback, for seeking, for changing the rate of playback, for fast-forwarding or rewinding, for listing, enabling, and disabling text tracks, and for muting or changing the volume of the audio), user interface features exposed by the user agent must be implemented in terms of the DOM API described above, so that, e.g., all the same events fire.

When a media element has a current media controller, the user agent's user interface for pausing and unpausing playback, for seeking, for changing the rate of playback, for fast-forwarding or rewinding, and for muting or changing the volume of audio of the entire group must be implemented in terms of the MediaController API exposed on that current media controller. When a media element has a current media controller, and all the slaved media elements of that MediaController are paused, the user agent should also unpause all the slaved media elements when the user invokes a user agent interface control for beginning playback.

The "play" function in the user agent's interface must set the playbackRate attribute to the value of the defaultPlaybackRate attribute before invoking the play() method. When a media element has a current media controller, the attributes and method with those names on that MediaController object must be used. Otherwise, the attributes and method with those names on the media element itself must be used.

Features such as fast-forward or rewind must be implemented by only changing the playbackRate attribute (and not the defaultPlaybackRate attribute). Again, when a media element has a current media controller, the attributes with those names on that MediaController object must be used; otherwise, the attributes with those names on the media element itself must be used.

When a media element has a current media controller, seeking must be implemented in terms of the currentTime attribute on that MediaController object. Otherwise, the user agent must directly seek to the requested position in the media element's media timeline. For media resources where seeking to an arbitrary position would be slow, user agents are encouraged to use the approximate-for-speed flag when seeking in response to the user manipulating an approximate position interface such as a seek bar.

When a media element has a current media controller, user agents may additionally provide the user with controls that directly manipulate an individual media element without affecting the MediaController, but such features are considered relatively advanced and unlikely to be useful to most users.

The activation behavior of a media element that is exposing a user interface to the user must be to run the following steps:

  1. If the media element has a current media controller, and that current media controller is a restrained media controller, then invoke the play() method of the MediaController.

  2. Otherwise, if the media element has a current media controller, and that current media controller is a paused media controller, then invoke the unpause() method of the MediaController.

  3. Otherwise, if the media element has a current media controller, then that current media controller is a playing media controller; invoke the pause() method of the MediaController.

  4. Otherwise, the media element has no current media controller; if the media element's paused attribute is true, then invoke the play() method on the media element.

  5. Otherwise, the media element has no current media controller, and the media element's paused attribute is false; invoke the pause() method on the media element.

For the purposes of listing chapters in the media resource, only text tracks in the media element's list of text tracks that are showing and whose text track kind is chapters should be used. Such tracks must be interpreted according to the rules for constructing the chapter tree from a text track. When seeking in response to a user maniplating a chapter selection interface, user agents should not use the approximate-for-speed flag.

The controls IDL attribute must reflect the content attribute of the same name.


media . volume [ = value ]

0.0から1.0までの範囲の数字として、現在の再生音量を返す。ここで0.0は最小音量で1.0は最大音量である。

音量を変更する設定が可能である。

新しい値が範囲0.0から1.0に含まれない場合、IndexSizeErrorを投げる。

media . muted [ = value ]

volume属性を上書きし、音声がミュートである場合trueを返し、volume属性が無視される場合、falseを返す。

オーディオがミュートであるかどうかを変更する設定が可能である。

A media element has a playback volume, which is a fraction in the range 0.0 (silent) to 1.0 (loudest). Initially, the volume should be 1.0, but user agents may remember the last set value across sessions, on a per-site basis or otherwise, so the volume may start at other values.

The volume IDL attribute must return the playback volume of any audio portions of the media element. On setting, if the new value is in the range 0.0 to 1.0 inclusive, the media element's playback volume must be set to the new value. If the new value is outside the range 0.0 to 1.0 inclusive, then, on setting, an IndexSizeError exception must be thrown instead.

A media element can also be muted. If anything is muting the element, then it is muted. (For example, when the direction of playback is backwards, the element is muted.)

The muted IDL attribute must return the value to which it was last set. When a media element is created, if the element has a muted content attribute specified, then the muted IDL attribute should be set to true; otherwise, the user agents may set the value to the user's preferred value (e.g. remembering the last set value across sessions, on a per-site basis or otherwise). While the muted IDL attribute is set to true, the media element must be muted.

Whenever either of the values that would be returned by the volume and muted IDL attributes change, the user agent must queue a task to fire a simple event named volumechange at the media element.

An element's effective media volume is determined as follows:

  1. If the user has indicated that the user agent is to override the volume of the element, then the element's effective media volume is the volume desired by the user. Abort these steps.

  2. If the element's audio output is muted, the element's effective media volume is zero. Abort these steps.

  3. If the element has a current media controller and that MediaController object's media controller mute override is true, the element's effective media volume is zero. Abort these steps.

  4. Let volume be the playback volume of the audio portions of the media element, in range 0.0 (silent) to 1.0 (loudest).

  5. If the element has a current media controller, multiply volume by that MediaController object's media controller volume multiplier. (The media controller volume multiplier is in the range 0.0 to 1.0, so this can only reduce the value.)

  6. The element's effective media volume is volume, interpreted relative to the range 0.0 to 1.0, with 0.0 being silent, and 1.0 being the loudest setting, values in between increasing in loudness. The range need not be linear. The loudest setting may be lower than the system's loudest possible setting; for example the user could have set a maximum volume.

メディア要素muted属性は、潜在的にユーザー設定を上書きし、メディアリソースに属するオーディオ出力のデフォルトの状態を制御する真偽属性である。

The defaultMuted IDL attribute must reflect the muted content attribute.

この属性は動的効果(要素のデフォルトの状態のみを制御する)を持たない。

このビデオ(広告)は自動再生するが、ユーザーを悩ますのを避けるために音なしで再生して、ユーザーが音声をオンにできるようにする。

<video src="adverts.cgi?kind=video" controls autoplay loop muted></video>
4.7.14.14 時間範囲

TimeRangesインターフェースを実装したオブジェクトは、時間の範囲(期間)のリストを表す。

interface TimeRanges {
  readonly attribute unsigned long length;
  double start(unsigned long index);
  double end(unsigned long index);
};
media . length

オブジェクト内の範囲の数を返す。

time = media . start(index)

指定されたインデックスをもつ範囲の開始時刻を返す。

インデックスが範囲外の場合IndexSizeErrorを投げる。

time = media . end(index)

指定されたインデックスをもつ範囲の終了時刻を返す。

インデックスが範囲外の場合IndexSizeErrorを投げる。

The length IDL attribute must return the number of ranges represented by the object.

The start(index) method must return the position of the start of the indexth range represented by the object, in seconds measured from the start of the timeline that the object covers.

The end(index) method must return the position of the end of the indexth range represented by the object, in seconds measured from the start of the timeline that the object covers.

These methods must throw IndexSizeError exceptions if called with an index argument greater than or equal to the number of ranges represented by the object.

When a TimeRanges object is said to be a normalised TimeRanges object, the ranges it represents must obey the following criteria:

In other words, the ranges in such an object are ordered, don't overlap, aren't empty, and don't touch (adjacent ranges are folded into one bigger range).

Ranges in a TimeRanges object must be inclusive.

Thus, the end of a range would be equal to the start of a following adjacent (touching but not overlapping) range. Similarly, a range covering a whole timeline anchored at zero would have a start equal to zero and an end equal to the duration of the timeline.

The timelines used by the objects returned by the buffered, seekable and played IDL attributes of media elements must be that element's media timeline.

4.7.14.15 TrackEventインタフェース
[Constructor(DOMString type, optional TrackEventInit eventInitDict)]
interface TrackEvent : Event {
  readonly attribute (VideoTrack or AudioTrack or TextTrack) track;
};

dictionary TrackEventInit : EventInit {
  (VideoTrack or AudioTrack or TextTrack) track;
};
event . track

イベントが関連するトラックオブジェクト(TextTrackAudioTrack、またはVideoTrack)を返す。

The track attribute must return the value it was initialised to. オブジェクトが作成される際、この属性はnullに初期化しなければならない。It represents the context information for the event.

4.7.14.16 Event summary

この節は非規範的である。

上記の処理モデルの一部として、メディア要素で以下のイベントが発火する:

イベント名 インターフェース 発火条件 Preconditions
loadstart Event ユーザーエージェントは、リソース選択アルゴリズムの一部として、メディアデータを探し始める。 networkStateNETWORK_LOADINGと等しい
progress Event ユーザーエージェントは、メディアデータをフェッチしている。 networkStateNETWORK_LOADINGと等しい
suspend Event ユーザーエージェントは、意図的に現在のメディアデータをフェッチしていない。 networkStateNETWORK_IDLEと等しい
abort Event ユーザーエージェントは、完全にダウンロードされる前にメディアデータのフェッチを停止するが、エラーによるものではない。 errorは、コードMEDIA_ERR_ABORTEDをもつオブジェクトである。 networkStateは、ダウンロードが中止された時期に応じて、NETWORK_EMPTYまたはNETWORK_IDLEのいずれかに等しい。
error Event メディアデータのフェッチ中にエラーが発生する。 errorは、コードMEDIA_ERR_NETWORK以上をもつオブジェクトである。 networkStateは、ダウンロードが中止された時期に応じて、NETWORK_EMPTYまたはNETWORK_IDLEのいずれかに等しい。
emptied Event 以前NETWORK_EMPTY状態でなかったnetworkStateであるメディア要素が、その状態にちょうど切り替わった(ロード中に致命的なエラーが発生したため、リソース選択アルゴリズムがすでに実行している間にload()メソッドが呼び出されたためのいずれか)。 networkStateNETWORK_EMPTYであり、すべてのIDL属性は、初期状態である。
stalled Event ユーザーエージェントは、メディアデータをフェッチしようとしているが、データが突発的に用意されない。 networkStateNETWORK_LOADINGである。
loadedmetadata Event ユーザーエージェントは、ちょうどメディアリソーステキストトラックの準備の期間と寸法を決定した。 readyStateは初期時間に対して新たにHAVE_METADATAに等しいかそれ以上である。
loadeddata Event ユーザーエージェントは、初期時間に対して現在の再生位置メディアデータをレンダリングできる。 readyStateは、初期時間に対して新たにHAVE_CURRENT_DATA以上に増加した。
canplay Event ユーザーエージェントは、メディアデータの再生を再開できるが、再生を今すぐ開始されることになったかどうかを推定し、メディアリソースは、コンテンツの追加のバッファリングに対して停止させることなく、終わりに現在の再生レートでレンダリングできなかった。 readyStateは、新たにHAVE_FUTURE_DATA以上に増加した。
canplaythrough Event ユーザーエージェントは、再生が今すぐ開始されることになったかどうかを推定し、メディアリソースは追加のバッファリングに対して停止することなく、現在の再生レートの最後までのすべての方法でレンダリングできる。 readyStateは最近のHAVE_ENOUGH_DATAに等しい。
playing Event 再生は、メディアデータの不足のために、一時停止または遅延された後に開始する準備ができている。 readyStateが新たに等しいまたはHAVE_FUTURE_DATAを超えており、pausedはfalseであり、またはpausedが新たにfalseであり、readyStateが等しいか、またはHAVE_FUTURE_DATAより大きい。たとえこのイベントが発火しても、 要素は依然として潜在的に再生されていないかもしれない。たとえば、要素がメディアコントローラ上でブロックされる場合(たとえば、現在のメディアコントローラが一時停止するか、または別の従属メディア要素が何らかの形でストールしているため、またはメディアリソースメディアコントローラの位置に対応するデータがないため)、または要素がユーザーとの対話のために一時停止または帯域内コンテンツのために一時停止である。
waiting Event 次のフレームが利用できないため、再生が停止したが、ユーザーエージェントは、そのフレームがやがて利用できるようになると予想する。 readyStateが等しいか、またはHAVE_CURRENT_DATA未満であり、pausedはfalseである。seekingはtrueである、または現在の再生位置buffered内の領域のいずれかに含まれていないかのいずれか。再生がpausedがfalseでなしにその他の理由で停止することは可能であるが、それらの理由はこのイベントは発火しない(そしてそのような状況が解決するときに、別々のplayingイベントがどちらか発火しない):たとえば、要素が新たにそのメディアコントローラ上でブロックされる、再生が終了する、または再生がエラーにより停止され、または要素がユーザーとの対話のために一時停止または帯域内コンテンツのために一時停止している。
seeking Event seekingIDL属性がtrueに変更され、かつユーザーエージェントが新しい位置を探し始めている。
seeked Event current playback positionが変更された後に、seekingIDL属性がfalseに変更された。
ended Event メディアリソースの終わりに達したため、再生が停止した。 currentTimeは、メディアリソースの最後に等しく、endedはtrueである。
durationchange Event duration属性はちょうど更新された。
timeupdate Event 現在の再生位置が、通常の再生の一部として、または、たとえば不連続的に、特に興味深い方法で変更された。
play Event 要素はもはや一時停止でない。play()メソッドが返された後、またはautoplay属性を開始する再生を起こす際に発火した。 pausedは、新たにfalseである。
pause Event 要素が一時停止された。pause()メソッドが返された後に発火した。 pausedは、新たにtrueである。
ratechange Event defaultPlaybackRateまたは playbackRate属性が更新されたばかりのいずれか。
resize Event videoWidthvideoWidth属性のいずれかまたは両方がちょうど更新されている。 メディア要素video要素である。readyStateHAVE_NOTHINGでない。
volumechange Event volume属性またはmuted属性のいずれかが変更された。関連する属性のセッターが返された後に発火した。

MediaControllerオブジェクトで次のイベントが発火する:

イベント名 インターフェース 発火条件
emptied Event すべての従属メディア要素は、新たにHAVE_NOTHING以上に設定したreadyStateをもつか、または従属メディア要素がもはや存在しない。
loadedmetadata Event すべての従属メディア要素readyStateが新たHAVE_METADATA以上に設定される。
loadeddata Event すべての従属メディア要素readyStateが新たHAVE_CURRENT_DATA以上に設定される。
canplay Event すべての従属メディア要素readyStateが新たHAVE_FUTURE_DATA以上に設定される。
canplaythrough Event すべての従属メディア要素readyStateが新たHAVE_ENOUGH_DATA以上に設定される。
playing Event MediaControllerは、もはやブロックメディアコントローラではない。
waiting Event MediaControllerは現在、ブロックされたメディアコントローラである。
ended Event すべての従属メディア要素は、新たに再生を終了している。MediaControllerは、すべての従属メディア要素の終わりに達した。
durationchange Event duration属性はちょうど更新された。
timeupdate Event メディアコントローラの位置が変更された。
play Event paused属性が新たにfalseである。
pause Event paused属性が新たにtrueである。
ratechange Event defaultPlaybackRate属性またはplaybackRate属性がちょうど更新されたかのいずれか。
volumechange Event volume属性またはmuted属性がちょうど更新されたかのいずれか。

AudioTrackListVideoTrackList、およびTextTrackList オブジェクトで次のイベントが発火する:

イベント名 インターフェース 発火条件
change Event トラックリストの1つ以上のトラックが有効か無効である。
addtrack TrackEvent トラックはトラックリストに加えられている。
removetrack TrackEvent トラックはトラックリストから削除されている。

以下のイベントは、TextTrackオブジェクトおよびtrack要素で発火する:

イベント名 インターフェース 発火条件
cuechange Event トラック内の1つ以上のキューがアクティブになるか、アクティブで停止している。

以下のイベントは、TextTrackCueオブジェクトで発火する:

イベント名 インターフェース 発火条件
enter Event キューはアクティブになっている。
exit Event キューはアクティブになるのを停止している。
4.7.14.17 Security and privacy considerations

The main security and privacy implications of the video and audio elements come from the ability to embed media cross-origin. There are two directions that threats can flow: from hostile content to a victim page, and from a hostile page to victim content.


If a victim page embeds hostile content, the threat is that the content might contain scripted code that attempts to interact with the Document that embeds the content. To avoid this, user agents must ensure that there is no access from the content to the embedding page. In the case of media content that uses DOM concepts, the embedded content must be treated as if it was in its own unrelated top-level browsing context.

For instance, if an SVG animation was embedded in a video element, the user agent would not give it access to the DOM of the outer page. From the perspective of scripts in the SVG resource, the SVG file would appear to be in a lone top-level browsing context with no parent.


If a hostile page embeds victim content, the threat is that the embedding page could obtain information from the content that it would not otherwise have access to. The API does expose some information: the existence of the media, its type, its duration, its size, and the performance characteristics of its host. Such information is already potentially problematic, but in practice the same information can more or less be obtained using the img element, and so it has been deemed acceptable.

However, significantly more sensitive information could be obtained if the user agent further exposes metadata within the content such as subtitles or chapter titles. Such information is therefore only exposed if the video resource passes a CORS resource sharing check. The crossorigin attribute allows authors to control how this check is performed. [FETCH]

Without this restriction, an attacker could trick a user running within a corporate network into visiting a site that attempts to load a video from a previously leaked location on the corporation's intranet. If such a video included confidential plans for a new product, then being able to read the subtitles would present a serious confidentiality breach.

4.7.14.18 Best practices for authors using media elements

この節は非規範的である。

セットトップボックスや携帯電話などの小型機器上でオーディオおよびビデオを再生するリソースは多くの場合、限られたデバイスのハードウェアリソースによって制限される。たとえば、デバイスは3つの一斉ビデオのみをサポートするかもしれない。このような理由から、要素への参照をすべて削除することに関して非常に慎重であり、かつガーベジコレクションすることによって、または要素のsrc属性と任意のsource要素の子孫を削除してから、要素のload()メソッドを呼び出ことによってのいずれかで、それらが再生し終わった際、メディア要素が保持するリソースを解放することを推奨する。

同様に、再生速度が正確に1.0でない場合、ハードウェア、ソフトウェア、またはフォーマットの制限はビデオフレームに欠落や、オーディオに音途切れや無音をもたらすかもしれない。

4.7.14.19 Best practices for implementors of media elements

この節は非規範的である。

How accurately various aspects of the media element API are implemented is considered a quality-of-implementation issue.

For example, when implementing the buffered attribute, how precise an implementation reports the ranges that have been buffered depends on how carefully the user agent inspects the data. Since the API reports ranges as times, but the data is obtained in byte streams, a user agent receiving a variable-bit-rate stream might only be able to determine precise times by actually decoding all of the data. User agents aren't required to do this, however; they can instead return estimates (e.g. based on the average bit rate seen so far) which get revised as more information becomes available.

As a general rule, user agents are urged to be conservative rather than optimistic. For example, it would be bad to report that everything had been buffered when it had not.

Another quality-of-implementation issue would be playing a video backwards when the codec is designed only for forward playback (e.g. there aren't many key frames, and they are far apart, and the intervening frames only have deltas from the previous frame). User agents could do a poor job, e.g. only showing key frames; however, better implementations would do more work and thus do a better job, e.g. actually decoding parts of the video forwards, storing the complete frames, and then playing the frames backwards.

Similarly, while implementations are allowed to drop buffered data at any time (there is no requirement that a user agent keep all the media data obtained for the lifetime of the media element), it is again a quality of implementation issue: user agents with sufficient resources to keep all the data around are encouraged to do so, as this allows for a better user experience. For example, if the user is watching a live stream, a user agent could allow the user only to view the live video; however, a better user agent would buffer everything and allow the user to seek through the earlier material, pause it, play it forwards and backwards, etc.

When multiple tracks are synchronised with a MediaController, it is possible for scripts to add and remove media elements from the MediaController's list of slaved media elements, even while these tracks are playing. How smoothly the media plays back in such situations is another quality-of-implementation issue.


When a media element that is paused is removed from a document and not reinserted before the next time the event loop reaches step 1, implementations that are resource constrained are encouraged to take that opportunity to release all hardware resources (like video planes, networking resources, and data buffers) used by the media element. (User agents still have to keep track of the playback position and so forth, though, in case playback is later restarted.)

4.7.15 map要素

カテゴリ
フローコンテンツ
フレージングコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
透過的
コンテンツ属性
グローバル属性
name - usemap属性から参照するイメージマップ
text/htmlにおけるタグ省略
どちらのタグも省略不可
許可されるARIAロール属性値:
なし
許可されるARIAステートおよびプロパティー
グローバルaria-* 属性
DOMインターフェース
interface HTMLMapElement : HTMLElement {
           attribute DOMString name;
  readonly attribute HTMLCollection areas;
  readonly attribute HTMLCollection images;
};

map要素は、img要素および任意のarea要素の子孫と連動して、イメージマップを定義する。要素は、その子を表す

name属性は、マップを参照できるようマップに名前を与える。属性は存在しなければならず、空白文字なしで非空白の値を持たなければならない。name属性の値は、同じ文書で別のmap要素のname属性値とマッチする互換性大文字・小文字不区別であってはならない。id属性がまた指定される場合、両方の属性が同じ値を持たなければならない。

map . areas

maparea要素のHTMLCollectionを返す。

map . images

mapを使用するimgおよびobject要素のHTMLCollectionを返す。

The areas attribute must return an HTMLCollection rooted at the map element, whose filter matches only area elements.

The images attribute must return an HTMLCollection rooted at the Document node, whose filter matches only img and object elements that are associated with this map element according to the image map processing model.

The IDL attribute name must reflect the content attribute of the same name.

イメージマップは、メンテナンスを容易にするために、ページ上の他のコンテンツと組み合わせて定義できる。この例は、ページの上部に、イメージマップと下部のテキストリンクの対応するセットを使用したページである。

<!DOCTYPE HTML>
<TITLE>Babies™: Toys</TITLE>
<HEADER>
 <H1>Toys</H1>
 <IMG SRC="/images/menu.gif"
      ALT="Babies™ navigation menu. Select a department to go to its page."
      USEMAP="#NAV">
</HEADER>
 ...
<FOOTER>
 <MAP NAME="NAV">
  <P>
   <A HREF="/clothes/">Clothes</A>
   <AREA ALT="Clothes" COORDS="0,0,100,50" HREF="/clothes/"> |
   <A HREF="/toys/">Toys</A>
   <AREA ALT="Toys" COORDS="100,0,200,50" HREF="/toys/"> |
   <A HREF="/food/">Food</A>
   <AREA ALT="Food" COORDS="200,0,300,50" HREF="/food/"> |
   <A HREF="/books/">Books</A>
   <AREA ALT="Books" COORDS="300,0,400,50" HREF="/books/">
 </MAP>
</FOOTER>

4.7.16 area要素

カテゴリ
フローコンテンツ
フレージングコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所、ただし先祖map要素または先祖template要素が存在する場合のみを除く。
コンテンツモデル
空。
コンテンツ属性
グローバル属性
alt - 画像が利用不可の際使用する置換テキスト
coords - イメージマップ内に作成する図形の座標
download - リソースをナビゲートする代わりにダウンロードし、その場合リソースのファイル名にするかどうか
hrefハイパーリンクのアドレス
hreflang — リンクされたリソースの言語
rel — ハイパーリンクと宛先のリソースを含む文書の関係
shape - イメージマップ内に作成する図形の種類
target -ハイパーリンクナビゲーションに対するブラウジングコンテキスト
type — 参照されるリソースタイプのヒント
text/htmlにおけるタグ省略
終了タグなし
許可されるARIAロール属性値:
link (デフォルト - 設定しない)。
許可されるARIAステートおよびプロパティー
グローバルaria-* 属性
許可されるロールで受け入れ可能な任意のaria-*属性。
DOMインターフェース
interface HTMLAreaElement : HTMLElement {
           attribute DOMString alt;
           attribute DOMString coords;
           attribute DOMString shape;
           attribute DOMString target;
           attribute DOMString download;

           attribute DOMString rel;
  readonly attribute DOMTokenList relList;
           attribute DOMString hreflang;
           attribute DOMString type;
};
HTMLAreaElement implements URLUtils;

area要素は、テキストとイメージマップで領域に対応をもつハイパーリンク、またはイメージマップ上の不感領域のいずれかを表す

親ノードとともにarea要素は、map要素の祖先またはtemplate要素の祖先を持たなければならない。

area要素がhref属性を持つ場合、area要素はハイパーリンクを表す。この場合、alt属性が存在しなければならない。この属性は、ハイパーリンクのテキストを指定する。属性値は、イメージマップの他のハイパーリンクに指定されるテキストを伴い、かつ画像の代替テキストを伴うが、画像なしで提示された場合、テキストでなければならず、テキストなしだが画像に適用される形状を伴うような場合、ハイパーリンクとして同じ選択の種類をユーザーに提供しなければならない。同じリソースを指すイメージマップと非空白のalt属性を持つ別のarea要素が存在する場合、alt属性は空白のままであってもよい。

area要素がhref属性を持たない場合、その要素によって表される領域を選択できず、alt属性を省略しなければならない。

どちらの場合も、shapecoords属性は領域を指定する。

shape属性は、列挙属性である。以下の表は、この属性に対して定義されたキーワードを列挙する。キーワードとともにその行の最初のセルに与えられた状態は、これらキーワードが対応する状態を与える。Some of the keywords are non-conforming, as noted in the last column.

状態 キーワード
Circle state circle
circ Non-conforming
Default state default
Polygon state poly
polygon Non-conforming
Rectangle state rect
rectangle Non-conforming

属性は省略してもよい。欠損値のデフォルトは、rectangle状態である。

coords属性が指定される場合、整数の妥当なリストを含まなければならない。この属性は、shape属性によって記述された図形の座標を与える。The processing for this attribute is described as part of the image map processing model.

circle stateにおいて、area要素は、最後の整数は非負でなければならない、3つの整数とともに、存在するcoords属性を持たなければならない。最初の整数は画像の左端から円の中心までのCSSピクセル単位距離でなければならず、2番目の整数は画像の上端から円の中心までのCSSピクセル単位距離でなければならず、3番目の整数はCSSピクセル単位距離で円の半径でなければならない。

default state状態において、area要素はcoords属性を持ってはならない。(領域は全体の画像である。)

polygon stateにおいて、area要素は少なくとも6つの整数をもつcoords属性を持たなければならず、その整数は偶数個でなければならない。整数の各ペアは、CSSピクセルでそれぞれ画像の左からおよび上からの距離として指定された座標を表さなければならず、順に、すべての座標はポリゴンの点を表さなければならない。

rectangle stateにおいて、area要素は正確に4つの整数をもつcoords属性を持たなければならない。1番目の整数は3番目の整数未満でなければならず、2番目の整数は4番目の整数未満でなければならない。4点は、それぞれすべてCSSピクセルで、矩形の左側から画像の左辺までの距離、上側から上辺までの距離、左側から左辺までの距離、下側から上辺までの距離を表さなければならない。

When user agents allow users to follow hyperlinks or download hyperlinks created using the area element, as described in the next section, the href, target, download, and attributes decide how the link is followed. The rel, hreflang, and type attributes may be used to indicate to the user the likely nature of the target resource before the user follows the link.

href属性が存在しない場合、targethreflang、およびtype属性は省略しなければならない。

area要素でitempropが指定される場合、href属性も指定されなければならない。

The activation behavior of area elements is to run the following steps:

  1. If the area element's Document is not fully active, then abort these steps.

  2. If the area element has a download attribute and the algorithm is not allowed to show a popup, or the element's target attribute is present and applying the rules for choosing a browsing context given a browsing context name, using the value of the target attribute as the browsing context name, would result in there not being a chosen browsing context, then run these substeps:

    1. If there is an entry settings object, throw an InvalidAccessError exception.

    2. Abort these steps without following the hyperlink.

  3. Otherwise, the user agent must follow the hyperlink or download the hyperlink created by the area element, if any, and as determined by the download attribute and any expressed user preference.

The IDL attributes alt, coords, target, download, rel, hreflang, and type, each must reflect the respective content attributes of the same name.

The IDL attribute shape must reflect the shape content attribute.

The IDL attribute relList must reflect the rel content attribute.


The area element also supports the URLUtils interface. [URL]

When the element is created, and whenever the element's href content attribute is set, changed, or removed, the user agent must invoke the element's URLUtils interface's set the input algorithm with the value of the href content attribute, if any, or the empty string otherwise, as the given value.

The element's URLUtils interface's get the base algorithm must simply return the element's base URL.

The element's URLUtils interface's query encoding is the document's character encoding.

When the element's URLUtils interface invokes its update steps with a string value, the user agent must set the element's href content attribute to the string value.

4.7.17 イメージマップ

4.7.17.1 Authoring

イメージマップは、ハイパーリンクに関連付けられるような画像で幾何学的な領域を可能にする。

img要素や画像を表すobject要素の形式において、画像は、imgobject要素上でusemap属性を指定することにより(map要素の形式で)イメージマップに関連付けてもよい。usemap属性が指定される場合、map要素に妥当なハッシュ名の参照でなければならない。

次のような画像を考えてみよう:

A line with four shapes in it, equally spaced: a red hollow box, a green circle, a blue triangle, and a yellow four-pointed star.

色付きの領域のみをクリック可能にしたい場合、次のようにするだろう:

<p>
 Please select a shape:
 <img src="shapes.png" usemap="#shapes"
      alt="Four shapes are available: a red hollow box, a green circle, a blue triangle, and a yellow four-pointed star.">
 <map name="shapes">
  <area shape=rect coords="50,50,100,100"> <!-- the hole in the red box -->
  <area shape=rect coords="25,25,125,125" href="red.html" alt="Red box.">
  <area shape=circle coords="200,75,50" href="green.html" alt="Green circle.">
  <area shape=poly coords="325,25,262,125,388,125" href="blue.html" alt="Blue triangle.">
  <area shape=poly coords="450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60"
        href="yellow.html" alt="Yellow star.">
 </map>
</p>
4.7.17.2 Processing model

If an img element or an object element representing an image has a usemap attribute specified, user agents must process it as follows:

  1. First, rules for parsing a hash-name reference to a map element must be followed. This will return either an element (the map) or null.

  2. If that returned null, then abort these steps. The image is not associated with an image map after all.

  3. Otherwise, the user agent must collect all the area elements that are descendants of the map. Let those be the areas.

Having obtained the list of area elements that form the image map (the areas), interactive user agents must process the list in one of two ways.

If the user agent intends to show the text that the img element represents, then it must use the following steps.

In user agents that do not support images, or that have images disabled, object elements cannot represent images, and thus this section never applies (the fallback content is shown instead). The following steps therefore only apply to img elements.

  1. Remove all the area elements in areas that have no href attribute.

  2. Remove all the area elements in areas that have no alt attribute, or whose alt attribute's value is the empty string, if there is another area element in areas with the same value in the href attribute and with a non-empty alt attribute.

  3. Each remaining area element in areas represents a hyperlink. Those hyperlinks should all be made available to the user in a manner associated with the text of the img.

    In this context, user agents may represent area and img elements with no specified alt attributes, or whose alt attributes are the empty string or some other non-visible text, in a user-agent-defined fashion intended to indicate the lack of suitable author-provided text.

If the user agent intends to show the image and allow interaction with the image to select hyperlinks, then the image must be associated with a set of layered shapes, taken from the area elements in areas, in reverse tree order (so the last specified area element in the map is the bottom-most shape, and the first element in the map, in tree order, is the top-most shape).

Each area element in areas must be processed as follows to obtain a shape to layer onto the image:

  1. Find the state that the element's shape attribute represents.

  2. Use the rules for parsing a list of integers to parse the element's coords attribute, if it is present, and let the result be the coords list. If the attribute is absent, let the coords list be the empty list.

  3. If the number of items in the coords list is less than the minimum number given for the area element's current state, as per the following table, then the shape is empty; abort these steps.

    状態 Minimum number of items
    Circle state 3
    Default state 0
    Polygon state 6
    Rectangle state 4
  4. Check for excess items in the coords list as per the entry in the following list corresponding to the shape attribute's state:

    Circle state
    Drop any items in the list beyond the third.
    Default state
    Drop all items in the list.
    Polygon state
    Drop the last item if there's an odd number of items.
    Rectangle state
    Drop any items in the list beyond the fourth.
  5. If the shape attribute represents the rectangle state, and the first number in the list is numerically less than the third number in the list, then swap those two numbers around.

  6. If the shape attribute represents the rectangle state, and the second number in the list is numerically less than the fourth number in the list, then swap those two numbers around.

  7. If the shape attribute represents the circle state, and the third number in the list is less than or equal to zero, then the shape is empty; abort these steps.

  8. Now, the shape represented by the element is the one described for the entry in the list below corresponding to the state of the shape attribute:

    Circle state

    Let x be the first number in coords, y be the second number, and r be the third number.

    The shape is a circle whose center is x CSS pixels from the left edge of the image and y CSS pixels from the top edge of the image, and whose radius is r pixels.

    Default state

    The shape is a rectangle that exactly covers the entire image.

    Polygon state

    Let xi be the (2i)th entry in coords, and yi be the (2i+1)th entry in coords (the first entry in coords being the one with index 0).

    Let the coordinates be (xi, yi), interpreted in CSS pixels measured from the top left of the image, for all integer values of i from 0 to (N/2)-1, where N is the number of items in coords.

    The shape is a polygon whose vertices are given by the coordinates, and whose interior is established using the even-odd rule. [GRAPHICS]

    Rectangle state

    Let x1 be the first number in coords, y1 be the second number, x2 be the third number, and y2 be the fourth number.

    The shape is a rectangle whose top-left corner is given by the coordinate (x1, y1) and whose bottom right corner is given by the coordinate (x2, y2), those coordinates being interpreted as CSS pixels from the top left corner of the image.

    For historical reasons, the coordinates must be interpreted relative to the displayed image after any stretching caused by the CSS 'width' and 'height' properties (or, for non-CSS browsers, the image element's width and height attributes — CSS browsers map those attributes to the aforementioned CSS properties).

    Browser zoom features and transforms applied using CSS or SVG do not affect the coordinates.

Pointing device interaction with an image associated with a set of layered shapes per the above algorithm must result in the relevant user interaction events being first fired to the top-most shape covering the point that the pointing device indicated, if any, or to the image element itself, if there is no shape covering that point. User agents may also allow individual area elements representing hyperlinks to be selected and activated (e.g. using a keyboard).

Because a map element (and its area elements) can be associated with multiple img and object elements, it is possible for an area element to correspond to multiple focusable areas of the document.

Image maps are live; if the DOM is mutated, then the user agent must act as if it had rerun the algorithms for image maps.

4.7.18 MathML

MathML名前空間由来のmath要素は、この仕様におけるコンテンツモデルの意味に対してエンベディッドコンテンツフレージングコンテンツ、およびフローコンテンツのカテゴリに分類される。

MathMLのannotation-xml要素がHTML名前空間由来の要素を含む場合、そのような要素は、すべてフローコンテンツでなければならない。[MATHML]

MathMLのトークン要素(mimomnmsおよびmtext)がHTML要素の子孫である場合、要素はHTML名前空間由来のフレージングコンテンツ要素を含んでもよい。[MATHML]

User agents must handle text other than inter-element whitespace found in MathML elements whose content models do not allow straight text by pretending for the purposes of MathML content models, layout, and rendering that that text is actually wrapped in an mtext element in the MathML namespace. (Such text is not, however, conforming.)

User agents must act as if any MathML element whose contents does not match the element's content model was replaced, for the purposes of MathML layout and rendering, by an merror element in the MathML namespace containing some appropriate error message.

To enable authors to use MathML tools that only accept MathML in its XML form, interactive HTML user agents are encouraged to provide a way to export any MathML fragment as an XML namespace-well-formed XML fragment.

MathMLの要素のセマンティックは、MathML仕様やその他の適用可能な仕様で定義される。[MATHML]

HTML文書でのMathMLの使用例は、次のとおり:

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>The quadratic formula</title>
 </head>
 <body>
  <h1>The quadratic formula</h1>
  <p>
   <math>
    <mi>x</mi>
    <mo>=</mo>
    <mfrac>
     <mrow>
      <mo form="prefix">−</mo> <mi>b</mi>
      <mo>±</mo>
      <msqrt>
       <msup> <mi>b</mi> <mn>2</mn> </msup>
       <mo>−</mo>
       <mn>4</mn> <mo>⁢</mo> <mi>a</mi> <mo>⁢</mo> <mi>c</mi>
      </msqrt>
     </mrow>
     <mrow>
      <mn>2</mn> <mo>⁢</mo> <mi>a</mi>
     </mrow>
    </mfrac>
   </math>
  </p>
 </body>
</html>

4.7.19 SVG

SVG名前空間由来のsvg要素は、この仕様におけるコンテンツモデルの意味に対してエンベディッドコンテンツフレージングコンテンツ、およびフローコンテンツのカテゴリに分類される。

To enable authors to use SVG tools that only accept SVG in its XML form, interactive HTML user agents are encouraged to provide a way to export any SVG fragment as an XML namespace-well-formed XML fragment.

SVGのforeignObject要素がHTML名前空間の要素を含む場合、そのような要素は、すべてフローコンテンツでなければならない。[SVG]

HTML文書内部のSVG名前空間title要素のコンテンツモデルはフレージングコンテンツである。(これはSVG仕様で指定された要件をさらに制約する。)

SVGの要素のセマンティックは、SVG仕様やその他の適用可能な仕様で定義される。[SVG]

4.7.20 次元属性

Author requirements: The width and height attributes on img, iframe, embed, object, video, and, when their type attribute is in the Image Button state, input elements may be specified to give the dimensions of the visual content of the element (the width and height respectively, relative to the nominal direction of the output medium), in CSS pixels. The attributes, if specified, must have values that are valid non-negative integers.

リソースはCSSピクセルの解像度とは異なる解像度を持つかもしれないので、与えられた指定次元は、リソース自体で指定された次元と異なるかもしれない。(画面では、CSSのピクセルが96ppiの解像度を持つが、一般にCSSピクセル解像度が読み取り距離に依存する。)両方の属性が指定される場合、次のいずれかの命題が真でなければならない:

target ratioは、リソースの固有高さと固有幅の比率である。specified widthspecified heightは、それぞれwidthheight属性の値である。

問題のリソースが固有幅と固有高さの両方を持たない場合、2つの属性は省略しなければならない。

2つの属性がともに0である場合、要素がユーザーに意図されない(たとえば、ページビューをカウントするサービスの一部であるかもしれない)ことを示す。

次元属性は、画像を伸ばすために使用することを意図しない。

User agent requirements: User agents are expected to use these attributes as hints for the rendering.

The width and height IDL attributes on the iframe, embed, object, and video elements must reflect the respective content attributes of the same name.

For iframe, embed, and object the IDL attributes are DOMString; for video the IDL attributes are unsigned long.

The corresponding IDL attributes for img and input elements are defined in those respective elements' sections, as they are slightly more specific to those elements' other behaviors.