1. 4.8.8 video要素
      2. 4.8.9 audio要素
      3. 4.8.10 track要素
      4. 4.8.11 メディア要素
        1. 4.8.11.1 エラーコード
        2. 4.8.11.2 メディアリソースの場所
        3. 4.8.11.3 MIMEタイプ
        4. 4.8.11.4 ネットワーク状態
        5. 4.8.11.5 メディアリソースの読み込み
        6. 4.8.11.6 メディアリソースからのオフセット
        7. 4.8.11.7 準備状態
        8. 4.8.11.8 メディアリソースの再生
        9. 4.8.11.9 シーク
        10. 4.8.11.10 複数のメディアトラックを伴うメディアリソース
          1. 4.8.11.10.1 AudioTrackListおよびVideoTrackListオブジェクト
          2. 4.8.11.10.2 宣言的に特定のオーディオとビデオトラックを選択する
        11. 4.8.11.11 時限テキストトラック
          1. 4.8.11.11.1 テキストトラックモデル
          2. 4.8.11.11.2 帯域内テキストトラックの情報源
          3. 4.8.11.11.3 Sourcing out-of-band text tracks
          4. 4.8.11.11.4 Guidelines for exposing cues in various formats as text track cues
          5. 4.8.11.11.5 Text track API
          6. 4.8.11.11.6 Event handlers for objects of the text track APIs
          7. 4.8.11.11.7 Best practices for metadata text tracks
        12. 4.8.11.12 URLを通してトラックの種類を識別する
        13. 4.8.11.13 ユーザーインターフェイス
        14. 4.8.11.14 時間範囲
        15. 4.8.11.15 TrackEventインターフェイス
        16. 4.8.11.16 イベントの概要
        17. 4.8.11.17 Security and privacy considerations
        18. 4.8.11.18 Best practices for authors using media elements
        19. 4.8.11.19 Best practices for implementers of media elements

4.8.8 video要素

Element/video

Support in all current engines.

Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS3+Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLVideoElement

Support in all current engines.

Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+
カテゴリー
フローコンテンツ
フレージングコンテンツ
エンベディッドコンテンツ
要素がcontrols属性を持つ場合:インタラクティブコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
エンベディッドコンテンツが期待される場所。
コンテンツモデル
要素がsrc属性を持つ場合:0個以上のtrack要素で、次に透過的だが、media要素子孫をもたない。
要素がsrc属性を持たない場合:0個以上のsource要素で、次に0個以上のtrackで、次に透過的だが、media要素子孫をもたない。
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
src — リソースのアドレス
crossorigin — 要素が生成元をまたいだ要求を処理する方法
poster — 先にビデオプレイバックを見せるポスターフレーム
preloadメディアリソースがどの程度バッファーリングに必要になるかのヒント
autoplay — ページが読み込まれるときにメディアリソースが自動的に開始可能というヒント
playsinline — 要素の再生領域内のビデオコンテンツを表示することをユーザーエージェントに勧める
loopメディアリソースをループするかどうか
muted — デフォルトでメディアリソースをミュートするかどうか
controls — ユーザーエージェントのコントロールを表示する
width — 横の次元
height — 縦の次元
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
[Exposed=Window]
interface HTMLVideoElement : HTMLMediaElement {
  [HTMLConstructor] constructor();

  [CEReactions] attribute unsigned long width;
  [CEReactions] attribute unsigned long height;
  readonly attribute unsigned long videoWidth;
  readonly attribute unsigned long videoHeight;
  [CEReactions] attribute USVString poster;
  [CEReactions] attribute boolean playsInline;
};

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

コンテンツは、video要素の内部に提供されてもよい。User agents should not show this content to the user; it is intended for older web browsers which do not support video, so that text can be shown to the users of these older browsers informing them of how to access the video contents.

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

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

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

poster属性はビデオデータが利用可能でない間に、ユーザーエージェントが表示できる画像ファイルのURLを与える。属性が存在する場合、潜在的にスペースで囲まれた妥当な空でない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; return.

  3. Let url be the result of encoding-parsing a URL given the poster attribute's value, relative to the element's node document.

  4. If url is failure, then return. There is no poster frame.

  5. Let request be a new request whose URL is url, client is the element's node document's relevant settings object, destination is "image", initiator type is "video", credentials mode is "include", and whose use-URL-credentials flag is set.

  6. Fetch request. This must delay the load event of the element's node document.

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

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

playsinline属性は、真偽属性である。存在する場合、この属性は、代わりにフルスクリーン表示されているまたは独立したサイズ変更可能なウィンドウで、要素の再生領域が制限される、映像がデフォルトで文書で"インライン"に表示されるべきユーザーエージェントへのヒントとして提供する。

playsinline属性の不在は、映像がデフォルトでフルスクリーンに表示されることを意味するものではない。実際、ほとんどのユーザーエージェントは、デフォルトですべてのビデオインラインを再生することを選択し、そのようなユーザーエージェントでplaysinline属性は効果がない。


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 natural 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 synchronized 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 natural width, whose height is the media resource's natural 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

HTMLVideoElement/videoWidth

Support in all current engines.

Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+
video.videoHeight

HTMLVideoElement/videoHeight

Support in all current engines.

Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+

これらの属性は、ビデオの自然次元を返す、または次元が不明な場合は0を返す。

The natural width and natural 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 natural width of the video in CSS pixels. The videoHeight IDL attribute must return the natural height of the video in CSS pixels. If the element's readyState attribute is HAVE_NOTHING, then the attributes must return 0.

Whenever the natural width or natural 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 media element task given the media element to fire an 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 natural width of a video element's playback area is the natural width of the poster frame, if that is available and the element currently represents its poster frame; otherwise, it is the natural width of the video resource, if that is available; otherwise the natural width is missing.

The natural height of a video element's playback area is the natural height of the poster frame, if that is available and the element currently represents its poster frame; otherwise it is the natural height of the video resource, if that is available; otherwise the natural 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, such as fullscreen or in an independent resizable window. User agents may even trigger such a viewing mode by default upon playing a video, although they should not do so when the playsinline attribute is specified. As with 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 viewing mode, however, user agents may make full user interfaces visible, 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.

The playsInline IDL attribute must reflect the playsinline 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.8.9 audio要素

Element/audio

Support in all current engines.

Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS3+Chrome Android?WebView Android3+Samsung Internet?Opera Android11+

HTMLAudioElement

Support in all current engines.

Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+
カテゴリー
フローコンテンツ
フレージングコンテンツ
エンベディッドコンテンツ
要素がcontrols属性を持つ場合:インタラクティブコンテンツ
要素がcontrols属性を持つ場合:パルパブルコンテンツ
この要素を使用できるコンテキスト
エンベディッドコンテンツが期待される場所。
コンテンツモデル
要素がsrc属性を持つ場合:0個以上のtrack要素で、次に透過的だが、media要素子孫をもたない。
要素がsrc属性を持たない場合:0個以上のsource要素で、次に0個以上のtrackで、次に透過的だが、media要素子孫をもたない。
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
src — リソースのアドレス
crossorigin — 要素が生成元をまたいだ要求を処理する方法
preloadメディアリソースがどの程度バッファーリングに必要になるかのヒント
autoplay — ページが読み込まれるときにメディアリソースが自動的に開始可能というヒント
loopメディアリソースをループするかどうか
muted — デフォルトでメディアリソースをミュートするかどうか
controls — ユーザーエージェントのコントロールを表示する
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
[Exposed=Window,
 LegacyFactoryFunction=Audio(optional DOMString src)]
interface HTMLAudioElement : HTMLMediaElement {
  [HTMLConstructor] constructor();
};

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

コンテンツは、audio要素の内部に提供されてもよい。User agents should not show this content to the user; it is intended for older web browsers which do not support audio, so that text can be shown to the users of these older browsers informing them of how to access the audio contents.

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

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

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

audio = new Audio([ url ])

HTMLAudioElement/Audio

Support in all current engines.

Firefox3.5+Safari3.1+Chrome4+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

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

A legacy factory function is provided for creating HTMLAudioElement objects (in addition to the factory methods from DOM such as createElement()): Audio(src). When invoked, the legacy factory function must perform the following steps:

  1. Let document be the current global object's associated Document.

  2. Let audio be the result of creating an element given document, audio, and the HTML namespace.

  3. Set an attribute value for audio using "preload" and "auto".

  4. If src is given, then set an attribute value for audio using "src" and src. (This will cause the user agent to invoke the object's resource selection algorithm before returning.)

  5. Return audio.

4.8.10 track要素

Element/track

Support in all current engines.

Firefox31+Safari6+Chrome23+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android?Safari iOS?Chrome Android25+WebView Android?Samsung Internet?Opera Android12.1+

HTMLTrackElement

Support in all current engines.

Firefox31+Safari6+Chrome23+
Opera12+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12+
カテゴリー
なし。
この要素を使用できるコンテキスト
任意のフローコンテンツの前の、メディア要素要素の子として。
コンテンツモデル
Nothing
text/htmlにおけるタグ省略
終了タグなし。
コンテンツ属性
グローバル属性
kind — テキストトラックの種類
src — リソースのアドレス
srclang — テキストトラックの言語
label — ユーザー可視ラベル
default — 他のテキストトラックがより適切でない場合にトラックを作動させる
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
[Exposed=Window]
interface HTMLTrackElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions] attribute DOMString kind;
  [CEReactions] attribute USVString src;
  [CEReactions] attribute DOMString srclang;
  [CEReactions] attribute DOMString label;
  [CEReactions] 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要素は、著者がメディア要素に対して明示的に外部調節されたテキストトラックを指定できる。この要素は、自分自身で何かを表すものではない。

The kind attribute is an enumerated attribute with the following keywords and states:

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

The attribute's missing value default is the subtitles state, and its invalid value default is the metadata state.

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

The element has an associated track URL (a string), initially the empty string.

When the element's src attribute is set, run these steps:

  1. Let trackURL be failure.

  2. Let value be the element's src attribute value.

  3. If value is not the empty string, then set trackURL to the result of encoding-parsing-and-serializing a URL given value, relative to the element's node document.

  4. Set the element's track URL to trackURL if it is not failure; otherwise to the empty string.

要素のトラックURLがWebVTTリソースを識別し、かつその要素のkind属性がチャプターメタデータまたはメタデータ状態でない場合、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属性がキャプチャーメタデータ状態かつ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.

HTMLTrackElement/src

Support in all current engines.

Firefox31+Safari6+Chrome23+
Opera12+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12+

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.8.11 メディア要素

HTMLMediaElementオブジェクト(この仕様ではaudioおよびvideo)は、単にメディア要素として知られている。

HTMLMediaElement

Support in all current engines.

Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+
Edge (Legacy)12+Internet Explorer5.5+
Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+
enum CanPlayTypeResult { "" /* empty string */, "maybe", "probably" };
typedef (MediaStream or MediaSource or Blob) MediaProvider;

[Exposed=Window]
interface HTMLMediaElement : HTMLElement {

  // error state
  readonly attribute MediaError? error;

  // network state
  [CEReactions] attribute USVString src;
  attribute MediaProvider? srcObject;
  readonly attribute USVString currentSrc;
  [CEReactions] 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;
  [CEReactions] attribute DOMString preload;
  readonly attribute TimeRanges buffered;
  undefined 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;
  undefined fastSeek(double time);
  readonly attribute unrestricted double duration;
  object getStartDate();
  readonly attribute boolean paused;
  attribute double defaultPlaybackRate;
  attribute double playbackRate;
  attribute boolean preservesPitch;
  readonly attribute TimeRanges played;
  readonly attribute TimeRanges seekable;
  readonly attribute boolean ended;
  [CEReactions] attribute boolean autoplay;
  [CEReactions] attribute boolean loop;
  Promise<undefined> play();
  undefined pause();

