1. 4.8.9 video要素
      2. 4.8.10 audio要素
      3. 4.8.11 track要素
      4. 4.8.12 メディア要素
        1. 4.8.12.1 エラーコード
        2. 4.8.10.2 メディアリソースの場所
        3. 4.8.12.3 MIMEタイプ
        4. 4.8.12.4 ネットワーク状態
        5. 4.8.12.5 メディアリソースの読み込み
        6. 4.8.12.6 メディアリソースからのオフセット
        7. 4.8.12.7 準備状態
        8. 4.8.12.8 メディアリソースの再生
        9. 4.8.12.9 シーク
        10. 4.8.12.10 複数のメディアトラックを伴うメディアリソース
          1. 4.8.12.10.1 AudioTrackListおよびVideoTrackListオブジェクト
          2. 4.8.12.10.2 宣言的に特定のオーディオとビデオトラックを選択する
        11. 4.8.12.11 時限テキストトラック
          1. 4.8.12.11.1 テキストトラックモデル
          2. 4.8.12.11.2 帯域内テキストトラックの情報源
          3. 4.8.12.11.3 テキストトラックAPI
          4. 4.8.12.11.4 メタデータテキストトラックに対するベストプラクティス
        12. 4.8.12.12 URLを通してトラックの種類を識別する
        13. 4.8.12.13 ユーザーインターフェイス
        14. 4.8.12.14 時間範囲
        15. 4.8.12.15 TrackEventインターフェイス
        16. 4.8.12.16 イベントの概要
        17. 4.8.12.17 メディア要素を使用する著者に対するベストプラクティス

4.8.9 video要素

Element/video

Support in all current engines.

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

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

コンテンツはvideo要素内に提供されてもよい。レガシービデオプラグインが試す、またはビデオコンテンツにアクセスする方法について、これらのより古いブラウザーのユーザーにテキストを表示できるよう、videoをサポートしない、より古いウェブブラウザーを対象とする。

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

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

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

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

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

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

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

video . videoWidth

HTMLVideoElement/videoWidth

Support in all current engines.

Firefox4+SafariYesChromeYes
Opera10.5+EdgeYes
Edge (Legacy)12+Internet Explorer9+
Firefox Android4+Safari iOSYesChrome AndroidYesWebView AndroidYesSamsung InternetYesOpera AndroidYes
video . videoHeight

HTMLVideoElement/videoHeight

Support in all current engines.

Firefox4+SafariYesChromeYes
Opera10.5+EdgeYes
Edge (Legacy)12+Internet Explorer9+
Firefox Android4+Safari iOSYesChrome AndroidYesWebView AndroidYesSamsung InternetYesOpera AndroidYes

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

video要素は、次元属性をサポートする。

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

<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.10 audio要素

Element/audio

Support in all current engines.

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

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

コンテンツはaudio要素内に提供されてもよい。レガシービデオプラグインが試す、または音声コンテンツにアクセスする方法について、これらのより古いブラウザーのユーザーにテキストを表示できるよう、audioをサポートしない、より古いウェブブラウザーを対象とする。

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

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

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

audio = new Audio( [ url ] )

HTMLAudioElement/Audio

Support in all current engines.

Firefox3.5+SafariYesChromeYes
OperaYesEdgeYes
Edge (Legacy)12+Internet Explorer10+
Firefox Android4+Safari iOSYesChrome AndroidYesWebView AndroidYesSamsung InternetYesOpera AndroidYes

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

4.8.11 track要素

Element/track

Support in all current engines.

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

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

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

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

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

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

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

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

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

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

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オブジェクトを返す。

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

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

HTMLMediaElement/buffered

Support in all current engines.

Firefox4+Safari6+Chrome43+
OperaYesEdge79+
Edge (Legacy)12+Internet Explorer9+
Firefox AndroidYesSafari iOSYesChrome Android43+WebView Android43+Samsung Internet4.0+Opera AndroidYes

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

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

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

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

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

4.8.12.1 エラーコード
media . error

HTMLMediaElement/error

Support in all current engines.

Firefox3.5+Safari6+Chrome43+
OperaYesEdge79+
Edge (Legacy)12+Internet Explorer9+
Firefox AndroidYesSafari iOSYesChrome Android43+WebView Android43+Samsung Internet4.0+Opera AndroidYes

要素の現在のエラー状態を表すMediaErrorオブジェクトを返す。

エラーが無い場合nullを返す。

media . error . code

MediaError/code

Support in all current engines.

Firefox3.5+SafariYesChromeYes
OperaYesEdgeYes
Edge (Legacy)12+Internet Explorer9+
Firefox AndroidYesSafari iOSYesChrome AndroidYesWebView AndroidYesSamsung InternetYesOpera AndroidYes

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

media . error . message

MediaError/message

Firefox52+Safari?Chrome59+
Opera46+Edge79+
Edge (Legacy)NoInternet Explorer?
Firefox Android52+Safari iOS?Chrome Android59+WebView Android59+Samsung Internet7.0+Opera Android43+

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

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

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

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

HTMLMediaElement/crossOrigin

Support in all current engines.

Firefox22+Safari10+Chrome43+
OperaYesEdge79+
Edge (Legacy)13+Internet Explorer9+
Firefox AndroidYesSafari iOSYesChrome Android43+WebView Android43+Samsung Internet4.0+Opera AndroidYes

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

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

media . srcObject [ = source ]

HTMLMediaElement/srcObject

Support in one engine only.

Firefox🔰 42+Safari11+Chrome🔰 52+
Opera🔰 39+Edge🔰 79+
Edge (Legacy)12+Internet ExplorerNo
Firefox Android🔰 42+Safari iOS11+Chrome Android🔰 52+WebView Android🔰 52+Samsung Internet🔰 6.0+Opera Android🔰 41+

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

media . currentSrc

HTMLMediaElement/currentSrc

Support in all current engines.

Firefox3.5+Safari6+Chrome43+
OperaYesEdge79+
Edge (Legacy)12+Internet Explorer9+
Firefox AndroidYesSafari iOSYesChrome Android43+WebView Android43+Samsung Internet4.0+Opera AndroidYes

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

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

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

4.8.12.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+Safari6+ChromeYes
OperaYesEdgeYes
Edge (Legacy)12+Internet Explorer9+
Firefox AndroidYesSafari iOSYesChrome AndroidYesWebView AndroidYesSamsung InternetYesOpera AndroidYes

ユーザーエージェントはそれが与えられた型のメディアリソースを再生できる"maybe"、または"probably"方法に基づいて空の文字列(否定応答)を返す。

このスクリプトは、ユーザーエージェントが動的にvideo要素またはプラグインを使用するかどうかを決定する(架空の)新たなフォーマットをサポートしているかどうかをテストする。

<section id="video">
 <p><a href="playing-cats.nfv">Download video</a></p>
</section>
<script>
 var videoSection = document.getElementById('video');
 var videoElement = document.createElement('video');
 var support = videoElement.canPlayType('video/x-new-fictional-format;codecs="kittens,bunnies"');
 if (support != "probably" && "New Fictional Video Plugin" in navigator.plugins) {
   // not confident of browser support
   // but we have a plugin
   // so use plugin instead
   videoElement = document.createElement("embed");
 } else if (support == "") {
   // no support from browser and no plugin
   // do nothing
   videoElement = null;
 }
 if (videoElement) {
   while (videoSection.hasChildNodes())
     videoSection.removeChild(videoSection.firstChild);
   videoElement.setAttribute("src", "playing-cats.nfv");
   videoSection.appendChild(videoElement);
 }
</script>

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

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

HTMLMediaElement/networkState

Support in all current engines.

Firefox3.5+Safari6+Chrome43+
OperaYesEdge79+
Edge (Legacy)12+Internet Explorer9+
Firefox AndroidYesSafari iOSYesChrome AndroidYesWebView AndroidYesSamsung InternetYesOpera AndroidYes

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

NETWORK_EMPTY(数値0)
要素はまだ初期化されていない。すべての属性は、初期状態である。
NETWORK_IDLE(数値1)
要素は、リソースを選択しているが、実際にはこの時点でネットワークを使用していない。
NETWORK_LOADING(数値2)
ユーザーエージェントは、積極的にデータをダウンロードしようとしている。
NETWORK_NO_SOURCE(数値3)
要素は、まだ使用するリソースを見つけられなかった。
4.8.12.5 メディアリソースの読み込み
media . load()

HTMLMediaElement/load

Support in all current engines.

Firefox3.6+Safari6+Chrome1+
OperaYesEdge79+
Edge (Legacy)12+Internet Explorer?
Firefox Android4+Safari iOSYesChrome Android18+WebView Android1+Samsung Internet1.0+Opera AndroidYes

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


preload属性は列挙属性である。次の表は、キーワードと属性の状態を示す。1列目のキーワードは、キーワードと同じ行で2列目のセル内の状態に対応づける。メディアリソースがバッファーまたは再生されている場合でも属性を変更できる。下記の表の説明では、この点に留意して解釈されるべきである。

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

空文字列もまた妥当なキーワードであり、自動状態に対応づける。メタデータ状態はサーバーの負荷を軽減し、最適なユーザーエクスペリエンスを提供する妥協点として示唆されるけれども、属性の欠損値のデフォルトおよび不正値のデフォルトは、実装定義である。

一度ユーザーが再生を始めると、著者は、動的に"none"または"metadata"から"auto"に属性を切り替えるかもしれない。たとえば、多くのビデオをもつページ上で、要求されないが一度に動画積極的にダウンロードされる限り、これは多くの動画がダウンロードされるべきではないことを示すために使用されるかもしれない。

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


media . buffered

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

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

HTMLMediaElement/duration

Support in all current engines.

Firefox3.5+Safari6+Chrome43+
OperaYesEdge79+
Edge (Legacy)12+Internet Explorer9+
Firefox AndroidYesSafari iOSYesChrome Android43+WebView Android43+Samsung Internet4.0+Opera AndroidYes

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

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

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

media . currentTime [ = value ]

HTMLMediaElement/currentTime

Support in all current engines.

Firefox3.5+Safari6+Chrome43+
OperaYesEdge79+
Edge (Legacy)12+Internet Explorer9+
Firefox AndroidYesSafari iOSYesChrome Android43+WebView Android43+Samsung Internet4.0+Opera AndroidYes

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

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


loop属性は真偽属性であり、指定される場合、終端に達するとメディアリソースの先頭に戻ってシークするメディア要素であることを示す。

4.8.12.7 準備状態
media . readyState

HTMLMediaElement/readyState

Support in all current engines.

Firefox3.5+Safari6+Chrome43+
OperaYesEdge79+
Edge (Legacy)12+Internet Explorer9+
Firefox AndroidYesSafari iOSYesChrome Android43+WebView Android43+Samsung Internet4.0+Opera AndroidYes

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

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フレームだけ)。ページが"フレームごとの"ナビゲーションにインターフェイスを提供するときに、方向が本当に重要な単なる時間である。