  // controls
  [CEReactions] attribute boolean controls;
  attribute double volume;
  attribute boolean muted;
  [CEReactions] attribute boolean defaultMuted;

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

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

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

メディアリソースは、originに関連付けられており、これは "none"、"multiple"、"rewritten"、またはoriginのいずれかである。最初は"none"に設定される。

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

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

Each media element has a unique media element event task source.

To queue a media element task with a media element element and a series of steps steps, queue an element task on the media element's media element event task source given element and steps.

4.8.11.1 エラーコード

MediaError

Support in all current engines.

Firefox4+Safari3.1+Chrome3+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+
media.error

HTMLMediaElement/error

Support in all current engines.

Firefox3.5+Safari3.1+Chrome3+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

要素の現在のエラー状態を表す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.

[Exposed=Window]
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;
  readonly attribute DOMString message;
};
media.error.code

MediaError/code

Support in all current engines.

Firefox3.5+Safari3.1+Chrome3+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

下記のリストから、現在のエラーのエラーコードを返す。

media.error.message

MediaError/message

Support in all current engines.

Firefox52+Safari15+Chrome59+
Opera?Edge79+
Edge (Legacy)?Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

発生したエラー条件に関する有益な診断メッセージを返す。メッセージおよびメッセージの形式は、一般に異なるユーザーエージェント間で一様ではない。そのようなメッセージが利用可能でない場合、空の文字列が返される。

Every MediaError object has a message, which is a string, and a code, which is one of the following:

MEDIA_ERR_ABORTED(数値1)
メディアリソースに対するフェッチプロセスが、ユーザーの要求でユーザーエージェントによって中止された。
MEDIA_ERR_NETWORK(数値2)
リソースが使用可能であることが確立された後、一部の説明のネットワークエラーは、ユーザーエージェントにメディアリソースのフェッチを停止させた。
MEDIA_ERR_DECODE(数値3)
リソースが使用可能であることが確立された後に、メディアリソースをデコードする間に説明のエラーが発生した。
MEDIA_ERR_SRC_NOT_SUPPORTED(数値4)
src属性またはassigned media provider objectで示されるメディアリソースは適さなかった。

To create a MediaError, given an error code which is one of the above values, return a new MediaError object whose code is the given error code and whose message is a string containing any details the user agent is able to supply about the cause of the error condition, or the empty string if the user agent is unable to supply such details. This message string must not contain only the information already available via the supplied error code; for example, it must not simply be a translation of the code into a string format. If no additional information is available beyond that provided by the error code, the message must be set to the empty string.

The code getter steps are to return this's code.

The message getter steps are to return this's message.

4.8.11.2 メディアリソースの場所

メディア要素srcコンテンツ属性は、表示するメディアリソース(ビデオ、オーディオ)のURLを与える。属性が存在する場合、潜在的にスペースで囲まれた妥当な空でないURLを含まなければならない。

itempropメディア要素要素で指定される場合、src属性も指定されなければならない。

メディア要素上のcrossoriginコンテンツ属性は、CORS設定属性である。

If a media element is created with a src attribute, the user agent must immediately 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.)

HTMLMediaElement/src

Support in all current engines.

Firefox3.5+Safari3.1+Chrome3+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

メディア要素src IDL属性は、同じ名前のコンテンツ属性を反映しなければならない。

HTMLMediaElement/crossOrigin

Support in all current engines.

Firefox22+Safari10+Chrome33+
Opera?Edge79+
Edge (Legacy)13+Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

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

メディアプロバイダーオブジェクトは、メディアリソースを表すことができるオブジェクトであり、URLから分離する。MediaStreamオブジェクト、MediaSourceオブジェクト、およびBlobオブジェクトは、すべてメディアプロバイダーオブジェクトである。

Each media element can have an assigned media provider object, which is a media provider object. When a media element is created, it has no assigned media provider object.

media.srcObject [ = source ]

HTMLMediaElement/srcObject

Support in one engine only.

Firefox🔰 42+Safari11+Chrome🔰 108+
Opera?Edge🔰 108+
Edge (Legacy)?Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

メディア要素メディアプロバイダーオブジェクトを割り当てさせる。

media.currentSrc

HTMLMediaElement/currentSrc

Support in all current engines.

Firefox3.5+Safari3.1+Chrome3+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

もしあれば、現在のメディアリソースURLを返す。

メディアリソースが存在しない、またはURLを持たない場合、空文字列を返す。

The currentSrc IDL attribute must initially be set to the empty string. Its value is changed by the resource selection algorithm defined below.

The srcObject IDL attribute, on getting, must return the element's assigned media provider object, if any, or null otherwise. On setting, it must set the element's assigned media provider object to the new value, and then invoke the element's media element load algorithm.

メディアリソースを指定する3つの方法、srcObject IDL属性、src属性、およびsource要素がある。IDL属性が優先され、コンテンツ属性、要素の順に続く。

4.8.11.3 MIMEタイプ

メディアリソースは、codecパラメーターをもつ一部の場合において、そのタイプ、具体的にはMIMEタイプの観点から説明できる。(codecパラメーターが許可されるまたはMIMEタイプに依存しないかどうかに関わらない)[RFC6381]

タイプは、通常多少不完全な記述である。たとえば"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)

HTMLMediaElement/canPlayType

Support in all current engines.

Firefox3.5+Safari4+Chrome3+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

ユーザーエージェントはそれが与えられた型のメディアリソースを再生できる"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. Implementers 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>
 const videoSection = document.getElementById('video');
 const videoElement = document.createElement('video');
 const support = videoElement.canPlayType('video/x-new-fictional-format;codecs="kittens,bunnies"');
 if (support === "probably") {
   videoElement.setAttribute("src", "playing-cats.nfv");
   videoSection.replaceChildren(videoElement);
 }
</script>

source要素のtype属性は、ユーザーエージェントがレンダリングできないフォーマットを使用するリソースのダウンロードを回避できる。

4.8.11.4 ネットワーク状態
media.networkState

HTMLMediaElement/networkState

Support in all current engines.

Firefox3.5+Safari3.1+Chrome3+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android4+Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

下記のリストのコードから、要素に対するネットワーク活動の現在の状態を返す。

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)
要素のリソース選択アルゴリズムはアクティブであり、リソースを選択しているが、この時点でネットワークを実際には使用していない。
NETWORK_LOADING(数値2)
ユーザーエージェントは、積極的にデータをダウンロードしようとしている。
NETWORK_NO_SOURCE(数値3)
要素のリソース選択アルゴリズムはアクティブであるが、まだ使用するリソースを見つけられていない。

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.8.11.5 メディアリソースの読み込み
media.load()

HTMLMediaElement/load

Support in all current engines.

Firefox3.5+Safari3.1+Chrome3+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

要素をリセットさせ、最初から新しいメディアリソースの選択と読み込みを開始させる。

All media elements have a can autoplay 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.

A media element has an associated boolean is currently stalled, which is initially false.

The media element load algorithm consists of the following steps.

  1. Set this element's is currently stalled to false.

  2. Abort any already-running instance of the resource selection algorithm for this element.

  3. Let pending tasks be a list of all tasks from the media element's media element event task source in one of the task queues.

  4. For each task in pending tasks that would resolve pending play promises or reject pending play promises, immediately resolve or reject those promises in the order the corresponding tasks were queued.

  5. Remove each task in pending tasks from its task queue

    Basically, pending events and callbacks are discarded and promises in-flight to be resolved/rejected are resolved/rejected immediately when the media element starts loading a new resource.

  6. If the media element's networkState is set to NETWORK_LOADING or NETWORK_IDLE, queue a media element task given the media element to fire an event named abort at the media element.

  7. If the media element's networkState is not set to NETWORK_EMPTY, then:

    1. Queue a media element task given the media element to fire an 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. If the media element's assigned media provider object is a MediaSource object, then detach it.

    4. Forget the media element's media-resource-specific tracks.

    5. If readyState is not set to HAVE_NOTHING, then set it to that state.

    6. If the paused attribute is false, then:

      1. Set the paused attribute to true.

      2. Take pending play promises and reject pending play promises with the result and an "AbortError" DOMException.

    7. If seeking is true, set it to false.

    8. Set the current playback position to 0.

      Set the official playback position to 0.

      If this changed the official playback position, then queue a media element task given the media element to fire an event named timeupdate at the media element.

    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.

  8. Set the playbackRate attribute to the value of the defaultPlaybackRate attribute.

  9. Set the error attribute to null and the can autoplay flag to true.

  10. Invoke the media element's resource selection algorithm.

  11. 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 as part of a task, but one of the first steps in the algorithm is to return and continue running the remaining steps 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. 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 an assigned media provider object, then let mode be object.

    ⌛ Otherwise, if the media element has no assigned media provider object but has a src attribute, then let mode be attribute.

    ⌛ Otherwise, if the media element does not have an assigned media provider object and does not have a src attribute, but does have 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 no assigned media provider object and has neither a src attribute nor a source element child:

    1. ⌛ Set the networkState to NETWORK_EMPTY.

    2. ⌛ Set the element's delaying-the-load-event flag to false. This stops delaying the load event.

    3. End the synchronous section and return.

  7. ⌛ Set the media element's networkState to NETWORK_LOADING.

  8. Queue a media element task given the media element to fire an event named loadstart at the media element.

  9. Run the appropriate steps from the following list:

    If mode is object
    1. ⌛ Set the currentSrc attribute to the empty string.

    2. End the synchronous section, continuing the remaining steps in parallel.

    3. Run the resource fetch algorithm with the assigned media provider object. If that algorithm returns without aborting this one, then the load failed.

    4. Failed with media provider: Reaching this step indicates that the media resource failed to load. Take pending play promises and queue a media element task given the media element to run the dedicated media source failure steps with the result.

    5. Wait for the task queued by the previous step to have executed.

    6. Return. The element won't attempt to load another resource until this algorithm is triggered again.

    If mode is attribute
    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 urlRecord be the result of encoding-parsing a URL given the src attribute's value, relative to the media element's node document when the src attribute was last changed.

    3. ⌛ If urlRecord is not failure, then set the currentSrc attribute to the result of applying the URL serializer to urlRecord.

    4. End the synchronous section, continuing the remaining steps in parallel.

    5. If urlRecord is not failure, then run the resource fetch algorithm with urlRecord. 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 urlRecord is failure. Take pending play promises and queue a media element task given the media element to run the dedicated media source failure steps with the result.

    7. Wait for the task queued by the previous step to have executed.

    8. Return. The element won't attempt to load another resource until this algorithm is triggered again.

    Otherwise (mode is children)
    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. ⌛ If candidate has a media attribute whose value does not match the environment, then end the synchronous section, and jump down to the failed with elements step below.

    4. ⌛ Let urlRecord be the result of encoding-parsing a URL given candidate's src attribute's value, relative to candidate's node document when the src attribute was last changed.

    5. ⌛ If urlRecord is failure, then end the synchronous section, and jump down to the failed with elements step below.

    6. ⌛ 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.

    7. ⌛ Set the currentSrc attribute to the result of applying the URL serializer to urlRecord.

    8. End the synchronous section, continuing the remaining steps in parallel.

    9. Run the resource fetch algorithm with urlRecord. If that algorithm returns without aborting this one, then the load failed.

    10. Failed with elements: Queue a media element task given the media element to fire an event named error at candidate.

    11. 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 ⌛.)

    12. Forget the media element's media-resource-specific tracks.

    13. Find next candidate: Let candidate be null.

    14. Search loop: If the node after pointer is the end of the list, then jump to the waiting step below.

    15. ⌛ If the node after pointer is a source element, let candidate be that element.

    16. ⌛ 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.

    17. ⌛ If candidate is null, jump back to the search loop step. Otherwise, jump back to the process candidate step.

    18. Waiting: Set the element's networkState attribute to the NETWORK_NO_SOURCE value.

    19. ⌛ Set the element's show poster flag to true.

    20. Queue a media element task given the media element to set the element's delaying-the-load-event flag to false. This stops delaying the load event.

    21. End the synchronous section, continuing the remaining steps in parallel.

    22. Wait until the node after pointer is a node other than the end of the list. (This step might wait forever.)

    23. 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 ⌛.)

    24. ⌛ 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).

    25. ⌛ Set the networkState back to NETWORK_LOADING.

    26. ⌛ Jump back to the find next candidate step above.

    The dedicated media source failure steps with a list of promises promises are the following steps:

    1. Set the error attribute to the result of creating a MediaError with 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 an event named error at the media element.

    6. Reject pending play promises with promises and a "NotSupportedError" DOMException.

    7. Set the element's delaying-the-load-event flag to false. This stops delaying the load event.