メディア要素の準備状態は、これらの状態間を不連続にジャンプすることが可能である。たとえば、メディア要素の状態は、HAVE_CURRENT_DATAHAVE_FUTURE_DATA状態を経由せずにHAVE_METADATAからHAVE_ENOUGH_DATAに直接ジャンプできる。

autoplay属性は真偽属性である。存在する場合、ユーザーエージェントは、停止せずにすぐにメディアリソースの再生を自動的に開始する。

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

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

HTMLMediaElement/paused

Support in all current engines.

Firefox3.5+Safari6+Chrome43+
OperaYesEdge79+
Edge (Legacy)12+Internet Explorer9+
Firefox AndroidYesSafari iOSYesChrome AndroidYesWebView AndroidYesSamsung InternetYesOpera AndroidYes

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

media . ended

HTMLMediaElement/ended

Support in all current engines.

Firefox3.5+Safari6+Chrome43+
OperaYesEdge79+
Edge (Legacy)12+Internet Explorer9+
Firefox AndroidYesSafari iOSYesChrome Android43+WebView Android43+Samsung Internet4.0+Opera AndroidYes

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

media . defaultPlaybackRate [ = value ]

HTMLMediaElement/defaultPlaybackRate

Support in all current engines.

Firefox20+SafariYesChrome43+
OperaYesEdge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android20+Safari iOS?Chrome Android43+WebView Android43+Samsung Internet4.0+Opera Android?

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

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

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

media . playbackRate [ = value ]

HTMLMediaElement/playbackRate

Support in all current engines.

Firefox20+SafariYesChrome43+
OperaYesEdge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android20+Safari iOS?Chrome AndroidYesWebView AndroidYesSamsung InternetYesOpera Android?

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

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

media . played

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

media . play()

HTMLMediaElement/play

Support in all current engines.

Firefox3.5+Safari6+Chrome1+
Opera10.5+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android4+Safari iOS6+Chrome Android18+WebView Android1+Samsung Internet1.0+Opera Android11+

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

media . pause()

HTMLMediaElement/pause

Support in all current engines.

Firefox3.5+Safari6+ChromeYes
OperaYesEdgeYes
Edge (Legacy)12+Internet Explorer9+
Firefox AndroidYesSafari iOSYesChrome AndroidYesWebView AndroidYesSamsung InternetYesOpera AndroidYes

必要に応じて、メディアリソースを読み込み、paused属性をtrueに設定する。

4.8.12.9 シーク
media . seeking

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

media . seekable

HTMLMediaElement/seekable

Support in all current engines.

Firefox8+SafariYesChrome43+
OperaYesEdge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android8+Safari iOS?Chrome AndroidYesWebView AndroidYesSamsung InternetYesOpera Android?

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

media . fastSeek( time )

HTMLMediaElement/fastSeek

Firefox31+SafariYesChromeNo
Opera?EdgeNo
Edge (Legacy)NoInternet Explorer?
Firefox Android31+Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

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

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

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

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

media . audioTracks

HTMLMediaElement/audioTracks

Firefox🔰 33+SafariYesChromeNo
OperaYesEdgeNo
Edge (Legacy)NoInternet Explorer?
Firefox Android🔰 33+Safari iOSYesChrome AndroidNoWebView AndroidNoSamsung InternetNoOpera AndroidYes

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

media . videoTracks

HTMLMediaElement/videoTracks

Firefox🔰 33+SafariYesChromeNo
Opera?EdgeNo
Edge (Legacy)NoInternet Explorer?
Firefox Android🔰 33+Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

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

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

AudioTrackList

Support in all current engines.

Firefox🔰 33+Safari6.1+Chrome🔰 45+
Opera🔰 32+Edge🔰 79+
Edge (Legacy)NoInternet Explorer10+
Firefox Android🔰 33+Safari iOS7+Chrome Android🔰 45+WebView Android45+Samsung InternetNoOpera Android🔰 32+
caniuse.com table

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

media . audioTracks . length

AudioTrackList/length

Support in all current engines.

Firefox🔰 33+Safari6.1+Chrome🔰 45+
Opera🔰 32+Edge🔰 79+
Edge (Legacy)NoInternet Explorer10+
Firefox Android🔰 33+Safari iOS7+Chrome Android🔰 45+WebView Android45+Samsung InternetNoOpera Android🔰 32+
media . videoTracks . length

VideoTrackList/length

Support in all current engines.

Firefox🔰 33+Safari6.1+Chrome🔰 45+
Opera🔰 32+Edge🔰 79+
Edge (Legacy)NoInternet Explorer10+
Firefox Android🔰 33+Safari iOS7+Chrome Android🔰 45+WebView Android45+Samsung InternetNoOpera Android🔰 32+

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

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

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

audioTrack = media . audioTracks . getTrackById( id )

AudioTrackList/getTrackById

Support in all current engines.

Firefox🔰 33+Safari6.1+Chrome🔰 45+
Opera🔰 32+Edge🔰 79+
Edge (Legacy)NoInternet Explorer10+
Firefox Android🔰 33+Safari iOS7+Chrome Android🔰 45+WebView Android45+Samsung InternetNoOpera Android🔰 32+
videoTrack = media . videoTracks . getTrackById( id )

VideoTrackList/getTrackById

Support in all current engines.

Firefox🔰 33+Safari6.1+Chrome🔰 45+
Opera🔰 32+Edge🔰 79+
Edge (Legacy)NoInternet Explorer10+
Firefox Android🔰 33+Safari iOS7+Chrome Android🔰 45+WebView Android45+Samsung InternetNoOpera Android🔰 32+

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

audioTrack . id

AudioTrack/id

Support in all current engines.

Firefox🔰 33+Safari6.1+Chrome🔰 45+
Opera🔰 32+Edge🔰 79+
Edge (Legacy)NoInternet Explorer10+
Firefox Android🔰 33+Safari iOS7+Chrome Android🔰 45+WebView Android45+Samsung InternetNoOpera Android🔰 32+
videoTrack . id

VideoTrack/id

Support in all current engines.

Firefox🔰 33+Safari6.1+Chrome🔰 45+
Opera🔰 32+Edge🔰 79+
Edge (Legacy)NoInternet Explorer10+
Firefox Android🔰 33+Safari iOS7+Chrome Android🔰 45+WebView Android45+Samsung InternetNoOpera Android🔰 32+

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

audioTrack . kind

AudioTrack/kind

Support in all current engines.

Firefox🔰 33+Safari6.1+Chrome🔰 45+
Opera🔰 32+Edge🔰 79+
Edge (Legacy)NoInternet Explorer10+
Firefox Android🔰 33+Safari iOS7+Chrome Android🔰 45+WebView Android45+Samsung InternetNoOpera Android🔰 32+
videoTrack . kind

VideoTrack/kind

Support in all current engines.

Firefox🔰 33+Safari6.1+Chrome🔰 45+
Opera🔰 32+Edge🔰 79+
Edge (Legacy)NoInternet Explorer10+
Firefox Android🔰 33+Safari iOS7+Chrome Android🔰 45+WebView Android45+Samsung InternetNoOpera Android🔰 32+

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

audioTrack . label

AudioTrack/label

Support in all current engines.

Firefox🔰 33+Safari6.1+Chrome🔰 45+
Opera🔰 32+Edge🔰 79+
Edge (Legacy)NoInternet Explorer10+
Firefox Android🔰 33+Safari iOS7+Chrome Android🔰 45+WebView Android45+Samsung InternetNoOpera Android🔰 32+
videoTrack . label

VideoTrack/label

Support in all current engines.

Firefox🔰 33+Safari6.1+Chrome🔰 45+
Opera🔰 32+Edge🔰 79+
Edge (Legacy)NoInternet Explorer10+
Firefox Android🔰 33+Safari iOS7+Chrome Android🔰 45+WebView Android45+Samsung InternetNoOpera Android🔰 32+

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

audioTrack . language

AudioTrack/language

Support in all current engines.

Firefox🔰 33+Safari6.1+Chrome🔰 45+
Opera🔰 32+Edge🔰 79+
Edge (Legacy)NoInternet Explorer10+
Firefox Android🔰 33+Safari iOS7+Chrome Android🔰 45+WebView Android45+Samsung InternetNoOpera Android🔰 32+
videoTrack . language

VideoTrack/language

Support in all current engines.

Firefox🔰 33+Safari6.1+Chrome🔰 45+
Opera🔰 32+Edge🔰 79+
Edge (Legacy)NoInternet Explorer10+
Firefox Android🔰 33+Safari iOS7+Chrome Android🔰 45+WebView Android45+Samsung InternetNoOpera Android🔰 32+

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

audioTrack . enabled [ = value ]

AudioTrack/enabled

Support in all current engines.

Firefox🔰 33+Safari6.1+Chrome🔰 45+
Opera🔰 32+Edge🔰 79+
Edge (Legacy)NoInternet Explorer10+
Firefox Android🔰 33+Safari iOS7+Chrome Android🔰 45+WebView Android45+Samsung InternetNoOpera Android🔰 32+

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

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

media . videoTracks . selectedIndex

VideoTrackList/selectedIndex

Support in all current engines.

Firefox🔰 33+Safari6.1+Chrome🔰 45+
Opera🔰 32+Edge🔰 79+
Edge (Legacy)NoInternet Explorer10+
Firefox Android🔰 33+Safari iOS7+Chrome Android🔰 45+WebView AndroidNoSamsung InternetNoOpera Android🔰 32+

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

videoTrack . selected [ = value ]

VideoTrack/selected

Support in all current engines.

Firefox🔰 33+Safari6.1+Chrome🔰 45+
Opera🔰 32+Edge🔰 79+
Edge (Legacy)NoInternet Explorer10+
Firefox Android🔰 33+Safari iOS7+Chrome Android🔰 45+WebView Android45+Samsung InternetNoOpera Android🔰 32+

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

トラックが選択されるかどうかを変更する設定が可能である。0個または1つのいずれかのビデオトラックが選択される。前の1つが選択されている間に新しいトラックを選択すると、1つ前の選択を解除する。

AudioTrackkindおよびVideoTrackkindの値を返す
カテゴリー定義適用対象
"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。
4.8.12.10.2 宣言的に特定のオーディオとビデオトラックを選択する

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

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

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

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

  1. ツリー順で、メディア要素track要素の子に対応するテキストトラック
  2. 古いものから順で、追加された順に、addTextTrack()メソッドを使用して追加された任意のテキストトラック
  3. メディアリソースの書式仕様によって定義された順序で、任意のメディアリソース固有のテキストトラックメディアリソースが内のデータに対応するテキストトラック)。

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