To verify a media response given a response response, a media resource resource, and "entire resource" or a (number, number or "until end") tuple byteRange:

  1. If response is a network error, then return false.

  2. If byteRange is "entire resource", then return true.

  3. Let internalResponse be response's unsafe response.

  4. If internalResponse's status is 200, then return true.

  5. If internalResponse's status is not 206, then return false.

  6. If the result of extracting content-range values from internalResponse is failure, then return false.

    Note that the extracted values are not used, and in particular are not compared to byteRange. So this step serves as syntactic validation of the `Content-Range` header, but if the `Content-Range` values on the response mismatch the `Range` values on the request, that is not considered a failure.

  7. Let origin be "rewritten" if internalResponse's URL is null; otherwise internalResponse's URL's origin.

  8. Let previousOrigin be resource's origin.

  9. If any of the following are true:

    then set resource's origin to origin.

    Otherwise, if response is CORS-cross-origin, then return false.

    Otherwise, set resource's origin to "multiple".

    This ensures that opaque responses with range headers do not leak information by being patched together with other responses from different origins.

  10. Return true.

The resource fetch algorithm for a media element and a given URL record or media provider object is as follows:

  1. If the algorithm was invoked with media provider object or a URL record whose blob URL entry is a blob URL entry whose object is a media provider object, then let mode be local. Otherwise let mode be remote.

  2. If mode is remote, then let the current media resource be the resource given by the URL record passed to this algorithm; otherwise, let the current media resource be the resource given by the media provider object. Either way, the current media resource is now the element's media resource.

  3. Remove all media-resource-specific text tracks from the media element's list of pending text tracks, if any.

  4. Run the appropriate steps from the following list:

    If mode is remote
    1. 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 media element task given the media element to fire an event named suspend at the element.

      3. Queue a media element task given the media element 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.

    2. Let destination be "audio" if the media element is an audio element, or "video" otherwise.

    3. Let request be the result of creating a potential-CORS request given current media resource's URL record, destination, and the current state of media element's crossorigin content attribute.

    4. Set request's client to the media element's node document's relevant settings object.

    5. Set request's initiator type to destination.

    6. Let byteRange, which is "entire resource" or a (number, number or "until end") tuple, be the byte range required to satisfy missing data in media data. This value is implementation-defined and may rely on codec, network conditions or other heuristics. The user-agent may determine to fetch the resource in full, in which case byteRange would be "entire resource", to fetch from a byte offset until the end, in which case byteRange would be (number, "until end"), or to fetch a range between two byte offsets, im which case byteRange would be a (number, number) tuple representing the two offsets.

    7. If byteRange is not "entire resource", then:

      1. If byteRange[1] is "until end" then add a range header to request given byteRange[0].

      2. Otherwise, add a range header to request given byteRange[0] and byteRange[1].

    8. Fetch request, with processResponse set to the following steps given response response:

      1. Let global be the media element's node document's relevant global object.

      2. Let updateMedia be to queue a media element task given the media element to run the first appropriate steps from the media data processing steps list below. (A new task is used for this so that the work described below occurs relative to the appropriate media element event task source rather than using the networking task source.)

      3. Let processEndOfMedia be the following step: If the fetching process has 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 final step below. 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.

      4. If the result of verifying response given the current media resource and byteRange is false, then abort these steps.

      5. Otherwise, incrementally read response's body given updateMedia, processEndOfMedia, an empty algorithm, and global.

      6. Update the media data with the contents of response's unsafe response obtained in this fashion. response 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 acanvas gets tainted when the video is drawn on it.

      The media element stall timeout is an implementation-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 media element stall timeout, the user agent must queue a media element task given the media element to:

      1. Fire an event named stalled at the element.

      2. Set the element's is currently stalled to true.

      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 media element task given the media element to set the networkState to NETWORK_IDLE and fire an event named suspend at the element. If and when downloading of the resource resumes, the user agent must queue a media element task given the media element 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 suspend a download, e.g., if it is waiting until the user starts playback before downloading any further content, the user agent must queue a media element task given the media element to set the element's delaying-the-load-event flag to false. This stops delaying the load event.

      Although the above steps give an algorithm for issuing requests, the user agent may use other means besides those exact ones, especially in the face of error conditions. For example, the user agent may reconnect to the server or switch to a streaming protocol. The user agent must only consider the resource erroneous, and proceed into the error branches of the above steps, if the user agent has given up trying to fetch the resource.

      To determine the format of the media resource, the user agent must use the rules for sniffing audio and video specifically.

      While the load is not suspended (see below), every 350ms (±200ms) or for every byte received, whichever is least frequent, queue a media element task given the media element to:

      1. Fire an event named progress at the element.

      2. Set the element's is currently stalled to false.

      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.

    Otherwise (mode is local)

    The resource described by the current media resource, if any, contains the media data. It is CORS-same-origin.

    If the current media resource is a raw data stream (e.g. from a File object), then to determine the format of the media resource, the user agent must use the rules for sniffing audio and video specifically. Otherwise, if the data stream is pre-decoded, then the format is the format given by the relevant specification.

    Whenever new data for the current media resource becomes available, queue a media element task given the media element to run the first appropriate steps from the media data processing steps list below.

    When the current media resource is permanently exhausted (e.g. all the bytes of a Blob have been processed), if there were no decoding errors, then the user agent must move on to the final step below. This might never happen, e.g. if the current media resource is a MediaStream.

    The media data processing steps list is as follows:

    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 URL 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 fragment 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.

    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 an event named addtrack at this AudioTrackList object, using TrackEvent, with the track attribute initialized to the new AudioTrack 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 URL 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 fragment 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 an event named addtrack at this VideoTrackList object, using TrackEvent, with the track attribute initialized to the new VideoTrack 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 and the earliest possible 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 media element task given the media element to fire an event named durationchange at the element at this point.

    5. For video elements, set the videoWidth and videoHeight attributes, and queue a media element task given the media element to fire an 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. Let the initial playback position be zero.

    11. If either the media resource or the URL 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.

      For example, with media formats that support media fragment syntax, the fragment can be used to indicate a start position.

    12. If there is no enabled audio track, then enable an audio track. This will cause a change event to be fired.

    13. If there is no selected video track, then select a video track. This will cause a change event to be fired.

    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 an event named progress at the media element.

    Set the networkState to NETWORK_IDLE and fire an 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 media element task given the media element 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 the result of creating a MediaError with MEDIA_ERR_NETWORK.

    3. Set the element's networkState attribute to the NETWORK_IDLE value.

    4. Set the element's delaying-the-load-event flag to false. This stops delaying the load event.

    5. Fire an event named error at the media element.

    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 (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 the result of creating a MediaError with MEDIA_ERR_DECODE.

    3. Set the element's networkState attribute to the NETWORK_IDLE value.

    4. Set the element's delaying-the-load-event flag to false. This stops delaying the load event.

    5. Fire an event named error at the media element.

    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 the result of creating a MediaError with MEDIA_ERR_ABORTED.

    3. Fire an 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 an 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.

  5. Final step: 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.


The preload attribute is an enumerated attribute with the following keywords and states:

キーワード状態概要
autoAutomaticユーザーエージェントが、楽観的に全体のリソースのダウンロードを含め、サーバーへのリスクなしに、最初のユーザーのニーズを置くことができるというユーザーエージェントへのヒント。
(空文字列)
noneNone著者がメディアリソースを必要とすることをユーザーに期待しない、またはサーバーが不要なトラフィックを最小限にしたいのいずれかのユーザーエージェントへのヒント。バッファーリングはとにかく開始する(たとえばユーザーが"play"に当たる)場合、この状態は、メディアリソースを実際にダウンロードする方法に関して積極的にヒントを提供しない。
metadataMetadata著者がメディアリソースを必要とするとユーザーに期待しないが、リソースのメタデータ(寸法、トラックリスト、期間など)フェッチし、そしておそらく最初の数フレームが合理的であるユーザーエージェントへのヒント。ユーザーエージェントが正確にメタデータ以上のものをフェッチしない場合、典型的には、一部のフレームも同様に得られ、おそらくHAVE_CURRENT_DATAまたはHAVE_FUTURE_DATAになるにもかかわらず、メディア要素HAVE_METADATAに設定されるreadyState属性に終わる。メディアリソースが再生するとき、たとえばメディアデータが依然として一貫した再生を維持し最も遅い可能性のレートで得られるようにダウンロードを絞ることが示唆するような、帯域幅の不足を考慮すべきであるというユーザーエージェントへのヒント。

The attribute's missing value default and invalid value default are both implementation-defined, though the Metadata state is suggested as a compromise between reducing server load and providing an optimal user experience.

The attribute can be changed even once the media resource is being buffered or played; the descriptions in the table above are to be interpreted with that in mind.

一度ユーザーが再生を始めると、著者は、動的に"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.

preload IDL属性は、既知の値に制限され、同じ名前のコンテンツ属性を反映しなければならない。

(メディアを再生する場合、preload属性によって与えられるヒントにかかわらず、自然に最初のバッファーを持つので)autoplay属性はpreload属性を上書きできる。しかし、両方を含めることはエラーではない。


media.buffered

HTMLMediaElement/buffered

Support in all current engines.

Firefox4+Safari3.1+Chrome3+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

ユーザーエージェントがバッファーリングしたメディアリソースの範囲を表すTimeRangesオブジェクトを返す。

The buffered attribute must return a new static normalized 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.

Returning a new object each time is a bad pattern for attribute getters and is only enshrined here as it would be costly to change it. It is not to be copied to new APIs.

4.8.11.6 メディアリソースからのオフセット
media.duration

HTMLMediaElement/duration

Support in all current engines.

Firefox3.5+Safari3.1+Chrome3+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

メディアリソースの始点がゼロ時間であると仮定して、秒単位でメディアリソースの長さを返す。

期間が利用できない場合はNaNを返す。

際限のないストリームに対してInfinityを返す。

media.currentTime [ = value ]

HTMLMediaElement/currentTime

Support in all current engines.

Firefox3.5+Safari3.1+Chrome3+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

秒単位で、公式の再生位置を返す。

指定時間にシークするために、設定可能である。

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.

(This is a tracking vector.) 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 an implementation-defined manner.

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.

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'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.

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 media element task given the media element to fire an 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 media element task given the media element to run these steps:

  1. Remove the track from the audioTracks attribute's AudioTrackList object or the videoTracks attribute's VideoTrackList object as appropriate.

  2. Fire an event named removetrack at the media element's aforementioned AudioTrackList or VideoTrackList object, using TrackEvent, with the track attribute initialized to the AudioTrack or VideoTrack object representing the track.

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 greater than or equal to 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 media element task given the media element to fire an 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属性は真偽属性であり、指定される場合、終端に達するとメディアリソースの先頭に戻ってシークするメディア要素であることを示す。

HTMLMediaElement/loop

Support in all current engines.

Firefox11+Safari4+Chrome3+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

loop IDL属性は、同じ名前のコンテンツ属性を反映しなければならない。

4.8.11.7 準備状態
media.readyState

HTMLMediaElement/readyState

Support in all current engines.

Firefox3.5+Safari3.1+Chrome3+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer5.5+
Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

以下のリストのコードから、現在の再生位置をレンダリングに対する要素の現在の状態を表す値を返す。

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要素の場合、ビデオの寸法もまた利用可能である。メディアデータは、すぐに現在の再生位置に対して利用できない。

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 media element task given the media element to fire an 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 media element task given the media element to fire an 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 media element task given the media element to fire an event named timeupdate at the element, and queue a media element task given the media element to fire an 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 media element task given the media element to fire an event named canplay at the element.

    If the element's paused attribute is false, the user agent must notify about playing for 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 media element task given the media element to fire an event named canplay at the element, and, if the element's paused attribute is false, notify about playing for the element.

    The user agent must queue a media element task given the media element to fire an event named canplaythrough at the element.

    If the element is not eligible for autoplay, then the user agent must abort these substeps.

    The user agent may 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 media element task given the element to fire an event named play at the element.
    4. Notify about playing for the element.

    Alternatively, if the element is a video element, the user agent may start observing whether the element intersects the viewport. When the element starts intersecting the viewport, if the element is still eligible for autoplay, run the substeps above. Optionally, when the element stops intersecting the viewport, if the can autoplay flag is still true and the autoplay attribute is still specified, run the following substeps:

    1. Run the internal pause steps and set the can autoplay flag to true.
    2. Queue a media element task given the element to fire an event named pause at the element.

    The substeps for playing and pausing can run multiple times as the element starts or stops intersecting the viewport, as long as the can autoplay flag is true.

    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.

メディア要素の準備状態は、これらの状態間を不連続にジャンプすることが可能である。たとえば、メディア要素の状態は、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属性は真偽属性である。存在する場合、停止せず再生できるようになるとすぐに、(ここで記述されるアルゴリズムで説明されるような)ユーザーエージェントは自動的にメディアリソースの再生を開始する。

著者は、望まれない場合、たとえばスクリーンリーダーを使用する場合、ユーザーが自動再生を上書きできるよう、自動再生を誘発するためのスクリプトを使用するよりも、autoplay属性を使用するように促される。著者はまた、一切自動再生の動作を使用することなく、代わりに明示的に再生を開始するためのユーザーに対してユーザーエージェントが待機しないよう考慮することが推奨される。

HTMLMediaElement/autoplay

Support in all current engines.

Firefox3.5+Safari3.1+Chrome3+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

autoplay IDL属性は、同じ名前のコンテンツ属性を反映しなければならない。

4.8.11.8 メディアリソースの再生
media.paused

HTMLMediaElement/paused

Support in all current engines.

Firefox3.5+Safari3.1+Chrome3+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

再生が一時停止された場合はtrueを返し、そうでなければfalseを返す。

media.ended

HTMLMediaElement/ended

Support in all current engines.

Firefox3.5+Safari3.1+Chrome3+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

再生がメディアリソースの終わりに達した場合trueを返す。

media.defaultPlaybackRate [ = value ]

HTMLMediaElement/defaultPlaybackRate

Support in all current engines.

Firefox20+Safari3.1+Chrome3+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

メディアリソースを介してユーザーが早送りまたは巻き戻ししない場合に対し、再生のデフォルト率を返す。

再生のデフォルト率を変更する設定が可能である。

デフォルト率は再生に直接影響を与えないが、ユーザーが早送りモードに切り替えた場合、モードが通常の再生モードに戻ったときに、再生速度が再生のデフォルト率に戻されることが期待される。

media.playbackRate [ = value ]

HTMLMediaElement/playbackRate

Support in all current engines.

Firefox20+Safari3.1+Chrome3+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

現在の再生率を返す。ここで1.0が通常の速度である。

再生速度を変更する設定が可能である。

media.preservesPitch

HTMLMediaElement/preservesPitch

Firefox101+Safari🔰 4+Chrome86+
Opera?Edge86+
Edge (Legacy)?Internet ExplorerNo
Firefox Android?Safari iOS🔰 4+Chrome Android?WebView Android?Samsung Internet?Opera Android?

playbackRateが1.0でないときにピッチ保持アルゴリズムが使用されている場合、trueを返す。デフォルト値はtrueである。

playbackRateに応じてメディアリソースのオーディオピッチを上下に変更するために、falseに設定できる。これは、美的およびパフォーマンス上の理由で役立つ。

media.played

ユーザーエージェントが再生したメディアリソースの範囲を表すTimeRangesオブジェクトを返す。

media.play()

HTMLMediaElement/play

Support in all current engines.

Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+

必要に応じてメディアリソースを読み込んで再生を開始し、paused属性をfalseに設定する。再生が終了した場合、最初からリソースを再スタートする。

media.pause()

HTMLMediaElement/pause

Support in all current engines.

Firefox3.5+Safari3.1+Chrome3+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

必要に応じて、メディアリソースを読み込み、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, 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 be eligible for autoplay when all of the following are true:

A media element is said to be allowed to play if the user agent and the system allow media playback in the current context.

For example, a user agent could allow playback only when the media element's Window object has transient activation, but an exception could be made to allow playback while muted.

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.

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 media element task given the media element to fire an 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 nonzero length, or to play content that is temporally anchored to a segment of the media resource but has a length longer than that segment.

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, then seek to the earliest possible position of the media resource and return.

  2. As defined above, the ended IDL attribute starts returning true once the event loop returns to step 1.

  3. Queue a media element task given the media element and the following steps:

    1. Fire an event named timeupdate at the media element.

    2. If the media element has ended playback, the direction of playback is forwards, and paused is false, then:

      1. Set the paused attribute to true.

      2. Fire an event named pause at the media element.

      3. Take pending play promises and reject pending play promises with the result and an "AbortError" DOMException.

    3. Fire an event named ended at the media element.

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 media element task given the media element to fire an 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, 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 user agent must follow these steps:

  1. If the given value is not supported by the user agent, then throw a "NotSupportedError" DOMException.

  2. Set playbackRate to the new value, and if the element is potentially playing, change the playback speed.

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 media element task given the media element to fire an event named ratechange at the media element. The user agent must process attribute changes smoothly and must not introduce any perceivable gaps or muting of playback in response.

The preservesPitch getter steps are to return true if a pitch-preserving algorithm is in effect during playback. The setter steps are to correspondingly switch the pitch-preserving algorithm on or off, without any perceivable gaps or muting of playback. By default, such a pitch-preserving algorithm must be in effect (i.e., the getter will initially return true).


The played attribute must return a new static normalized 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.

Returning a new object each time is a bad pattern for attribute getters and is only enshrined here as it would be costly to change it. It is not to be copied to new APIs.


Each media element has a list of pending play promises, which must initially be empty.

To take pending play promises for a media element, the user agent must run the following steps:

  1. Let promises be an empty list of promises.

  2. Copy the media element's list of pending play promises to promises.

  3. Clear the media element's list of pending play promises.

  4. Return promises.

To resolve pending play promises for a media element with a list of promises promises, the user agent must resolve each promise in promises with undefined.

To reject pending play promises for a media element with a list of promise promises and an exception name error, the user agent must reject each promise in promises with error.

To notify about playing for a media element, the user agent must run the following steps:

  1. Take pending play promises and let promises be the result.

  2. Queue a media element task given the element and the following steps:

    1. Fire an event named playing at the element.

    2. Resolve pending play promises with promises.

When the play() method on a media element is invoked, the user agent must run the following steps.

  1. If the media element is not allowed to play, then return a promise rejected with a "NotAllowedError" DOMException.

  2. If the media element's error attribute is not null and its code is MEDIA_ERR_SRC_NOT_SUPPORTED, then return a promise rejected with a "NotSupportedError" DOMException.

    This means that the dedicated media source failure steps have run. Playback is not possible until the media element load algorithm clears the error attribute.

  3. Let promise be a new promise and append promise to the list of pending play promises.

  4. Run the internal play steps for the media element.

  5. Return promise.

The internal play steps for a media element are as follows:

  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, seek to the earliest possible position of the media resource.

    This will cause the user agent to queue a media element task given the media element to fire an event named timeupdate at the media element.

  3. If the media element's paused attribute is true, then:

    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 media element task given the media element to fire an 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 media element task given the media element to fire an event named waiting at the element.

      Otherwise, the media element's readyState attribute has the value HAVE_FUTURE_DATA or HAVE_ENOUGH_DATA: notify about playing for the element.

  4. Otherwise, if the media element's readyState attribute has the value HAVE_FUTURE_DATA or HAVE_ENOUGH_DATA, take pending play promises and queue a media element task given the media element to resolve pending play promises with the result.

    The media element is already playing. However, it's possible that promise will be rejected before the queued task is run.

  5. Set the media element's can autoplay flag to false.


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 can autoplay 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. Take pending play promises and let promises be the result.

    3. Queue a media element task given the media element and the following steps:

      1. Fire an event named timeupdate at the element.

      2. Fire an event named pause at the element.

      3. Reject pending play promises with promises and an "AbortError" DOMException.

    4. Set the official playback position to the current playback position.


If the element's playbackRate 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 the element's playbackRate 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 element's playbackRate is negative.)

The element's playbackRate 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 element's playbackRate is so low or so high that the user agent cannot play audio usefully, the corresponding audio must also be muted. If the element's playbackRate is not 1.0 and preservesPitch is true, the user agent must apply pitch adjustment to preserve the original pitch of the audio. Otherwise, the user agent must speed up or slow down the audio without any pitch adjustment.

When a media element is potentially playing, its audio data played must be synchronized 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 a media element is not potentially playing, audio must not play for the element.

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 be unpaused but stalled waiting for content to buffer, or it could be still buffering, but with a suspend event listener that begins playback. Even a media element whose media resource has no audio tracks could eventually play audio again if it had an event listener that changes the media resource.


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. To support use cases that depend on the timing accuracy of cue event firing, such as synchronizing captions with shot changes in a video, user agents should fire cue events as close as possible to their position on the media timeline, and ideally within 20 milliseconds. 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 short duration cues to be skipped over as the user agent rushes ahead to "catch up", so these cues will not appear in the activeCues list.

The time marches on steps are as follows:

  1. Let current cues be a list of cues, initialized 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, initialized 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 media element task given the media element to fire an 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 return.

  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 steps:

    1. Let track be the text track with which the text track cue target is associated.

    2. Create a task to fire an 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 a media element task given the media element for 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 media element task given the media element to fire an event named cuechange at the TextTrack object, and, if the text track has a corresponding track element, to then fire an 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, providing the text track's text track language as the fallback language if it is not the empty string. 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 node 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. 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, return.

  3. ⌛ Run the internal pause steps for the media element.

4.8.11.9 シーク
media.seeking

ユーザーエージェントが現在シークしている場合にtrueを返す。

media.seekable

HTMLMediaElement/seekable

Support in all current engines.

Firefox8+Safari3.1+Chrome3+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

ユーザーエージェントがシーク可能であるメディアリソースの範囲を表すTimeRangesオブジェクトを返す。

media.fastSeek(time)

HTMLMediaElement/fastSeek

Firefox31+Safari8+ChromeNo
Opera?EdgeNo
Edge (Legacy)?Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

高速化のため、できるだけ早く近くに与えられたtimeをシークする。(正確な時刻を求めるために、currentTime属性を使用する。)

メディアリソースがロードされない場合、これは何もしない。

The seeking attribute must initially have the value false.

The fastSeek(time) method must seek to the time given by time, 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, return.

  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 in parallel. 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 return.

  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 a nearby key frame, so that it doesn't have to spend time decoding then discarding intermediate frames before resuming playback.

  10. Queue a media element task given the media element to fire an event named seeking at the element.

  11. Set the current playback position to the 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 event 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 returns the official playback position, not the current playback position, and therefore gets updated before script execution, separate from this algorithm.

  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 media element task given the media element to fire an event named timeupdate at the element.

  17. Queue a media element task given the media element to fire an event named seeked at the element.


The seekable attribute must return a new static normalized 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.

Returning a new object each time is a bad pattern for attribute getters and is only enshrined here as it would be costly to change it. It is not to be copied to new APIs.

User agents should adopt a very liberal and optimistic view of what is seekable. User agents should also buffer recent content where possible to enable seeking to be fast.

For instance, consider a large video file served on an HTTP server without support for HTTP Range requests. A browser could implement this by only buffering the current frame and data obtained for subsequent frames, never allow seeking, except for seeking to the very start by restarting the playback. However, this would be a poor implementation. A high quality implementation would buffer the last few minutes of content (or more, if sufficient storage space is available), allowing the user to jump back and rewatch something surprising without any latency, and would in addition allow arbitrary seeking by reloading the file from the start if necessary, which would be slower but still more convenient than having to literally restart the video and watch it all the way through just to get to an earlier unbuffered spot.

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).