テキストトラックの種類

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

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

ラベル

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

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

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

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

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

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

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

言語

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

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

準備状態

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

ロードされてない

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

ロード中

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

ロードされた

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

ロードに失敗した

テキストトラックは有効であるが、ユーザーエージェントがトラックを取得しようとしたとき、これが何らかの方法(たとえばURL解析できなかった、ネットワークエラー、未知のテキストトラック形式など)で失敗したことを示す。キューの一部または全部は、おそらく欠損しているか、含まれていないだろう。

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

モード

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

無効

テキストトラックがアクティブでないことを示す。DOM内のトラックを公開する目的以外では、ユーザーエージェントはテキストトラックを無視している。どのキューもアクティブでなく、どのイベントも発火せず、ユーザーエージェントは、トラックのキューを得ることを試みることはない。

非表示

テキストトラックがアクティブであるが、ユーザーエージェントは、積極的にキューを表示していないことを示す。どの試みもまだトラックのキューを得るために行われていない場合、ユーザーエージェントは、一瞬そのような試みを実行する。ユーザーエージェントは、キューがアクティブであるリストを維持しており、イベントはそれに応じて発火されている。

表示

テキストトラックがアクティブであることを示す。どの試みもまだトラックのキューを得るために行われていない場合、ユーザーエージェントは、一瞬そのような試みを実行する。ユーザーエージェントは、キューがアクティブであるリストを維持しており、イベントはそれに応じて発火されている。また、種類subtitlescaptionsであるテキストトラックで、キューは必要に応じてビデオにオーバーレイされている。種類descriptionsであるテキストトラックで、ユーザーエージェントは、非視覚的な方法でユーザーに使用可能なキューを作成している。そして、種類chaptersであるテキストトラックで、ユーザーエージェントは、ユーザーがキューを選択することによってメディアリソースの任意のポイントに移動することができるメカニズムをユーザーに利用可能にしている。

0個以上のキューリスト

テキストトラックのレンダリングを更新するための規則とともに、テキストトラックキューのリスト。たとえば、WebVTTの場合、WebVTTテキストトラックの表示を更新するための規則[WEBVTT]

テキストトラックのキューのリストは、テキスト·トラックまだロードされていないか、すでにロード中である、またはDOM操作に起因してのいずれかのために、動的に変更できる。

テキストトラックは、対応するTextTrackオブジェクトを持つ。


メディア要素は、最初は空でなければならない保留中のテキストトラックのリスト、最初はfalseでなければならないblocked-on-parserフラグ、最初はfalseでなければならないdid-perform-automatic-track-selectionフラグを持つ。

ユーザーエージェントがメディア要素に属する保留中のテキストトラックのリストを追加する必要がある場合、ユーザーエージェントは、保留中のテキストトラックのリストに要素のテキストトラックのリストで各テキストトラックを追加しなければならない。要素のテキストトラックのリストでテキストトラックモード無効であり、かつそのリストのテキストトラックの準備状態ロード中である。

track要素の親ノードが変更ときはいつでも、ユーザーエージェントは、要素が属する全保留中のテキストトラックのリストから該当するテキストトラックを削除しなければならない。

テキストトラックテキストトラックの準備状態ロードされるか、ロードに失敗するのいずれかに変更されるときはいつでも、ユーザーエージェントは、テキストトラックが属する全保留中のテキストトラックのリストから削除しなければならない。

メディア要素HTMLパーサーXMLパーサーによって作成された場合、ユーザーエージェントは、要素のblocked-on-parserフラグをtrueに設定しなければならない。メディア要素HTMLパーサーXMLパーサーオープン要素のスタックからポップされる場合、ユーザーエージェントは、自動テキストトラックの選択に対してユーザーの好みを尊重しなければならず、保留中のテキストトラックのリストを追加し、要素のblocked-on-parserフラグをfalseに設定する。

要素の保留中のテキストトラックのリストが空であり、要素のblocked-on-parserフラグがfalseの両方である場合、メディア要素テキストトラック準備ができている。

メディア要素は、最初に未設定でなければならない保留中のテキストトラック変更通知フラグを持つ。

メディア要素テキストトラックのリストに属するテキストトラックが、そのテキストトラックモード変更値を持つたびに、ユーザーエージェントは、メディア要素のために次の手順を実行しなければならない:

  1. メディア要素保留中のテキストトラック変更通知フラグが設定される場合、返す。

  2. メディア要素保留中のテキストトラック変更通知フラグを設定する。

  3. Queue a media element task given the media element to run these steps:

    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.12.11.2 帯域内テキストトラックの情報源

メディアリソース固有のテキストトラックメディアリソースで見つけられるデータに対応するテキストトラックである。

4.8.12.11.3 テキストトラックAPI
media . textTracks . length

HTMLMediaElement/textTracks

Support in all current engines.

FirefoxYesSafariYesChromeYes
OperaYesEdgeYes
Edge (Legacy)12+Internet Explorer?
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

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

media . textTracks[ n ]

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

textTrack = media . textTracks . getTrackById( id )

TextTrackList/getTrackById

Support in all current engines.

FirefoxYesSafari6+ChromeYes
Opera?EdgeYes
Edge (Legacy)18Internet Explorer?
Firefox Android?Safari iOS?Chrome AndroidYesWebView AndroidYesSamsung InternetYesOpera Android?

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


textTrack = media . addTextTrack( kind [, label [, language ] ] )

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

textTrack . kind

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

textTrack . label

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

textTrack . language

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

textTrack . id

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

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

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

textTrack . inBandMetadataTrackDispatchType

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

textTrack . mode [ = value ]

TextTrack/mode

Support in all current engines.

Firefox31+Safari6+Chrome18+
Opera15+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android31+Safari iOS7+Chrome Android18+WebView Android4.4+Samsung Internet1.0+Opera AndroidNo

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

"disabled"

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

"hidden"

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

"showing"

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

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

textTrack . cues

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

textTrack . activeCues

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

textTrack . addCue( cue )

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

textTrack . removeCue( cue )

textTrackキューのテキストトラックリストから指定されたキューを削除する。

この例において、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();
}

cuelist . length

リスト内のキューの数を返す。

cuelist[index]

リスト内のインデックスindexを持つテキストトラックキューを返す。キューは、テキストトラックキュー順にソートされる。

cuelist . getCueById( id )

テキストトラックキュー識別子idを持つ(テキストトラックキュー順で)最初のテキストトラックキューを返す。

いずれのキューも指定された識別子を持たない場合、または引数が空の文字列である場合、nullを返す。


cue . track

存在する場合、このテキストトラックキューが属するTextTrackオブジェクトを返し、そうでなければnullを返す。

cue . id [ = value ]

テキストトラックキュー識別子を返す。

設定可能である。

cue . startTime [ = value ]

秒単位で、テキストトラックキューの開始時刻を返す。

設定可能である。

cue . endTime [ = value ]

秒単位で、テキストトラックキューの終了時刻を返す。

設定可能である。

cue . pauseOnExit [ = value ]

テキスト·トラック·キューpause-on-exitフラグが設定される場合trueを返し、そうでなければfalseを返す。

設定可能である。

4.8.12.11.4 メタデータテキストトラックに対するベストプラクティス

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

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

ユーザーがビデオ内の任意のポイントをシークするたびに、スコア表示を正しくレンダリングさせるために、メタデータテキストトラックキューは、スコアに適切であるようにする必要がある。たとえば、上のフレームにおいて、試合数を与える試合の長さに続く1つのキュー、青の同盟のスコアが変化するまで続く1つのキュー、そして赤の同盟のスコアが変化するまで続く1つのキューがおそらくあるだろう。ビデオがちょうどライブイベントのストリームである場合、右下における時間は、キューに基づくよりもむしろ、おそらく自動的に現在のビデオの時間から派生になる。しかし、ビデオが単なるハイライトだった場合、それはまたキューに記載されるかもしれない。

次は、このようなものの断片がWebVTTファイル内のようになるものを示す:

WEBVTT

...

05:10:00.000 --> 05:12:15.000
matchtype:qual
matchnumber:37

...

05:11:02.251 --> 05:11:17.198
red:78

05:11:03.672 --> 05:11:54.198
blue:66

05:11:17.198 --> 05:11:25.912
red:80

05:11:25.912 --> 05:11:26.522
red:83

05:11:26.522 --> 05:11:26.982
red:86

05:11:26.982 --> 05:11:27.499
red:89

...

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

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

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

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

4.8.12.13 ユーザーインターフェイス

controls属性は真偽属性である。存在する場合、著者がスクリプト化されたコントローラーを提供しておらず、ユーザーエージェントに独自のコントロールセットを提供したいと考えていることを示す。

media . volume [ = value ]

HTMLMediaElement/volume

Support in all current engines.

Firefox3.5+Safari6+Chrome43+
OperaYesEdge79+
Edge (Legacy)12+Internet Explorer9+
Firefox AndroidYesSafari iOSYesChrome AndroidYesWebView AndroidYesSamsung InternetYesOpera AndroidYes

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+Safari6+Chrome43+
OperaYesEdge79+
Edge (Legacy)12+Internet Explorer9+
Firefox AndroidYesSafari iOSYesChrome AndroidYesWebView AndroidYesSamsung InternetYesOpera AndroidYes

volume属性を上書きし、音声がミュートである場合trueを返し、volume属性が無視される場合、falseを返す。

オーディオがミュートであるかどうかを変更する設定が可能である。

メディア要素muted属性は、潜在的にユーザー設定を上書きし、メディアリソースに属するオーディオ出力のデフォルトの状態を制御する真偽属性である。

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

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

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

TimeRanges

Support in all current engines.

FirefoxYesSafariYesChromeYes
OperaYesEdgeYes
Edge (Legacy)12+Internet ExplorerYes
Firefox AndroidYesSafari iOSYesChrome AndroidYesWebView AndroidYesSamsung InternetYesOpera AndroidYes

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

media . length

TimeRanges/length

Support in all current engines.

FirefoxYesSafariYesChromeYes
OperaYesEdgeYes
Edge (Legacy)12+Internet ExplorerYes
Firefox AndroidYesSafari iOSYesChrome AndroidYesWebView AndroidYesSamsung InternetYesOpera AndroidYes

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

time = media . start(index)

TimeRanges/start

Support in all current engines.

FirefoxYesSafariYesChromeYes
OperaYesEdgeYes
Edge (Legacy)12+Internet ExplorerYes
Firefox AndroidYesSafari iOSYesChrome AndroidYesWebView AndroidYesSamsung InternetYesOpera AndroidYes

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

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

time = media . end(index)

TimeRanges/end

Support in all current engines.