4.8.11.10 複数のメディアトラックを伴うメディアリソース

メディアリソース は、複数の埋め込みオーディオおよびビデオトラックを持つことができる。たとえば、主ビデオトラックとオーディオトラックに加えて、メディアリソースは、外国語吹き替えのやりとり、監督の解説、音声による説明、代替アングル、または手話のオーバーレイを持つかもしれない。

media.audioTracks

HTMLMediaElement/audioTracks

Support in all current engines.

Firefox🔰 33+Safari7+Chrome🔰 37+
Opera?Edge🔰 79+
Edge (Legacy)NoInternet Explorer10+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

メディアリソースで使用可能なオーディオトラックを表すAudioTrackListオブジェクトを返す。

media.videoTracks

HTMLMediaElement/videoTracks

Support in all current engines.

Firefox🔰 33+Safari7+Chrome🔰 37+
Opera?Edge🔰 79+
Edge (Legacy)NoInternet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

メディアリソースで使用可能なビデオトラックを表す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 videoTracks attribute of a media element must return a live VideoTrackList object representing the video tracks available in the media element's media resource.

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.)

4.8.11.10.1 AudioTrackListおよびVideoTrackListオブジェクト

AudioTrackList

Support in all current engines.

Firefox🔰 33+Safari7+Chrome🔰 37+
Opera?Edge🔰 79+
Edge (Legacy)NoInternet Explorer10+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

VideoTrackList

Support in all current engines.

Firefox🔰 33+Safari7+Chrome🔰 37+
Opera?Edge🔰 79+
Edge (Legacy)NoInternet Explorer10+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

AudioTrackList

Support in all current engines.

Firefox🔰 33+Safari7+Chrome🔰 37+
Opera?Edge🔰 79+
Edge (Legacy)NoInternet Explorer10+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
caniuse.com table

AudioTrackListおよびVideoTrackListインターフェイスは、前節で定義された属性で使用される。

AudioTrack

Support in all current engines.

Firefox🔰 33+Safari8+Chrome🔰 37+
Opera?Edge🔰 79+
Edge (Legacy)NoInternet Explorer10+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

VideoTrack

Support in all current engines.

Firefox🔰 33+Safari7+Chrome🔰 37+
Opera?Edge🔰 79+
Edge (Legacy)NoInternet Explorer10+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
[Exposed=Window]
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;
};

[Exposed=Window]
interface AudioTrack {
  readonly attribute DOMString id;
  readonly attribute DOMString kind;
  readonly attribute DOMString label;
  readonly attribute DOMString language;
  attribute boolean enabled;
};

[Exposed=Window]
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;
};

[Exposed=Window]
interface VideoTrack {
  readonly attribute DOMString id;
  readonly attribute DOMString kind;
  readonly attribute DOMString label;
  readonly attribute DOMString language;
  attribute boolean selected;
};
media.audioTracks.length

AudioTrackList/length

Support in all current engines.

Firefox🔰 33+Safari7+Chrome🔰 37+
Opera?Edge🔰 79+
Edge (Legacy)NoInternet Explorer10+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
media.videoTracks.length

VideoTrackList/length

Support in all current engines.

Firefox🔰 33+Safari7+Chrome🔰 37+
Opera?Edge🔰 79+
Edge (Legacy)NoInternet Explorer10+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

リスト内のトラックの数を返す。

audioTrack = media.audioTracks[index]
videoTrack = media.videoTracks[index]

指定AudioTrackまたはVideoTrackオブジェクトを返す。

audioTrack = media.audioTracks.getTrackById(id)

AudioTrackList/getTrackById

Support in all current engines.

Firefox🔰 33+Safari7+Chrome🔰 37+
Opera?Edge🔰 79+
Edge (Legacy)NoInternet Explorer10+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
videoTrack = media.videoTracks.getTrackById(id)

VideoTrackList/getTrackById

Support in all current engines.

Firefox🔰 33+Safari7+Chrome🔰 37+
Opera?Edge🔰 79+
Edge (Legacy)NoInternet Explorer10+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

与えられた識別子とともにAudioTrackまたはVideoTrackオブジェクトを返す、または一切トラックがその識別子を持たない場合nullを返す。

audioTrack.id

AudioTrack/id

Support in all current engines.

Firefox🔰 33+Safari8+Chrome🔰 37+
Opera?Edge🔰 79+
Edge (Legacy)NoInternet Explorer10+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
videoTrack.id

VideoTrack/id

Support in all current engines.

Firefox🔰 33+Safari7+Chrome🔰 37+
Opera?Edge🔰 79+
Edge (Legacy)NoInternet Explorer10+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

指定されたトラックのIDを返す。フォーマットがメディアフラグメント構文をサポートし、かつgetTrackById()メソッドとともに使用できる場合、これは、フラグメントで使用できるIDである。

audioTrack.kind

AudioTrack/kind

Support in all current engines.

Firefox🔰 33+Safari8+Chrome🔰 37+
Opera?Edge🔰 79+
Edge (Legacy)NoInternet Explorer10+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
videoTrack.kind

VideoTrack/kind

Support in all current engines.

Firefox🔰 33+Safari7+Chrome🔰 37+
Opera?Edge🔰 79+
Edge (Legacy)NoInternet Explorer10+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

与えられたトラックに該当するカテゴリーを返す。可能なトラックカテゴリーは以下のとおり。

audioTrack.label

AudioTrack/label

Support in all current engines.

Firefox🔰 33+Safari8+Chrome🔰 37+
Opera?Edge🔰 79+
Edge (Legacy)NoInternet Explorer10+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
videoTrack.label

VideoTrack/label

Support in all current engines.

Firefox🔰 33+Safari7+Chrome🔰 37+
Opera?Edge🔰 79+
Edge (Legacy)NoInternet Explorer10+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

既知の場合、指定されたトラックのラベルを返し、そうでなければ空文字列を返す。

audioTrack.language

AudioTrack/language

Support in all current engines.

Firefox🔰 33+Safari8+Chrome🔰 37+
Opera?Edge🔰 79+
Edge (Legacy)NoInternet Explorer10+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
videoTrack.language

VideoTrack/language

Support in all current engines.

Firefox🔰 33+Safari7+Chrome🔰 37+
Opera?Edge🔰 79+
Edge (Legacy)NoInternet Explorer10+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

既知の場合、指定されたトラックの言語を返し、そうでなければ空の文字列を返す。

audioTrack.enabled [ = value ]

AudioTrack/enabled

Support in all current engines.

Firefox🔰 33+Safari8+Chrome🔰 37+
Opera?Edge🔰 79+
Edge (Legacy)NoInternet Explorer10+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

指定されたトラックがアクティブである場合、trueを返し、そうでなければfalseを返す。

トラックが有効かどうかを変更する設定が可能である。複数のオーディオトラックが同時に有効である場合、それらが混在している。

media.videoTracks.selectedIndex

VideoTrackList/selectedIndex

Support in all current engines.

Firefox🔰 33+Safari7+Chrome🔰 37+
Opera?Edge🔰 79+
Edge (Legacy)NoInternet Explorer10+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

もしあれば、現在選択されているトラックのインデックスを返し、そうでなければ-1を返す。

videoTrack.selected [ = value ]

VideoTrack/selected

Support in all current engines.

Firefox🔰 33+Safari7+Chrome🔰 37+
Opera?Edge🔰 79+
Edge (Legacy)NoInternet Explorer10+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

指定されたトラックがアクティブである場合、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 one of these objects 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 attribute getters 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 media fragment 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. [INBAND]

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.

For Ogg files, the Role header field of the track gives the relevant metadata. For DASH media resources, the Role element conveys the information. For WebM, only the FlagDefault element currently maps to a value. Sourcing In-band Media Resource Tracks from Media Containers into HTML has further details. [OGGSKELETONHEADERS] [DASH] [WEBMCG] [INBAND]

Return values for AudioTrack's kind and VideoTrack's kind
カテゴリー定義適用対象
"alternative"メイントラックへの可能な代替、たとえば、曲の別テイク(オーディオ)、または別アングル(ビデオ)。Audioとvideo。Ogg:"audio/alternate"または"video/alternate"、DASH:"main"なしの"alternate"および"commentary"ロール、またaudioに対して"dub"ロールなし(他のロールは無視)。
"captions"焼き付き字幕をもつ主ビデオトラックのバージョン。(レガシーコンテンツ用。新しいコンテンツはテキストトラックを使用する。)Videoのみ。DASH:"caption"および"main"ロールを同時に(他のロールは無視)。
"descriptions"ビデオトラックの音声解説。Audioのみ。Ogg:"audio/audiodesc"。
"main"主オーディオまたはビデオトラック。Audioとvideo。Ogg:"audio/main"または"video/main"、WebM:"FlagDefault"要素が設定される、DASH:"caption"、"subtitle"、および"dub"なしの"main"ロール(他のロールは無視)。
"main-desc"音声解説と混合された、主オーディオトラック。Audioのみ。MPEG-2 TSでのAC3 audio:bsmod=2とfull_svc=1。
"sign"オーディオトラックの手話通訳。Videoのみ。Ogg:"video/sign"。
"subtitles"焼き付き字幕をもつ主ビデオトラックのバージョン。(レガシーコンテンツ用。新しいコンテンツはテキストトラックを使用する。)Videoのみ。DASH:"subtitle"および"main"ロールを同時(他のロールは無視)。
"translation"主オーディオトラックの翻訳バージョン。Audioのみ。Ogg:"audio/dub"。DASH:"dub"および"main"ロールを同時(他のロールは無視)。
"commentary"主オーディオまたはビデオトラックのコメンタリ。たとえばディレクターのコメント。Audioとvideo。DASH:"main"ロールなしの"commentary"ロール(他のロールは無視)。
""(空文字列)明示的な種類がないか、トラックのメタデータで指定された種類は、ユーザーエージェントによって認識されない。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. [INBAND]

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. [INBAND]

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 media element task given the media element to fire an event named change at the AudioTrackList object.

An audio track that has no data for a particular position on the media timeline, or that does not exist at that position, must be interpreted as being silent at that point on the timeline.

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, and whenever the selected track in a VideoTrackList is unselected without a new track being selected in its stead, the user agent must queue a media element task given the media element to fire an event named change at the VideoTrackList object. This task must be queued before the task that fires the resize event, if any.

A video track that has no data for a particular position on the media timeline must be interpreted as being transparent black at that point on the timeline, with the same dimensions as the last frame before that position, or, if the position is before all the data for that track, the same dimensions as the first frame for that track. A track that does not exist at all at the current position must be treated as if it existed but had no data.

For instance, if a video has a track that is only introduced after one hour of playback, and the user selects that track then goes back to the start, then the user agent will act as if that track started at the start of the media resource but was simply transparent until one hour in.


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

AudioTrackList/change_event

Support in all current engines.

Firefox🔰 33+Safari7+Chrome🔰 37+
Opera?Edge🔰 79+
Edge (Legacy)NoInternet Explorer10+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

TextTrackList/change_event

Support in all current engines.

Firefox31+Safari7+Chrome33+
Opera?Edge79+
Edge (Legacy)18Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android4.4+Samsung Internet?Opera Android?

VideoTrackList/change_event

Support in all current engines.

Firefox🔰 33+Safari7+Chrome🔰 37+
Opera?Edge🔰 79+
Edge (Legacy)NoInternet Explorer10+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
change
onaddtrack

AudioTrackList/addtrack_event

Support in all current engines.

Firefox🔰 33+Safari7+Chrome🔰 37+
Opera?Edge🔰 79+
Edge (Legacy)NoInternet Explorer10+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

TextTrackList/addtrack_event

Support in all current engines.

Firefox31+Safari6+Chrome23+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer11
Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

VideoTrackList/addtrack_event

Support in all current engines.

Firefox🔰 33+Safari7+Chrome🔰 37+
Opera?Edge🔰 79+
Edge (Legacy)NoInternet Explorer10+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
addtrack
onremovetrack

AudioTrackList/removetrack_event

Support in all current engines.