FirefoxYesSafariYesChromeYes
OperaYesEdgeYes
Edge (Legacy)12+Internet ExplorerYes
Firefox AndroidYesSafari iOSYesChrome AndroidYesWebView AndroidYesSamsung InternetYesOpera AndroidYes

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

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

4.8.12.15 TrackEventインターフェイス

TrackEvent

Support in one engine only.

Firefox?Safari?ChromeYes
Opera?EdgeYes
Edge (Legacy)NoInternet Explorer?
Firefox Android?Safari iOS?Chrome AndroidYesWebView AndroidYesSamsung InternetYesOpera Android?
event . track

TrackEvent/track

Support in one engine only.

Firefox?Safari?ChromeYes
Opera?EdgeYes
Edge (Legacy)NoInternet Explorer?
Firefox Android?Safari iOS?Chrome AndroidYesWebView AndroidYesSamsung InternetYesOpera Android?

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

4.8.12.16 イベントの概要

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

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

HTMLMediaElement/loadstart_event

FirefoxYesSafari?ChromeYes
OperaYesEdgeYes
Edge (Legacy)NoInternet Explorer?
Firefox AndroidYesSafari iOS?Chrome AndroidYesWebView AndroidYesSamsung InternetYesOpera Android?
Eventユーザーエージェントは、リソース選択アルゴリズムの一部として、メディアデータを探し始める。 networkStateNETWORK_LOADINGと等しい
progress

HTMLMediaElement/progress_event

FirefoxYesSafari?ChromeYes
OperaYesEdgeYes
Edge (Legacy)NoInternet Explorer?
Firefox AndroidYesSafari iOS?Chrome AndroidYesWebView AndroidYesSamsung InternetYesOpera Android?
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 Android4+Safari iOSYesChrome Android18+WebView AndroidYesSamsung Internet1.0+Opera AndroidYes
Eventユーザーエージェントは、意図的に現在のメディアデータをフェッチしていない。 networkStateNETWORK_IDLEと等しい
abort

HTMLMediaElement/abort_event

FirefoxYesSafari?ChromeYes
OperaYesEdgeYes
Edge (Legacy)NoInternet Explorer?
Firefox AndroidYesSafari iOS?Chrome AndroidYesWebView AndroidYesSamsung InternetYesOpera Android?
Eventユーザーエージェントは、完全にダウンロードされる前にメディアデータのフェッチを停止するが、エラーによるものではない。errorは、コードMEDIA_ERR_ABORTEDをもつオブジェクトである。 networkStateは、ダウンロードが中止された時期に応じて、NETWORK_EMPTYまたはNETWORK_IDLEのいずれかに等しい。
error

HTMLMediaElement/error_event

FirefoxYesSafari?ChromeYes
OperaYesEdgeYes
Edge (Legacy)NoInternet Explorer?
Firefox AndroidYesSafari iOS?Chrome AndroidYesWebView AndroidYesSamsung InternetYesOpera Android?
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 Android4+Safari iOSYesChrome Android18+WebView AndroidYesSamsung Internet1.0+Opera AndroidYes
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 Android4+Safari iOSYesChrome Android18+WebView AndroidYesSamsung Internet1.0+Opera AndroidYes
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 Android4+Safari iOSYesChrome Android18+WebView AndroidYesSamsung Internet1.0+Opera AndroidYes
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 Android4+Safari iOSYesChrome Android18+WebView AndroidYesSamsung Internet1.0+Opera AndroidYes
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 Android4+Safari iOSYesChrome Android18+WebView AndroidYesSamsung Internet1.0+Opera AndroidYes
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 Android4+Safari iOSYesChrome Android18+WebView AndroidYesSamsung Internet1.0+Opera AndroidYes
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 Android4+Safari iOSYesChrome Android18+WebView AndroidYesSamsung Internet1.0+Opera AndroidYes
Event再生は、メディアデータの不足のために、一時停止または遅延された後に開始する準備ができている。readyStateが新たに等しいまたはHAVE_FUTURE_DATAを超えており、pausedはfalseであり、またはpausedが新たにfalseであり、readyStateが等しいか、またはHAVE_FUTURE_DATAより大きい。たとえこのイベントが発火したとしても、要素は依然として潜在的に再生されないかもしれない。たとえば、要素がユーザーとの対話のために一時停止または帯域内のコンテンツを一時停止される場合。
waiting

HTMLMediaElement/waiting_event

Support in all current engines.

FirefoxYesSafariYesChromeYes
OperaYesEdgeYes
Edge (Legacy)12+Internet Explorer9+
Firefox AndroidYesSafari iOSYesChrome AndroidYesWebView AndroidYesSamsung InternetYesOpera AndroidYes
Event次のフレームが利用できないため、再生が停止したが、ユーザーエージェントは、そのフレームがやがて利用できるようになると予想する。readyStateが等しいか、またはHAVE_CURRENT_DATA未満であり、pausedは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 Android4+Safari iOSYesChrome Android18+WebView AndroidYesSamsung Internet1.0+Opera AndroidYes
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 Android4+Safari iOSYesChrome Android18+WebView AndroidYesSamsung Internet1.0+Opera AndroidYes
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 Android4+Safari iOSYesChrome Android18+WebView AndroidYesSamsung Internet1.0+Opera AndroidYes
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 Android4+Safari iOSYesChrome Android18+WebView AndroidYesSamsung Internet1.0+Opera AndroidYes
Eventduration属性はちょうど更新された。
timeupdate

HTMLMediaElement/timeupdate_event

Support in all current engines.

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

HTMLMediaElement/play_event