Firefox🔰 33+Safari7+Chrome🔰 37+
Opera?Edge🔰 79+
Edge (Legacy)NoInternet Explorer10+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

TextTrackList/removetrack_event

Support in all current engines.

Firefox31+Safari7+Chrome33+
Opera20+Edge79+
Edge (Legacy)18Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android4.4+Samsung Internet?Opera Android20+

VideoTrackList/removetrack_event

Support in all current engines.

Firefox🔰 33+Safari7+Chrome🔰 37+
Opera?Edge🔰 79+
Edge (Legacy)NoInternet Explorer10+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
removetrack
4.8.11.10.2 宣言的に特定のオーディオとビデオトラックを選択する

audioTracksおよびvideoTracks属性はスクリプトを再生すべきそのトラックを選択できるが、メディアリソースURLフラグメントで特定のトラックを指定することにより、宣言的に特定のトラックを選択することも可能である。フラグメントの形式は、メディアリソースMIMEタイプに依存する。[RFC2046] [URL]

この例において、メディアフラグメント構文をサポートする形式を使用するビデオが、ラベル"Alternative"として代替アングルがデフォルトのビデオトラックの代わりに有効にされるように埋め込まれている。

<video src="myvideo#track=Alternative"></video>
4.8.11.11 時限テキストトラック
4.8.11.11.1 テキストトラックモデル

メディア要素は、メディア要素テキストトラックのリストとして知られ、関連したテキストトラックのグループを持つことができる。テキストトラックは以下のようにソートされる:

  1. ツリー順で、メディア要素track要素の子に対応するテキストトラック

  2. 古いものから順で、追加された順に、addTextTrack()メソッドを使用して追加された任意のテキストトラック

  3. メディアリソースの書式仕様によって定義された順序で、任意のメディアリソース固有のテキストトラックメディアリソースが内のデータに対応するテキストトラック)。

テキストトラックの構成要素は次のとおり:

テキストトラックの種類

これは、トラックがユーザーエージェントによって処理される方法を決定する。種類は文字列で表される。可能性のある文字列は次のとおり:

track要素に対応するテキストトラックの場合、トラックの種類は動的に変更できる。

ラベル

これは、ユーザーに対するトラックを特定するために意図する判読可能な文字列である。

track要素に対応するテキストトラックの場合、トラックのラベルは動的に変更できる。

テキストトラックのラベルが空の文字列である場合、ユーザーエージェントは自動的にそのユーザーインターフェイスで使用するためのテキストトラックの他のプロパティ(たとえばテキストトラックの種類とテキストトラックの言語など)から適切なラベルを生成すべきである。この自動生成されたラベルは、APIで公開されない。

帯域内のメタデータトラックディスパッチタイプ

これは、文書内の別のスクリプトに派遣できるようにするためにトラックを有効にする帯域内メタデータトラックに対するメディアリソースから抽出された文字列である。

たとえば、ウェブ上やウェブ固有の対話的な機能でのストリーミングによる従来のTV局の放送は、広告対象、ゲームショーの間のトリビアゲームデータ、スポーツゲームの間の選手の状態、食糧計画中のレシピ情報などに対するメタデータをもつテキストトラックを含むかもしれない。各プログラムが開始および終了すると、新しいトラックが追加されたりストリームから削除されたり、各トラックが追加されると、ユーザーエージェントはこの属性値を使用する専用のスクリプトモジュールにトラックを結合できる。

帯域内のメタデータテキストトラック以外では、帯域内のメタデータトラックディスパッチタイプは、空の文字列である。この値が異なるメディア形式に対してどのように設定されるかは、メディアリソース固有のテキストトラックを公開するための手順に記載される。

言語

これは、テキストトラックのキューの言語を表す文字列(BCP 47言語タグ)である。[BCP47]

track要素に対応するテキストトラックの場合、テキストトラックの言語は、動的に変更できる。

準備状態

以下のうちの1つをとる:

ロードされてない

テキストトラックのキューが得られていないことを示す。

ロード中

テキストトラックがロードされており、これまでに検出された致命的なエラーがないことを示す。追加のキューは、依然としてパーサーによってトラックに追加されるかもしれない。

ロードされた

テキストトラックが致命的なエラーなしでロードされたことを示す。

ロードに失敗した

Indicates that the text track was enabled, but when the user agent attempted to obtain it, this failed in some way (e.g., URL could not be parsed, network error, unknown text track format). キューの一部または全部は、おそらく欠損しているか、含まれていないだろう。

トラックが得られるように、テキストトラック準備状態を動的に変更する。

モード

以下のうちの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]

制限のないテキストトラックキューは、テキストトラックキューの終了時刻が正の無限大に設定されたテキストトラックキューである。アクティブな制限のないテキストトラックキューは、通常の再生中に現在の再生位置の通常の単調な増加によって非アクティブになることはできない(たとえば、終了時刻が発表されていないライブイベントのチャプターのためのメタデータキューなど)。

テキストトラックキューの開始時刻およびテキストトラックキューの終了時刻は負であってもよい。(ゼロ時間がアクティブにすることはできない前の全体のキュー、しかし、現在の再生位置は負になることはない。)

テキストトラックキューは、対応するTextTrackCueオブジェクト(より具体的には、たとえばWebVTTのキューがVTTCueインターフェイスを使用するような、TextTrackCueを継承したオブジェクト)を持つ。テキストトラックキューのメモリー内表現は、動的にこのTextTrackCue APIを通して変更できる。[WEBVTT]

テキストトラックキューは、テキストトラックキューの特定の種類に対して仕様で定義されている、テキストトラックレンダリングを更新するための規則に関連付けられる。これらの規則は、キューを表すオブジェクトがaddCue()メソッドを使用してTextTrackオブジェクトに追加されるときに特に使用される。

加えて、各テキストトラックキューは、動的な2つの情報を持つ:

アクティブフラグ

このフラグは、最初に設定を解除されなければならない。キューがアクティブまたは非アクティブになったとき、フラグは、イベントが適切に発火されるように、および右のキューがレンダリングされることを確認するために使用される。

テキストトラックキューがそのテキストトラックキューのテキストトラックリストから削除されるたびに、テキストトラック自体はそのメディア要素テキストトラックのリストから削除される、または無効に変更されるそのテキストトラックモードを持つたびに、かつメディア要素readyStateHAVE_NOTHINGに戻されるたびに、ユーザーエージェントは同期的にこのフラグを設定解除しなければならない。フラグが、関連付帯条件より前に表示されていたテキストトラック内の1つ以上のキューに対してこの方法で解除される場合、影響を受けるすべてのキューに対してフラグを解除した後、ユーザーエージェントは、これらのテキストトラックに属するテキストトラックのレンダリングを更新するための規則を適用しなければならない。たとえば、WebVTTに基づくテキストトラック用、WebVTTテキストトラックの表示を更新するための規則など。[WEBVTT]

表示状態

これは、一貫性のある位置にキューを保つために、レンダリングモデルの一部として使用される。これは最初は空でなければならない。テキストトラックキューのアクティブフラグが設定解除されるたびに、ユーザーエージェントはテキストトラックキューの表示状態を空にしなければならない。

メディア要素テキストトラックテキストトラックキューは、テキストトラックキュー順に互いに相対的に順序付けされ、以下のように決定される:メディア要素テキストトラックのリストに出現するそれらのテキストトラックとして同じ順序でソートされるグループをもつ、それらのテキストトラックで最初のグループのキュー:次に、各グループ内で、キューは、最も早いものの順に、その開始時刻でソートされなければならない。それから、同じ開始時刻を持つ任意のキューは、最も遅いものの順に、その終了時刻でソートされなければならず、最後に、同一の終了時刻を持つ任意のキューは、最も古いものの順に、それらがそれぞれのキューのテキストトラックリストに最後に追加した順にソートされなければならない。(たとえば、WebVTTファイル由来のキューに対して、最初にファイルに記載されていた順でなど。)[WEBVTT]

4.8.11.11.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. Details for some legacy formats can be found in Sourcing In-band Media Resource Tracks from Media Containers into HTML. [INBAND]

When a media resource contains data that the user agent recognizes 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 by the relevant specification. 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 chapters or 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 Name 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 Generic coding of moving pictures and associated audio information. 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 ASCII upper 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]
  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 an event named addtrack at the media element's textTracks attribute's TextTrackList object, using TrackEvent, with the track attribute initialized to the text track's TextTrack object.

4.8.11.11.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
Subtitlessubtitles
Captionscaptions
Descriptionsdescriptions
Chapters metadatachapters
Metadatametadata

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 media element task given the media element to fire an event named addtrack at the media element's textTracks attribute's TextTrackList object, using TrackEvent, with the track attribute initialized to the text track's TextTrack 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 media element task given the media element to fire an event named removetrack at the media element's textTracks attribute's TextTrackList object, using TrackEvent, with the track attribute initialized to the text track's TextTrack 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 media element task given the media element to run the following steps for the media element:

  1. If the element's blocked-on-parser flag is true, then return.

  2. If the element's did-perform-automatic-track-selection flag is true, then return.

  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. If there are any text tracks in the media element's list of text tracks whose text track kind is chapters or 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

  4. 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 return.

  3. If any of the text tracks in candidates have a text track mode set to showing, return.

  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, return, 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, then return.

  3. If the text track's track element does not have a media element as a parent, return.

  4. Run the remainder of these steps in parallel, 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 corsAttributeState be the state of the parent media element's crossorigin content attribute. Otherwise, let corsAttributeState be No CORS.

  9. End the synchronous section, continuing the remaining steps in parallel.

  10. If URL is not the empty string, then:

    1. Let request be the result of creating a potential-CORS request given URL, "track", and corsAttributeState, and with the same-origin fallback flag set.

    2. Set request's client to the track element's node document's relevant settings object.

    3. Set request's initiator type to "track".

    4. Fetch request.

    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 incrementally update the text track list of cues during these networking task source tasks, as each such task is run with whatever data has been received from the network).

    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. Implementers 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 specifications' 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 fetching fails for any reason (network error, the server returns an error code, CORS fails, etc.), or if URL is the empty string, then queue an element task on the DOM manipulation task source given the media element to first change the text track readiness state to failed to load and then fire an event named error at the track element.

    If fetching 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 XML requires be detected and reported to the application), then the task that is queued on the networking task source in which the aforementioned problem is found must change the text track readiness state to failed to load and fire an event named error at the track element.

    If fetching 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 an event named load at the track element.

    If, while fetching is ongoing, either:

    ...then the user agent must abort fetching, 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 an element task on the DOM manipulation task source given the track element that first changes the text track readiness state to failed to load and then fires an event named error at the track element.

  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 immediately 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.8.11.11.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. 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.

4.8.11.11.5 テキストトラックAPI

TextTrackList

Support in all current engines.

Firefox31+Safari6+Chrome23+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+
[Exposed=Window]
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

HTMLMediaElement/textTracks

Support in all current engines.

Firefox31+Safari6+Chrome23+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet1.0+Opera Android12.1+

メディア要素(たとえばtrack要素から)に関連付けられたテキストトラックの数を返す。これは、メディア要素テキストトラックのリストテキストトラックの数である。

media.textTracks[ n ]

メディア要素テキストトラックのリストn番目のテキストトラックを表すTextTrackオブジェクトを返す。

textTrack = media.textTracks.getTrackById(id)

TextTrackList/getTrackById

Support in all current engines.

Firefox31+Safari8+Chrome33+
Opera?Edge79+
Edge (Legacy)18Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

与えられた識別子とともにTextTrackオブジェクトを返す、または一切トラックがその識別子を持たない場合nullを返す。

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.

TextTrackList/length

Support in all current engines.

Firefox31+Safari6+Chrome23+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

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.


TextTrack

Support in all current engines.

Firefox31+Safari6+Chrome23+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android31+Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+
enum TextTrackMode { "disabled",  "hidden",  "showing" };
enum TextTrackKind { "subtitles",  "captions",  "descriptions",  "chapters",  "metadata" };

[Exposed=Window]
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;

  undefined addCue(TextTrackCue cue);
  undefined removeCue(TextTrackCue cue);

  attribute EventHandler oncuechange;
};
textTrack = media.addTextTrack(kind [, label [, language ] ])