Support in all current engines.

Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android4+Safari iOSYesChrome Android18+WebView AndroidYesSamsung Internet1.0+Opera AndroidYes
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 Android4+Safari iOSYesChrome Android18+WebView AndroidYesSamsung Internet1.0+Opera AndroidYes
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 Android4+Safari iOSYesChrome Android18+WebView AndroidYesSamsung Internet1.0+Opera AndroidYes
Event defaultPlaybackRateまたは playbackRate属性が更新されたばかりのいずれか。
resizeEventvideoWidthvideoHeight属性のいずれかまたは両方がちょうど更新されている。メディア要素video要素である。readyStateHAVE_NOTHINGでない。
volumechange

HTMLMediaElement/volumechange_event

Support in all current engines.

FirefoxYesSafariYesChromeYes
OperaYesEdgeYes
Edge (Legacy)12+Internet Explorer9+
Firefox AndroidYesSafari iOSYesChrome AndroidYesWebView AndroidYesSamsung InternetYesOpera AndroidYes
Eventvolume属性またはmuted属性のいずれかが変更された。関連する属性のセッターが返された後に発火した。

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

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

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

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

AudioTrackList/change_event

Support in all current engines.

Firefox🔰 33+Safari6.1+Chrome🔰 45+
Opera🔰 32+Edge🔰 79+
Edge (Legacy)NoInternet Explorer10+
Firefox Android🔰 33+Safari iOS7+Chrome Android🔰 45+WebView Android45+Samsung InternetNoOpera Android🔰 32+

TextTrackList/change_event

Support in one engine only.

Firefox?Safari?ChromeYes
Opera?EdgeYes
Edge (Legacy)NoInternet Explorer?
Firefox Android?Safari iOS?Chrome AndroidYesWebView AndroidYesSamsung InternetYesOpera Android?

VideoTrackList/change_event

Support in all current engines.

Firefox🔰 33+Safari6.1+Chrome🔰 45+
Opera🔰 32+Edge🔰 79+
Edge (Legacy)NoInternet Explorer10+
Firefox Android🔰 33+Safari iOS7+Chrome Android🔰 45+WebView Android45+Samsung InternetNoOpera Android🔰 32+
Eventトラックリストの1つ以上のトラックが有効か無効である。
addtrack

AudioTrackList/addtrack_event

Support in all current engines.

Firefox🔰 33+Safari6.1+Chrome🔰 45+
Opera🔰 32+Edge🔰 79+
Edge (Legacy)NoInternet Explorer10+
Firefox Android🔰 33+Safari iOS7+Chrome Android🔰 45+WebView Android45+Samsung InternetNoOpera Android🔰 32+

TextTrackList/addTrack_event

Support in one engine only.

Firefox?Safari?ChromeYes
Opera?EdgeYes
Edge (Legacy)NoInternet Explorer?
Firefox Android?Safari iOS?Chrome AndroidYesWebView AndroidYesSamsung InternetYesOpera Android?

VideoTrackList/addtrack_event

Support in all current engines.

Firefox🔰 33+Safari6.1+Chrome🔰 45+
Opera🔰 32+Edge🔰 79+
Edge (Legacy)NoInternet Explorer10+
Firefox Android🔰 33+Safari iOS7+Chrome Android🔰 45+WebView Android45+Samsung InternetNoOpera Android🔰 32+
TrackEventトラックはトラックリストに加えられている。
removetrack

AudioTrackList/removetrack_event

Support in all current engines.

Firefox🔰 33+Safari6.1+Chrome🔰 45+
Opera🔰 32+Edge🔰 79+
Edge (Legacy)NoInternet Explorer10+
Firefox Android🔰 33+Safari iOS7+Chrome Android🔰 45+WebView Android45+Samsung InternetNoOpera Android🔰 32+

TextTrackList/removeTrack_event

Support in one engine only.

Firefox?Safari?ChromeYes
Opera?EdgeYes
Edge (Legacy)NoInternet Explorer?
Firefox Android?Safari iOS?Chrome AndroidYesWebView AndroidYesSamsung InternetYesOpera Android?

VideoTrackList/removetrack_event

Support in all current engines.

Firefox🔰 33+Safari6.1+Chrome🔰 45+
Opera🔰 32+Edge🔰 79+
Edge (Legacy)NoInternet Explorer10+
Firefox Android🔰 33+Safari iOS7+Chrome Android🔰 45+WebView Android45+Samsung InternetNoOpera Android🔰 32+
TrackEventトラックはトラックリストから削除されている。

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

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

HTMLTrackElement/cuechange_event

Support in all current engines.

Firefox68+SafariYesChromeYes
Opera?EdgeYes
Edge (Legacy)NoInternet ExplorerNo
Firefox Android68+Safari iOSYesChrome AndroidYesWebView AndroidYesSamsung InternetYesOpera Android?

TextTrack/cuechange_event

Support in all current engines.

Firefox31+SafariYesChromeYes
Opera?EdgeYes
Edge (Legacy)12+Internet Explorer?
Firefox Android31+Safari iOS?Chrome AndroidYesWebView AndroidYesSamsung InternetYesOpera AndroidNo
Eventトラック内の1つ以上のキューがアクティブになるか、アクティブで停止している。

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

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

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

イベント名インターフェイス発火条件
enterEventキューはアクティブになっている。
exitEventキューはアクティブになるのを停止している。
4.8.12.17 メディア要素を使用する著者に対するベストプラクティス

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

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