メディア要素テキストトラックのリストに追加された新しいTextTrackオブジェクトを作成して返す。

textTrack.kind

TextTrack/kind

Support in all current engines.

Firefox31+Safari6+Chrome23+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

テキストトラックの種類の文字列を返す。

textTrack.label

TextTrack/label

Support in all current engines.

Firefox31+Safari6+Chrome23+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

存在する、または空の文字列(オブジェクトがユーザーに公開される場合、オブジェクトの他の属性からおそらく生成する必要があるカスタムラベルを示す)がある場合、テキストトラックのラベルを返す。

textTrack.language

TextTrack/language

Support in all current engines.

Firefox31+Safari6+Chrome23+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

テキストトラックの言語の文字列を返す。

textTrack.id

TextTrack/id

Support in all current engines.

Firefox31+Safari8+Chrome33+
Opera?Edge79+
Edge (Legacy)18Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

指定されたトラックのIDを返す。

帯域内トラックに対して、フォーマットがメディアフラグメント構文をサポートし、かつgetTrackById()メソッドとともに使用できる場合、これは、フラグメントで使用できるIDである。

track要素に対応するTextTrackオブジェクトに対して、これはtrack要素のIDである。

textTrack.inBandMetadataTrackDispatchType

TextTrack/inBandMetadataTrackDispatchType

Firefox31+Safari8+ChromeNo
Opera?EdgeNo
Edge (Legacy)NoInternet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

テキストトラック帯域内のメタデータトラックディスパッチタイプの文字列を返す。

textTrack.mode [ = value ]

TextTrack/mode

Support in all current engines.

Firefox31+Safari6+Chrome23+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android31+Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

以下のリストから文字列によって表される、テキストトラックモードを返す:

"disabled"

テキストトラック無効モード。

"hidden"

テキストトラック非表示モード。

"showing"

テキストトラック表示モード。

モードを変更する設定が可能である。

textTrack.cues

TextTrack/cues

Support in all current engines.

Firefox31+Safari6+Chrome23+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android31+Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

TextTrackCueListオブジェクトとして、キューのテキストトラックリストを返す。

textTrack.activeCues

TextTrack/activeCues

Support in all current engines.

Firefox31+Safari6+Chrome23+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android31+Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

TextTrackCueListオブジェクトとして、現在アクティブであるキューのテキストトラックリストから、テキストトラックキューを返す(つまり、現在の再生位置の前に開始し、その後で終了する)。

textTrack.addCue(cue)

TextTrack/addCue

Support in all current engines.

Firefox31+Safari6+Chrome23+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

textTrackキューのテキストトラックリストに指定されたキューを追加する。

textTrack.removeCue(cue)

TextTrack/removeCue

Support in all current engines.

Firefox31+Safari6+Chrome23+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

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 media element task given the media element to fire an event named addtrack at the media element's textTracks attribute's TextTrackList object, using TrackEvent, with the track attribute initialized to the new text track's TextTrack 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 media fragment 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.

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. そうでなければ、nullを返す。For each TextTrack object, when an object is returned, the same TextTrackCueList 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. そうでなければ、nullを返す。For each TextTrack object, when an object is returned, the same TextTrackCueList 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" DOMException.

  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 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 in the TextTrack object's text track's text track list of cues, then throw a "NotFoundError" DOMException.

  2. Remove cue from the 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,
// and have the browser ask them to stay
window.onbeforeunload = function (e) {
  playSound('kitten mew');
  e.preventDefault();
}

TextTrackCueList

Support in all current engines.

Firefox31+Safari6+Chrome23+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+
[Exposed=Window]
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.

TextTrackCueList/length

Support in all current engines.

Firefox31+Safari6+Chrome23+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

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.

TextTrackCueList/getCueById

Support in all current engines.

Firefox31+Safari6+Chrome23+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

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.


TextTrackCue

Support in all current engines.

Firefox31+Safari6+Chrome23+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+
[Exposed=Window]
interface TextTrackCue : EventTarget {
  readonly attribute TextTrack? track;

  attribute DOMString id;
  attribute double startTime;
  attribute unrestricted 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を返す。

設定可能である。

TextTrackCue/track

Support in all current engines.

Firefox31+Safari6+Chrome23+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

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.

TextTrackCue/id

Support in all current engines.

Firefox31+Safari6+Chrome23+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

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.

TextTrackCue/startTime

Support in all current engines.

Firefox31+Safari6+Chrome23+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

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.

TextTrackCue/endTime

Support in all current engines.

Firefox31+Safari6+Chrome23+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

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 or positive Infinity. On setting, if the new value is negative Infinity or a Not-a-Number (NaN) value, then throw a TypeError exception. Otherwise, the text track cue end time must be set to the new value. 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.

TextTrackCue/pauseOnExit

Support in all current engines.

Firefox31+Safari6+Chrome23+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

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.8.11.11.6 Event handlers for objects of the text track APIs

The following are the event handlers that (and their corresponding event handler event types) that must be supported, as event handler IDL attributes, by all objects implementing the TextTrackList interface:

イベントハンドラーイベントハンドラーイベント型
onchangechange
onaddtrackaddtrack
onremovetrackremovetrack

The following are the event handlers that (and their corresponding event handler event types) that must be supported, as event handler IDL attributes, by all objects implementing the TextTrack interface:

イベントハンドラーイベントハンドラーイベント型
oncuechange

TextTrack/cuechange_event

Support in all current engines.

Firefox31+Safari6+Chrome23+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+
cuechange

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 TextTrackCue interface:

イベントハンドラーイベントハンドラーイベント型
onenter

TextTrackCue/enter_event

Support in all current engines.

Firefox31+Safari6+Chrome23+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+
enter
onexit

TextTrackCue/exit_event

Support in all current engines.

Firefox31+Safari6+Chrome23+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+
exit
4.8.11.11.7 メタデータテキストトラックに対するベストプラクティス

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

テキストトラックは、対話的または拡張されたビューに対して、メディアデータに関連するデータを格納するために使用することができる。

たとえば、スポーツ中継を表示するページは、現在のスコアに関する情報を含むだろう。ロボット工学のコンテストがライブストリーミングされていたとする。画像は、以下のようにスコアと重ね合わせることができる:

ユーザーがビデオ内の任意のポイントをシークするたびに、スコア表示を正しくレンダリングさせるために、メタデータテキストトラックキューは、スコアに適切であるようにする必要がある。たとえば、上のフレームにおいて、試合数を与える試合の長さに続く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

...

ここで重要なことは、該当するイベントが適用する時間の長さに及ぶキューに情報が与えられることに注目することである。代わりに、スコアが変化するときに、スコアが0長さ(または非常に短い、ほぼ0長さ)のキューとして指定された場合、 たとえば05:11:17.198で"red+2"、05:11:25.912で"red+3"などといったときに、問題は発生する。主に、スクリプトが一切の通知を見逃されていないことを確認するためにキューのリスト全体を渡り歩く必要があるため、シークは実装がはるかに困難である。キューが短い場合、スクリプトが明確にキューをリッスンしない限り、スクリプトはキューがアクティブであることを見ることはない。

この方法でキューを使用する場合、著者は、現在の注釈を更新するためにcuechangeイベントを使用することを勧める。(具体的には、それはキューが変更されていない場合でも、仕事をすることを必要とするようにtimeupdateイベントを使用することがあまり適切でなく、そしてより重要なことは、timeupdateイベントがレート制限されているため、メタデータキューがアクティブになる場合、かつ表示が更新される場合、間のより高いレイテンシーを導入する。)

4.8.11.12 URLを通してトラックの種類を識別する

AudioTrack kindまたはVideoTrack kind IDL属性の戻り値を識別する、またはテキストトラックの種類を識別するためのURLを必要とするその他の仕様またはフォーマットは、about:html-kind URLを使用しなければならない。

4.8.11.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. fullscreen video or in an independent resizable window). Other controls may also be made available.

Even when the attribute is absent, however, user agents may provide controls to affect playback of the media resource (e.g. play, pause, seeking, track selection, 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, platform media keys, or a remote control. 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.

Features such as fast-forward or rewind must be implemented by only changing the playbackRate attribute (and not the defaultPlaybackRate attribute).

Seeking must be implemented in terms of seeking 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.

HTMLMediaElement/controls

Support in all current engines.

Firefox3.5+Safari3.1+Chrome3+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

The controls IDL attribute must reflect the content attribute of the same name.


media.volume [ = value ]

HTMLMediaElement/volume

Support in all current engines.

Firefox3.5+Safari3.1+Chrome3+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS🔰 3+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

0.0から1.0までの範囲の数字として、現在の再生音量を返す。ここで0.0は最小音量で1.0は最大音量である。

音量を変更する設定が可能である。

新しい値が0.0から1.0の範囲でない場合、"IndexSizeError" DOMExceptionを投げる。

media.muted [ = value ]

HTMLMediaElement/muted

Support in all current engines.

Firefox3.5+Safari3.1+Chrome3+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

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" DOMException 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 media element task given the media element to fire an event named volumechange at the media element. Then, if the media element is not allowed to play, the user agent must run the internal pause steps for the media element.

A user agent has an associated volume locked (a boolean). Its value is implementation-defined and determines whether the playback volume takes effect.

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 return the volume desired by the user.

  2. If the user agent's volume locked is true, then return the system volume.

  3. If the element's audio output is muted, then return zero.

  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. Return 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属性は、潜在的にユーザー設定を上書きし、メディアリソースに属するオーディオ出力のデフォルトの状態を制御する真偽属性である。

HTMLMediaElement/defaultMuted

Support in all current engines.

Firefox11+Safari6+Chrome15+
Opera12.1+Edge79+
Edge (Legacy)12+Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

The defaultMuted IDL attribute must reflect the muted content attribute.

この属性は動的効果(要素のデフォルトの状態のみを制御する)を持たない。

このビデオ(広告)は自動再生するが、ユーザーを悩ますのを避けるために音なしで再生して、ユーザーが音声をオンにできるようにする。ユーザーの操作なしで消音できない場合、ユーザーエージェントは映像を一時停止することができる。

<video src="adverts.cgi?kind=video" controls autoplay loop muted></video>
4.8.11.14 時間範囲

TimeRanges

Support in all current engines.

Firefox4+Safari3.1+Chrome6+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

TimeRangesインターフェイスを実装したオブジェクトは、時間の範囲(期間)のリストを表す。

[Exposed=Window]
interface TimeRanges {
  readonly attribute unsigned long length;
  double start(unsigned long index);
  double end(unsigned long index);
};
media.length

TimeRanges/length

Support in all current engines.

Firefox4+Safari3.1+Chrome6+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

オブジェクト内の範囲の数を返す。

time = media.start(index)

TimeRanges/start

Support in all current engines.

Firefox4+Safari3.1+Chrome6+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

指定されたインデックスをもつ範囲の開始時刻を返す。

インデックスが範囲外の場合"IndexSizeError" DOMExceptionを投げる。

time = media.end(index)

TimeRanges/end

Support in all current engines.

Firefox4+Safari3.1+Chrome6+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

指定されたインデックスをもつ範囲の終了時刻を返す。

インデックスが範囲外の場合"IndexSizeError" DOMExceptionを投げる。

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" DOMExceptions 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 normalized 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, and don't touch (adjacent ranges are folded into one bigger range). A range can be empty (referencing just a single moment in time), e.g. to indicate that only one frame is currently buffered in the case that the user agent has discarded the entire media resource except for the current frame, when a media element is paused.

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.8.11.15 TrackEventインターフェイス

TrackEvent

Support in all current engines.

Firefox27+Safari6+Chrome23+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer11
Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+
[Exposed=Window]
interface TrackEvent : Event {
  constructor(DOMString type, optional TrackEventInit eventInitDict = {});

  readonly attribute (VideoTrack or AudioTrack or TextTrack)? track;
};

dictionary TrackEventInit : EventInit {
  (VideoTrack or AudioTrack or TextTrack)? track = null;
};
event.track

TrackEvent/track

Support in all current engines.

Firefox27+Safari6+Chrome23+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer11
Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

イベントが関連するトラックオブジェクト(TextTrackAudioTrack、またはVideoTrack)を返す。

The track attribute must return the value it was initialized to. It represents the context information for the event.

4.8.11.16 イベントの概要

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

上記の処理モデルの一部として、メディア要素で以下のイベントが発火する:

イベント名インターフェイス発火条件前提条件
loadstart

HTMLMediaElement/loadstart_event

Support in all current engines.

Firefox6+Safari4+Chrome3+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS3+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+
Eventユーザーエージェントは、リソース選択アルゴリズムの一部として、メディアデータを探し始める。 networkStateNETWORK_LOADINGと等しい
progress

HTMLMediaElement/progress_event

Support in all current engines.

Firefox6+Safari3.1+Chrome3+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS3+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+
Eventユーザーエージェントは、メディアデータをフェッチしている。 networkStateNETWORK_LOADINGと等しい
suspend

HTMLMediaElement/suspend_event

Support in all current engines.

Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+
Eventユーザーエージェントは、意図的に現在のメディアデータをフェッチしていない。 networkStateNETWORK_IDLEと等しい
abort

HTMLMediaElement/abort_event

Support in all current engines.

Firefox9+Safari3.1+Chrome3+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS3+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+
Eventユーザーエージェントは、完全にダウンロードされる前にメディアデータのフェッチを停止するが、エラーによるものではない。errorは、コードMEDIA_ERR_ABORTEDをもつオブジェクトである。 networkStateは、ダウンロードが中止された時期に応じて、NETWORK_EMPTYまたはNETWORK_IDLEのいずれかに等しい。
error

HTMLMediaElement/error_event

Support in all current engines.

Firefox6+Safari3.1+Chrome3+
Opera11.6+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS3+Chrome Android?WebView Android?Samsung Internet?Opera Android12+
Eventメディアデータのフェッチ中にエラーが発生する、またはリソースの種類がサポートされていないメディアフォーマットである。errorは、コードMEDIA_ERR_NETWORK以上をもつオブジェクトである。 networkStateは、ダウンロードが中止された時期に応じて、NETWORK_EMPTYまたはNETWORK_IDLEのいずれかに等しい。
emptied

HTMLMediaElement/emptied_event

Support in all current engines.

Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+
Event以前NETWORK_EMPTY状態でなかったnetworkStateであるメディア要素が、その状態にちょうど切り替わった(ロード中に致命的なエラーが発生したため、リソース選択アルゴリズムがすでに実行している間にload()メソッドが呼び出されたためのいずれか)。networkStateNETWORK_EMPTYであり、すべてのIDL属性は、初期状態である。
stalled

HTMLMediaElement/stalled_event

Support in all current engines.

Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+
Eventユーザーエージェントは、メディアデータをフェッチしようとしているが、データが突発的に用意されない。networkStateNETWORK_LOADINGである。
loadedmetadata

HTMLMediaElement/loadedmetadata_event

Support in all current engines.

Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+
Eventユーザーエージェントは、ちょうどメディアリソーステキストトラックの準備の期間と寸法を決定した。readyStateは初期時間に対して新たにHAVE_METADATAに等しいかそれ以上である。
loadeddata

HTMLMediaElement/loadeddata_event

Support in all current engines.

Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+
Eventユーザーエージェントは、初期時間に対して現在の再生位置メディアデータをレンダリングできる。readyStateは、初期時間に対して新たにHAVE_CURRENT_DATA以上に増加した。
canplay

HTMLMediaElement/canplay_event

Support in all current engines.

Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+
Eventユーザーエージェントは、メディアデータの再生を再開できるが、再生を今すぐ開始されることになったかどうかを推定し、メディアリソースは、コンテンツの追加のバッファーリングに対して停止させることなく、終わりに現在の再生レートでレンダリングできなかった。readyStateは、新たにHAVE_FUTURE_DATA以上に増加した。
canplaythrough

HTMLMediaElement/canplaythrough_event

Support in all current engines.

Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+
Eventユーザーエージェントは、再生が今すぐ開始されることになったかどうかを推定し、メディアリソースは追加のバッファーリングに対して停止することなく、現在の再生レートの最後までのすべての方法でレンダリングできる。readyStateは最近のHAVE_ENOUGH_DATAに等しい。
playing

HTMLMediaElement/playing_event

Support in all current engines.

Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+
Event再生は、メディアデータの不足のために、一時停止または遅延された後に開始する準備ができている。readyState is newly greater than or equal to HAVE_FUTURE_DATA and paused is false, or paused is newly false and readyState is greater than or equal to HAVE_FUTURE_DATA. たとえこのイベントが発火したとしても、要素は依然として潜在的に再生されないかもしれない。たとえば、要素がユーザーとの対話のために一時停止または帯域内のコンテンツを一時停止される場合。
waiting

HTMLMediaElement/waiting_event

Support in all current engines.

Firefox6+Safari3.1+Chrome3+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+
Event次のフレームが利用できないため、再生が停止したが、ユーザーエージェントは、そのフレームがやがて利用できるようになると予想する。readyState is less than or equal to HAVE_CURRENT_DATA, and paused is false. seekingはtrueである、または現在の再生位置buffered内の領域のいずれかに含まれていないかのいずれか。再生がpausedがfalseでなしにその他の理由で停止することは可能であるが、それらの理由はこのイベントは発火しない(そしてそのような状況が解決するときに、別々のplayingイベントがどちらか発火しない):たとえば、再生が終了する、または再生がエラーにより停止される、または要素がユーザーとの対話のために一時停止または帯域内コンテンツのために一時停止している。
seeking

HTMLMediaElement/seeking_event

Support in all current engines.

Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+
Eventseeking IDL属性がtrueに変更され、かつユーザーエージェントが新しい位置を探し始めている。
seeked

HTMLMediaElement/seeked_event

Support in all current engines.

Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+
Eventcurrent playback positionが変更された後に、seeking IDL属性がfalseに変更された。
ended

HTMLMediaElement/ended_event

Support in all current engines.

Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+
Eventメディアリソースの終わりに達したため、再生が停止した。currentTimeは、メディアリソースの最後に等しく、endedはtrueである。
durationchange

HTMLMediaElement/durationchange_event

Support in all current engines.

Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+
Eventduration属性はちょうど更新された。
timeupdate

HTMLMediaElement/timeupdate_event

Support in all current engines.

Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+
Event現在の再生位置が、通常の再生の一部として、または、たとえば不連続的に、特に興味深い方法で変更された。
play

HTMLMediaElement/play_event

Support in all current engines.

Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+
Event要素はもはや一時停止でない。play()メソッドが返された後、またはautoplay属性を開始する再生を起こすときに発火した。pausedは、新たにfalseである。
pause

HTMLMediaElement/pause_event

Support in all current engines.

Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+
Event要素が一時停止された。pause()メソッドが返された後に発火した。pausedは、新たにtrueである。
ratechange

HTMLMediaElement/ratechange_event

Support in all current engines.

Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+
Event defaultPlaybackRateまたは playbackRate属性が更新されたばかりのいずれか。
resizeEventvideoWidthvideoHeight属性のいずれかまたは両方がちょうど更新されている。メディア要素video要素である。readyStateHAVE_NOTHINGでない。
volumechange

HTMLMediaElement/volumechange_event

Support in all current engines.

Firefox6+Safari3.1+Chrome3+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+
Eventvolume属性またはmuted属性のいずれかが変更された。関連する属性のセッターが返された後に発火した。

次のイベントはsource要素で発火する:

イベント名インターフェイス発火条件
errorEventメディアデータのフェッチ中にエラーが発生する、またはリソースの種類がサポートされていないメディアフォーマットである。

AudioTrackListVideoTrackList、およびTextTrackListオブジェクトで次のイベントが発火する:

イベント名インターフェイス発火条件
change

AudioTrackList/change_event

Support in all current engines.

Firefox🔰 33+Safari7+Chrome🔰 37+
Opera?Edge🔰 79+
Edge (Legacy)NoInternet Explorer10+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

TextTrackList/change_event

Support in all current engines.

Firefox31+Safari7+Chrome33+
Opera?Edge79+
Edge (Legacy)18Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android4.4+Samsung Internet?Opera Android?

VideoTrackList/change_event

Support in all current engines.

Firefox🔰 33+Safari7+Chrome🔰 37+
Opera?Edge🔰 79+
Edge (Legacy)NoInternet Explorer10+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
Eventトラックリストの1つ以上のトラックが有効か無効である。
addtrack

AudioTrackList/addtrack_event

Support in all current engines.

Firefox🔰 33+Safari7+Chrome🔰 37+
Opera?Edge🔰 79+
Edge (Legacy)NoInternet Explorer10+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

TextTrackList/addtrack_event

Support in all current engines.

Firefox31+Safari6+Chrome23+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer11
Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

VideoTrackList/addtrack_event

Support in all current engines.

Firefox🔰 33+Safari7+Chrome🔰 37+
Opera?Edge🔰 79+
Edge (Legacy)NoInternet Explorer10+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
TrackEventトラックはトラックリストに加えられている。
removetrack

AudioTrackList/removetrack_event

Support in all current engines.

Firefox🔰 33+Safari7+Chrome🔰 37+
Opera?Edge🔰 79+
Edge (Legacy)NoInternet Explorer10+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

TextTrackList/removetrack_event

Support in all current engines.

Firefox31+Safari7+Chrome33+
Opera20+Edge79+
Edge (Legacy)18Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android4.4+Samsung Internet?Opera Android20+

VideoTrackList/removetrack_event

Support in all current engines.

Firefox🔰 33+Safari7+Chrome🔰 37+
Opera?Edge🔰 79+
Edge (Legacy)NoInternet Explorer10+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
TrackEventトラックはトラックリストから削除されている。

以下のイベントは、TextTrackオブジェクトおよびtrack要素で発火する:

イベント名インターフェイス発火条件
cuechange

HTMLTrackElement/cuechange_event

Support in all current engines.

Firefox68+Safari10+Chrome32+
Opera19+Edge79+
Edge (Legacy)14+Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android4.4.3+Samsung Internet?Opera Android19+

TextTrack/cuechange_event

Support in all current engines.

Firefox31+Safari6+Chrome23+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+
Eventトラック内の1つ以上のキューがアクティブになるか、アクティブで停止している。

次のイベントは、track要素で発火する:

イベント名インターフェイス発火条件
errorEventテキストトラックフォーマットがサポートされないトラックデータまたはリソースの種類のフェッチ中にエラーが発生する。
loadEventトラックデータがフェッチされ、正常に処理される。

次のイベントは、TextTrackCueオブジェクトで発火する:

イベント名インターフェイス発火条件
enter

TextTrackCue/enter_event

Support in all current engines.

Firefox31+Safari6+Chrome23+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+
Eventキューはアクティブになっている。
exit

TextTrackCue/exit_event

Support in all current engines.

Firefox31+Safari6+Chrome23+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+
Eventキューはアクティブになるのを停止している。
4.8.11.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 traversable.

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 traversable 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. That information is therefore only exposed if the video resource uses CORS. The crossorigin attribute allows authors to enable CORS. [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.8.11.18 Best practices for authors using media elements

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

セットトップボックスや携帯電話などの小型機器上でオーディオおよびビデオを再生するリソースは多くの場合、限られたデバイスのハードウェアリソースによって制限される。たとえば、デバイスは3つの一斉ビデオのみをサポートするかもしれない。このような理由から、それらメディア要素が再生し終わったとき、要素への参照をすべて削除してガーベジコレクションを許可するのを非常に慎重に行うことによって、または要素のsrc属性を空文字列を設定することによってのいずれかで、メディア要素が保持するリソースを解放することがよい習慣である。srcObjectが設定されている場合、代わりにsrcObjectをnullに設定する。

同様に、再生速度が正確に1.0でない場合、ハードウェア、ソフトウェア、またはフォーマットの制限はビデオフレームに欠損や、オーディオに音途切れや無音をもたらすかもしれない。

4.8.11.19 Best practices for implementers 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-bitrate 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 bitrate 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 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.)