Edition for Web Developers — Last Updated 17 December 2024
video
要素audio
要素track
要素TrackEvent
インターフェイスvideo
要素Support in all current engines.
controls
属性を持つ場合:インタラクティブコンテンツ。src
属性を持つ場合:0個以上のtrack
要素で、次に透過的だが、media要素子孫をもたない。src
属性を持たない場合:0個以上のsource
要素で、次に0個以上のtrack
で、次に透過的だが、media要素子孫をもたない。src
— リソースのアドレスcrossorigin
— 要素が生成元をまたいだ要求を処理する方法poster
— 先にビデオプレイバックを見せるポスターフレームpreload
— メディアリソースがどの程度バッファーリングに必要になるかのヒントautoplay
— ページが読み込まれるときにメディアリソースが自動的に開始可能というヒントplaysinline
— 要素の再生領域内のビデオコンテンツを表示することをユーザーエージェントに勧めるloop
— メディアリソースをループするかどうかmuted
— デフォルトでメディアリソースをミュートするかどうかcontrols
— ユーザーエージェントのコントロールを表示するwidth
— 横の次元height
— 縦の次元HTMLVideoElement
を使用する。video
要素は字幕付きのビデオやムービー、オーディオファイルを再生するために使用される。
コンテンツはvideo
要素内で提供されてもよい。これは、video
をサポートしない古いウェブブラウザーを対象としているため、これらのより古いブラウザーのユーザーに対して、ビデオコンテンツへのアクセス方法を通知するテキストを表示できる。
特に、このコンテンツはアクセシビリティの懸念に対処するためのものではない。弱視、目の見えない、難聴、耳が聞こえない、および他の身体または認知障害を持つ人々へのビデオコンテンツにアクセシブルにするための、さまざまな機能が利用可能である。字幕は、ビデオストリームの埋め込みまたはtrack
要素を使用する外部ファイルとしてのいずれかを提供できる。手話トラックは、ビデオストリームに埋め込むことができる。オーディオ説明は、track
要素を使用して参照され、ユーザーエージェントによって音声に合成されるWebVTTファイルを使用してビデオストリームにまたはテキスト形式で埋め込むことができる。WebVTTはまた、章のタイトルを提供するために使用することができる。むしろ一切メディア要素を使用しないだろうユーザーの場合、複写物またはその他のテキストの選択肢は単にvideo
要素の近くに文でそれらにリンクすることによって提供されうる。[WEBVTT]
video
要素はmedia要素であり、そのメディアデータがおそらく関連する音声データをもつ、表面上は映像データである。
src
、crossorigin
、preload
、autoplay
、loop
、muted
およびcontrols
は、すべてのメディア要素に共通の属性である。
poster
属性はビデオデータが利用可能でない間に、ユーザーエージェントが表示できる画像ファイルのURLを与える。属性が存在する場合、潜在的にスペースで囲まれた妥当な空でないURLを含まなければならない。
poster
属性によって与えられた画像、poster frameは、ユーザーに映像がどのようなものであるかのテーマを与える映像の代表フレーム(通常は最初の空白でないフレームの1つ)であることを意図する。
playsinline
属性は、真偽属性である。存在する場合、この属性は、代わりにフルスクリーン表示されているまたは独立したサイズ変更可能なウィンドウで、要素の再生領域が制限される、映像がデフォルトで文書で"インライン"に表示されるべきユーザーエージェントへのヒントとして提供する。
playsinline
属性の不在は、映像がデフォルトでフルスクリーンに表示されることを意味するものではない。実際、ほとんどのユーザーエージェントは、デフォルトですべてのビデオインラインを再生することを選択し、そのようなユーザーエージェントでplaysinline
属性は効果がない。
video.videoWidth
video.videoHeight
これらの属性は、ビデオの自然次元を返す、または次元が不明な場合は0を返す。
この例は、ビデオを正常に再生するために障害が発生したことを検出する様子を示す:
< 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 >
audio
要素Support in all current engines.
controls
属性を持つ場合:インタラクティブコンテンツ。controls
属性を持つ場合:パルパブルコンテンツ。src
属性を持つ場合:0個以上のtrack
要素で、次に透過的だが、media要素子孫をもたない。src
属性を持たない場合:0個以上のsource
要素で、次に0個以上のtrack
で、次に透過的だが、media要素子孫をもたない。src
— リソースのアドレスcrossorigin
— 要素が生成元をまたいだ要求を処理する方法preload
— メディアリソースがどの程度バッファーリングに必要になるかのヒントautoplay
— ページが読み込まれるときにメディアリソースが自動的に開始可能というヒントloop
— メディアリソースをループするかどうかmuted
— デフォルトでメディアリソースをミュートするかどうかcontrols
— ユーザーエージェントのコントロールを表示するHTMLAudioElement
を使用する。コンテンツはaudio
要素内で提供されてもよい。これは、audio
をサポートしない古いウェブブラウザーを対象としているため、これらのより古いブラウザーのユーザーに対して、オーディオコンテンツへのアクセス方法を通知するテキストを表示できる。
特に、このコンテンツはアクセシビリティの懸念に対処するためのものではない。聴覚障害、または他の身体または認知障害を持つ人々へのオーディオコンテンツにアクセシブルにするための、さまざまな機能が利用可能である。字幕や手話の映像が使用可能な場合、video
要素は、ユーザーが視覚的な選択肢を有効にすることができ、オーディオを再生するaudio
要素の代わりに使用できる。章タイトルは、track
要素とWebVTTファイルを使用して、ナビゲーションを補助するために提供できる。そして当然のことながら、複写物またはその他のテキストの選択肢は単にaudio
要素の近くに文でそれらにリンクすることによって提供されうる。[WEBVTT]
audio
要素は、メディアデータが表面上は音声データであるmedia要素である。
src
、crossorigin
、preload
、autoplay
、loop
、muted
およびcontrols
は、すべてのメディア要素に共通の属性である。
track
要素Support in all current engines.
kind
— テキストトラックの種類src
— リソースのアドレスsrclang
— テキストトラックの言語label
— ユーザー可視ラベルdefault
— 他のテキストトラックがより適切でない場合にトラックを作動させるHTMLTrackElement
を使用する。track
要素は、著者がメディア要素に対して明示的に外部調節されたテキストトラックを指定できる。この要素は、自分自身で何かを表すものではない。
kind
属性は、次のキーワードと状態を持つ列挙属性である:
キーワード | 状態 | 概要 |
---|---|---|
subtitles | Subtitles | 音声が利用可能な場合に適するが、理解できない(ユーザーがメディアリソースのオーディオトラックの言語を理解していないためなど)対話の翻字または翻訳。ビデオにオーバーレイする。 |
captions | Captions | 音声が利用できないか、はっきりと聞こえない場合適した(たとえば、無言である、周囲の騒音によってかき消される、またはユーザーが聴覚障害者であるので)、対話の翻字または翻訳、音響効果、関連する音楽の合図、およびその他の関連オーディオ情報。ビデオにオーバーレイし、難聴者に対して適切に表示される。 |
descriptions | Descriptions | 映像コンポーネントが不明瞭、利用できない、または使用可能でない(たとえばユーザーが運転中に画面なしでアプリケーションと情報をやりとりするため、またはユーザーが盲目であるため)ときの音声合成に対して意図される、メディアリソースのビデオコンポーネントのテキスト記述。オーディオとして合成される。 |
chapters | Chapters metadata | トラックは、スクリプトから使用するためのものである。ユーザーエージェントによって表示されない。 |
metadata | Metadata |
この属性の欠損値のデフォルトは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
このビデオは、複数言語の字幕を持つ:
< 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
属性によって与えられる。)
HTMLMediaElementオブジェクト(この仕様ではaudio
およびvideo
)は、単にメディア要素として知られている。
メディア要素の属性、src
、crossorigin
、preload
、autoplay
、mediagroup
、muted
、controls
は、すべてのメディア要素に適用する。これらは、この節で定義される。
メディア要素は、音声データ、または映像と音声のデータをユーザーに示すために使用される。この節は音声や映像に対するメディア要素にも同様に適用されるので、これは、この節においてメディアデータと見なされる。用語メディアリソースは、たとえば完全なビデオファイル、または完全なオーディオファイルなど、メディアデータの完全な集合を参照するために使用される。
メディアリソースは、originに関連付けられており、これは "none
"、"multiple
"、"rewritten
"、またはoriginのいずれかである。最初は"none
"に設定される。
メディアリソースは、複数のオーディオおよびビデオトラックを持つことができる。メディア要素の目的に対して、メディアリソースの映像データは、イベントループがステップ1に到達するときに要素のvideoTracks
属性で(もしあれば)与えられるように現在選択されるトラックのみであり、かつメディアリソースの音声データは、イベントループがステップ1に到達するときに(もしあれば)要素のaudioTracks
属性によって与えられるすべての現在の有効なトラックは、混合の結果である。
audio
とvideo
の両方の要素は、オーディオとビデオの両方に使用できる。2つの間の主な違いは、video
要素が持つのに対して、audio
要素は、視覚コンテンツ(ビデオやキャプションなど)に対する再生領域を持たないことだけである。
Support in all current engines.
media.error
要素の現在のエラー状態を表すMediaError
オブジェクトを返す。
エラーが無い場合nullを返す。
media.error.code
下記のリストから、現在のエラーのエラーコードを返す。
media.error.message
発生したエラー条件に関する有益な診断メッセージを返す。メッセージおよびメッセージの形式は、一般に異なるユーザーエージェント間で一様ではない。そのようなメッセージが利用可能でない場合、空の文字列が返される。
MEDIA_ERR_ABORTED
(数値1)MEDIA_ERR_NETWORK
(数値2)MEDIA_ERR_DECODE
(数値3)MEDIA_ERR_SRC_NOT_SUPPORTED
(数値4)src
属性またはassigned media provider objectで示されるメディアリソースは適さなかった。メディア要素のsrc
コンテンツ属性は、表示するメディアリソース(ビデオ、オーディオ)のURLを与える。属性が存在する場合、潜在的にスペースで囲まれた妥当な空でないURLを含まなければならない。
itemprop
がメディア要素要素で指定される場合、src
属性も指定されなければならない。
メディア要素上のcrossorigin
コンテンツ属性は、CORS設定属性である。
メディアプロバイダーオブジェクトは、メディアリソースを表すことができるオブジェクトであり、URLから分離する。MediaStream
オブジェクト、MediaSource
オブジェクト、およびBlob
オブジェクトは、すべてメディアプロバイダーオブジェクトである。
media.srcObject [ = source ]
メディア要素にメディアプロバイダーオブジェクトを割り当てさせる。
media.currentSrc
メディアリソースを指定する3つの方法、srcObject
IDL属性、src
属性、およびsource
要素がある。IDL属性が優先され、コンテンツ属性、要素の順に続く。
メディアリソースは、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.
(type)ユーザーエージェントはそれが与えられた型のメディアリソースを再生できる"maybe"、または"probably"方法に基づいて空の文字列(否定応答)を返す。
このスクリプトは、ユーザエージェントが、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
属性は、ユーザーエージェントがレンダリングできないフォーマットを使用するリソースのダウンロードを回避できる。
media.networkState
下記のリストのコードから、要素に対するネットワーク活動の現在の状態を返す。
NETWORK_EMPTY
(数値0)NETWORK_IDLE
(数値1)NETWORK_LOADING
(数値2)NETWORK_NO_SOURCE
(数値3)media.load()
要素をリセットさせ、最初から新しいメディアリソースの選択と読み込みを開始させる。
preload
属性は、次のキーワードと状態を持つ列挙属性である:
キーワード | 状態 | 概要 |
---|---|---|
auto | Automatic | ユーザーエージェントが、楽観的に全体のリソースのダウンロードを含め、サーバーへのリスクなしに、最初のユーザーのニーズを置くことができるというユーザーエージェントへのヒント。 |
(空文字列) | ||
none | None | 著者がメディアリソースを必要とすることをユーザーに期待しない、またはサーバーが不要なトラフィックを最小限にしたいのいずれかのユーザーエージェントへのヒント。バッファーリングはとにかく開始する(たとえばユーザーが"play"に当たる)場合、この状態は、メディアリソースを実際にダウンロードする方法に関して積極的にヒントを提供しない。 |
metadata | Metadata | 著者がメディアリソースを必要とするとユーザーに期待しないが、リソースのメタデータ(寸法、トラックリスト、期間など)フェッチし、そしておそらく最初の数フレームが合理的であるユーザーエージェントへのヒント。ユーザーエージェントが正確にメタデータ以上のものをフェッチしない場合、典型的には、一部のフレームも同様に得られ、おそらくHAVE_CURRENT_DATA またはHAVE_FUTURE_DATA になるにもかかわらず、メディア要素はHAVE_METADATA に設定されるreadyState 属性に終わる。メディアリソースが再生するとき、たとえばメディアデータが依然として一貫した再生を維持し最も遅い可能性のレートで得られるようにダウンロードを絞ることが示唆するような、帯域幅の不足を考慮すべきであるというユーザーエージェントへのヒント。 |
この属性の欠損値のデフォルトおよび不正値のデフォルトは、実装定義であるが、Metadata状態はサーバーの負荷を軽減し、最適なユーザーエクスペリエンスを提供する妥協点として提案される。
メディアリソースがバッファリングまたは再生されている場合でも属性を変更できる。上記の表の説明では、この点に留意して解釈されるべきである。
一度ユーザーが再生を始めると、著者は、動的に"none
"または"metadata
"から"auto
"に属性を切り替えるかもしれない。たとえば、多くのビデオをもつページ上で、要求されないが一度に動画が積極的にダウンロードされる限り、これは多くの動画がダウンロードされるべきではないことを示すために使用されるかもしれない。
(メディアを再生する場合、preload
属性によって与えられるヒントにかかわらず、自然に最初のバッファーを持つので)autoplay
属性はpreload
属性を上書きできる。しかし、両方を含めることはエラーではない。
media.buffered
ユーザーエージェントがバッファーリングしたメディアリソースの範囲を表すTimeRanges
オブジェクトを返す。
media.duration
メディアリソースの始点がゼロ時間であると仮定して、秒単位でメディアリソースの長さを返す。
期間が利用できない場合はNaNを返す。
際限のないストリームに対してInfinityを返す。
media.currentTime [ = value ]
秒単位で、公式の再生位置を返す。
指定時間にシークするために、設定可能である。
loop
属性は真偽属性であり、指定される場合、終端に達するとメディアリソースの先頭に戻ってシークするメディア要素であることを示す。
media.readyState
以下のリストのコードから、現在の再生位置をレンダリングに対する要素の現在の状態を表す値を返す。
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
状態について説明されるすべての条件が満たされ、加えて、以下のいずれかの条件が真である:
playbackRate
で前進するなら、メディアリソースの最後に到達する前に利用可能なデータに追いつかないだろう。実際には、HAVE_METADATA
とHAVE_CURRENT_DATA
との違いはごくわずかである。canvas
にvideo
要素を描画するときのみ、本当に違いが関連している。ここで、何かが描画される(HAVE_CURRENT_DATA
以上)場合と何も描画されない(HAVE_METADATA
以下)場合を区別する。同様に、HAVE_CURRENT_DATA
(現在のフレームのみ)とHAVE_FUTURE_DATA
(少なくともこのフレームと次)の差は、無視できる(極端には、1フレームだけ)。ページが"フレームごとの"ナビゲーションにインターフェイスを提供するときに、方向が本当に重要な単なる時間である。
メディア要素の準備状態は、これらの状態間を不連続にジャンプすることが可能である。たとえば、メディア要素の状態は、HAVE_CURRENT_DATA
とHAVE_FUTURE_DATA
状態を経由せずにHAVE_METADATA
からHAVE_ENOUGH_DATA
に直接ジャンプできる。
autoplay
属性は真偽属性である。存在する場合、ユーザーエージェントは、停止せずにすぐにメディアリソースの再生を自動的に開始する。
著者は、望まれない場合、たとえばスクリーンリーダーを使用する場合、ユーザーが自動再生を上書きできるよう、自動再生を誘発するためのスクリプトを使用するよりも、autoplay
属性を使用するように促される。著者はまた、一切自動再生の動作を使用することなく、代わりに明示的に再生を開始するためのユーザーに対してユーザーエージェントが待機しないよう考慮することが推奨される。
media.paused
再生が一時停止された場合はtrueを返し、そうでなければfalseを返す。
media.ended
再生がメディアリソースの終わりに達した場合trueを返す。
media.defaultPlaybackRate [ = value ]
メディアリソースを介してユーザーが早送りまたは巻き戻ししない場合に対し、再生のデフォルト率を返す。
再生のデフォルト率を変更する設定が可能である。
デフォルト率は再生に直接影響を与えないが、ユーザーが早送りモードに切り替えた場合、モードが通常の再生モードに戻ったときに、再生速度が再生のデフォルト率に戻されることが期待される。
media.playbackRate [ = value ]
現在の再生率を返す。ここで1.0が通常の速度である。
再生速度を変更する設定が可能である。
media.preservesPitch
playbackRate
が1.0でないときにピッチ保持アルゴリズムが使用されている場合、trueを返す。デフォルト値はtrueである。
playbackRate
に応じてメディアリソースのオーディオピッチを上下に変更するために、falseに設定できる。これは、美的およびパフォーマンス上の理由で役立つ。
media.played
ユーザーエージェントが再生したメディアリソースの範囲を表すTimeRanges
オブジェクトを返す。
media.play()
必要に応じてメディアリソースを読み込んで再生を開始し、paused
属性をfalseに設定する。再生が終了した場合、最初からリソースを再スタートする。
media.pause()
media.seeking
ユーザーエージェントが現在シークしている場合にtrueを返す。
media.seekable
ユーザーエージェントがシーク可能であるメディアリソースの範囲を表すTimeRanges
オブジェクトを返す。
media.fastSeek(time)
高速化のため、できるだけ早く近くに与えられたtimeをシークする。(正確な時刻を求めるために、currentTime
属性を使用する。)
メディアリソースがロードされない場合、これは何もしない。
メディアリソース は、複数の埋め込みオーディオおよびビデオトラックを持つことができる。たとえば、主ビデオトラックとオーディオトラックに加えて、メディアリソースは、外国語吹き替えのやりとり、監督の解説、音声による説明、代替アングル、または手話のオーバーレイを持つかもしれない。
media.audioTracks
メディアリソースで使用可能なオーディオトラックを表すAudioTrackList
オブジェクトを返す。
media.videoTracks
メディアリソースで使用可能なビデオトラックを表すVideoTrackList
オブジェクトを返す。
AudioTrackList
およびVideoTrackList
オブジェクトSupport in all current engines.
Support in all current engines.
Support in all current engines.
AudioTrackList
およびVideoTrackList
インターフェイスは、前節で定義された属性で使用される。
media.audioTracks.length
media.videoTracks.length
リスト内のトラックの数を返す。
audioTrack = media.audioTracks[index]
videoTrack = media.videoTracks[index]
指定AudioTrack
またはVideoTrack
オブジェクトを返す。
audioTrack = media.audioTracks.getTrackById(id)
videoTrack = media.videoTracks.getTrackById(id)
与えられた識別子とともにAudioTrack
またはVideoTrack
オブジェクトを返す、または一切トラックがその識別子を持たない場合nullを返す。
audioTrack.id
videoTrack.id
指定されたトラックのIDを返す。フォーマットがメディアフラグメント構文をサポートし、かつgetTrackById()
メソッドとともに使用できる場合、これは、フラグメントで使用できるIDである。
audioTrack.kind
videoTrack.kind
与えられたトラックに該当するカテゴリーを返す。可能なトラックカテゴリーは以下のとおり。
audioTrack.label
videoTrack.label
既知の場合、指定されたトラックのラベルを返し、そうでなければ空文字列を返す。
audioTrack.language
videoTrack.language
既知の場合、指定されたトラックの言語を返し、そうでなければ空の文字列を返す。
audioTrack.enabled [ = value ]
指定されたトラックがアクティブである場合、trueを返し、そうでなければfalseを返す。
トラックが有効かどうかを変更する設定が可能である。複数のオーディオトラックが同時に有効である場合、それらが混在している。
media.videoTracks.selectedIndex
もしあれば、現在選択されているトラックのインデックスを返し、そうでなければ-1を返す。
videoTrack.selected [ = value ]
指定されたトラックがアクティブである場合、trueを返し、そうでなければfalseを返す。
トラックが選択されるかどうかを変更する設定が可能である。0個または1つのいずれかのビデオトラックが選択される。前の1つが選択されている間に新しいトラックを選択すると、1つ前の選択を解除する。
カテゴリー | 定義 | 適用対象 | 例 |
---|---|---|---|
"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。 |
audioTracks
およびvideoTracks
属性はスクリプトを再生すべきそのトラックを選択できるが、メディアリソースのURLのフラグメントで特定のトラックを指定することにより、宣言的に特定のトラックを選択することも可能である。フラグメントの形式は、メディアリソースのMIMEタイプに依存する。[RFC2046] [URL]
この例において、メディアフラグメント構文をサポートする形式を使用するビデオが、ラベル"Alternative"として代替アングルがデフォルトのビデオトラックの代わりに有効にされるように埋め込まれている。
< video src = "myvideo#track=Alternative" ></ video >
メディア要素は、メディア要素のテキストトラックのリストとして知られ、関連したテキストトラックのグループを持つことができる。テキストトラックは以下のようにソートされる:
古いものから順で、追加された順に、addTextTrack()
メソッドを使用して追加された任意のテキストトラック。
メディアリソースの書式仕様によって定義された順序で、任意のメディアリソース固有のテキストトラック(メディアリソースが内のデータに対応するテキストトラック)。
テキストトラックの構成要素は次のとおり:
これは、トラックがユーザーエージェントによって処理される方法を決定する。種類は文字列で表される。可能性のある文字列は次のとおり:
subtitles
captions
descriptions
chapters
metadata
これは、ユーザーに対するトラックを特定するために意図する判読可能な文字列である。
track
要素に対応するテキストトラックの場合、トラックのラベルは動的に変更できる。
テキストトラックのラベルが空の文字列である場合、ユーザーエージェントは自動的にそのユーザーインターフェイスで使用するためのテキストトラックの他のプロパティ(たとえばテキストトラックの種類とテキストトラックの言語など)から適切なラベルを生成すべきである。この自動生成されたラベルは、APIで公開されない。
これは、文書内の別のスクリプトに派遣できるようにするためにトラックを有効にする帯域内メタデータトラックに対するメディアリソースから抽出された文字列である。
たとえば、ウェブ上やウェブ固有の対話的な機能でのストリーミングによる従来のTV局の放送は、広告対象、ゲームショーの間のトリビアゲームデータ、スポーツゲームの間の選手の状態、食糧計画中のレシピ情報などに対するメタデータをもつテキストトラックを含むかもしれない。各プログラムが開始および終了すると、新しいトラックが追加されたりストリームから削除されたり、各トラックが追加されると、ユーザーエージェントはこの属性値を使用する専用のスクリプトモジュールにトラックを結合できる。
帯域内のメタデータテキストトラック以外では、帯域内のメタデータトラックディスパッチタイプは、空の文字列である。この値が異なるメディア形式に対してどのように設定されるかは、メディアリソース固有のテキストトラックを公開するための手順に記載される。
これは、テキストトラックのキューの言語を表す文字列(BCP 47言語タグ)である。[BCP47]
track
要素に対応するテキストトラックの場合、テキストトラックの言語は、動的に変更できる。
以下のうちの1つをとる:
テキストトラックのキューが得られていないことを示す。
テキストトラックがロードされており、これまでに検出された致命的なエラーがないことを示す。追加のキューは、依然としてパーサーによってトラックに追加されるかもしれない。
テキストトラックが致命的なエラーなしでロードされたことを示す。
テキストトラックは有効であるが、ユーザーエージェントがトラックを取得しようとしたとき、これが何らかの方法(たとえばURLが解析できなかった、ネットワークエラー、未知のテキストトラック形式など)で失敗したことを示す。キューの一部または全部は、おそらく欠損しているか、含まれていないだろう。
以下のうちの1つをとる:
テキストトラックがアクティブでないことを示す。DOM内のトラックを公開する目的以外では、ユーザーエージェントはテキストトラックを無視している。どのキューもアクティブでなく、どのイベントも発火せず、ユーザーエージェントは、トラックのキューを得ることを試みることはない。
テキストトラックがアクティブであるが、ユーザーエージェントは、積極的にキューを表示していないことを示す。どの試みもまだトラックのキューを得るために行われていない場合、ユーザーエージェントは、一瞬そのような試みを実行する。ユーザーエージェントは、キューがアクティブであるリストを維持しており、イベントはそれに応じて発火されている。
テキストトラックがアクティブであることを示す。どの試みもまだトラックのキューを得るために行われていない場合、ユーザーエージェントは、一瞬そのような試みを実行する。ユーザーエージェントは、キューがアクティブであるリストを維持しており、イベントはそれに応じて発火されている。また、種類がsubtitles
やcaptions
であるテキストトラックで、キューは必要に応じてビデオにオーバーレイされている。種類がdescriptions
であるテキストトラックで、ユーザーエージェントは、非視覚的な方法でユーザーに使用可能なキューを作成している。そして、種類がchapters
であるテキストトラックで、ユーザーエージェントは、ユーザーがキューを選択することによってメディアリソースの任意のポイントに移動することができるメカニズムをユーザーに利用可能にしている。
テキストトラックのレンダリングを更新するための規則とともに、テキストトラックキューのリスト。たとえば、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の両方である場合、メディア要素のテキストトラックは準備ができている。
各メディア要素は、最初に未設定でなければならない保留中のテキストトラック変更通知フラグを持つ。
メディア要素のテキストトラックのリストに属するテキストトラックが、そのテキストトラックモード変更値を持つたびに、ユーザーエージェントは、メディア要素のために次の手順を実行しなければならない:
メディア要素の保留中のテキストトラック変更通知フラグが設定される場合、返す。
メディア要素の保留中のテキストトラック変更通知フラグを設定する。
メディア要素を指定してメディア要素タスクをキューに入れ、次の手順を実行する:
メディア要素の保留中のテキストトラック変更通知フラグを設定解除する。
メディア要素のtextTracks
属性のTextTrackList
オブジェクトでchange
に名付けられるイベントを発火する。
メディア要素のショーポスターフラグが設定されていない場合、手順の時間行進を実行する。
このセクションに記載されるタスクのタスクソースは、DOM操作タスクソースである。
テキストトラックキューは、特定の時刻に表示され別の時刻に消滅するテキストに字幕やキャプションに対するインスタンスに対応する、テキストトラックで時刻依存のデータの単位である。
各テキストトラックキューの構成は次のとおり:
任意の文字列。
時刻は、秒、秒の小数部分で、キューが適用されるメディアデータの範囲の開始を表現する。
キューが適用されるメディアデータの範囲の終わりを表す、秒と秒の小数部分で表した時刻、または制限のないテキストトラックキューの場合は正の無限大を表す。
キューが適用される範囲の最後に達したときの、メディアリソースの再生が一時停止するかどうかを示す真偽値。
フォーマットのために必要なものとしての、キューの実際のデータを含む、追加フィールド。たとえば、WebVTTは、テキストトラックキュー書き込み方向などを持つ。[WEBVTT]
制限のないテキストトラックキューは、テキストトラックキューの終了時刻が正の無限大に設定されたテキストトラックキューである。アクティブな制限のないテキストトラックキューは、通常の再生中に現在の再生位置の通常の単調な増加によって非アクティブになることはできない(たとえば、終了時刻が発表されていないライブイベントのチャプターのためのメタデータキューなど)。
テキストトラックキューの開始時刻およびテキストトラックキューの終了時刻は負であってもよい。(ゼロ時間がアクティブにすることはできない前の全体のキュー、しかし、現在の再生位置は負になることはない。)
各テキストトラックキューは、対応するTextTrackCue
オブジェクト(より具体的には、たとえばWebVTTのキューがVTTCue
インターフェイスを使用するような、TextTrackCue
を継承したオブジェクト)を持つ。テキストトラックキューのメモリー内表現は、動的にこのTextTrackCue
APIを通して変更できる。[WEBVTT]
テキストトラックキューは、テキストトラックキューの特定の種類に対して仕様で定義されている、テキストトラックレンダリングを更新するための規則に関連付けられる。これらの規則は、キューを表すオブジェクトがaddCue()
メソッドを使用してTextTrack
オブジェクトに追加されるときに特に使用される。
加えて、各テキストトラックキューは、動的な2つの情報を持つ:
このフラグは、最初に設定を解除されなければならない。キューがアクティブまたは非アクティブになったとき、フラグは、イベントが適切に発火されるように、および右のキューがレンダリングされることを確認するために使用される。
テキストトラックキューがそのテキストトラックのキューのテキストトラックリストから削除されるたびに、テキストトラック自体はそのメディア要素のテキストトラックのリストから削除される、または無効に変更されるそのテキストトラックモードを持つたびに、かつメディア要素のreadyState
がHAVE_NOTHING
に戻されるたびに、ユーザーエージェントは同期的にこのフラグを設定解除しなければならない。フラグが、関連付帯条件より前に表示されていたテキストトラック内の1つ以上のキューに対してこの方法で解除される場合、影響を受けるすべてのキューに対してフラグを解除した後、ユーザーエージェントは、これらのテキストトラックに属するテキストトラックのレンダリングを更新するための規則を適用しなければならない。たとえば、WebVTTに基づくテキストトラック用、WebVTTテキストトラックの表示を更新するための規則など。[WEBVTT]
これは、一貫性のある位置にキューを保つために、レンダリングモデルの一部として使用される。これは最初は空でなければならない。テキストトラックキューのアクティブフラグが設定解除されるたびに、ユーザーエージェントはテキストトラックキューの表示状態を空にしなければならない。
メディア要素のテキストトラックのテキストトラックキューは、テキストトラックキュー順に互いに相対的に順序付けされ、以下のように決定される:メディア要素のテキストトラックのリストに出現するそれらのテキストトラックとして同じ順序でソートされるグループをもつ、それらのテキストトラックで最初のグループのキュー:次に、各グループ内で、キューは、最も早いものの順に、その開始時刻でソートされなければならない。それから、同じ開始時刻を持つ任意のキューは、最も遅いものの順に、その終了時刻でソートされなければならず、最後に、同一の終了時刻を持つ任意のキューは、最も古いものの順に、それらがそれぞれのキューのテキストトラックリストに最後に追加した順にソートされなければならない。(たとえば、WebVTTファイル由来のキューに対して、最初にファイルに記載されていた順でなど。)[WEBVTT]
メディアリソース固有のテキストトラックはメディアリソースで見つけられるデータに対応するテキストトラックである。
Support in all current engines.
media.textTracks.length
メディア要素(たとえばtrack
要素から)に関連付けられたテキストトラックの数を返す。これは、メディア要素のテキストトラックのリストでテキストトラックの数である。
media.textTracks[ n ]
メディア要素のテキストトラックのリストでn番目のテキストトラックを表すTextTrack
オブジェクトを返す。
textTrack = media.textTracks.getTrackById(id)
与えられた識別子とともにTextTrack
オブジェクトを返す、または一切トラックがその識別子を持たない場合nullを返す。
textTrack = media.addTextTrack(kind [, label [, language ] ])
メディア要素のテキストトラックのリストに追加された新しいTextTrack
オブジェクトを作成して返す。
textTrack.kind
テキストトラックの種類の文字列を返す。
textTrack.label
存在する、または空の文字列(オブジェクトがユーザーに公開される場合、オブジェクトの他の属性からおそらく生成する必要があるカスタムラベルを示す)がある場合、テキストトラックのラベルを返す。
textTrack.language
テキストトラックの言語の文字列を返す。
textTrack.id
指定されたトラックのIDを返す。
帯域内トラックに対して、フォーマットがメディアフラグメント構文をサポートし、かつgetTrackById()
メソッドとともに使用できる場合、これは、フラグメントで使用できるIDである。
textTrack.inBandMetadataTrackDispatchType
テキストトラック帯域内のメタデータトラックディスパッチタイプの文字列を返す。
textTrack.mode [ = value ]
以下のリストから文字列によって表される、テキストトラックモードを返す:
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
Support in all current engines.
リスト内のキューの数を返す。
cuelist[index]
リスト内のインデックスindexを持つテキストトラックキューを返す。キューは、テキストトラックキュー順にソートされる。
cuelist.getCueById(id)
Support in all current engines.
テキストトラックキュー識別子idを持つ(テキストトラックキュー順で)最初のテキストトラックキューを返す。
いずれのキューも指定された識別子を持たない場合、または引数が空の文字列である場合、nullを返す。
cue.track
Support in all current engines.
存在する場合、このテキストトラックキューが属するTextTrack
オブジェクトを返し、そうでなければnullを返す。
cue.id [ = value ]
Support in all current engines.
テキストトラックキュー識別子を返す。
設定可能である。
cue.startTime [ = value ]
Support in all current engines.
秒単位で、テキストトラックキューの開始時刻を返す。
設定可能である。
cue.endTime [ = value ]
Support in all current engines.
秒単位で、テキストトラックキューの終了時刻を返す。
制限のないテキストトラックキューに対して、正の無限大を返す。
設定可能である。
cue.pauseOnExit [ = value ]
Support in all current engines.
テキストトラックキューpause-on-exitフラグが設定される場合trueを返し、そうでなければfalseを返す。
設定可能である。
テキストトラックは、対話的または拡張されたビューに対して、メディアデータに関連するデータを格納するために使用することができる。
たとえば、スポーツ中継を表示するページは、現在のスコアに関する情報を含むだろう。ロボット工学のコンテストがライブストリーミングされていたとする。画像は、以下のようにスコアと重ね合わせることができる:
ユーザーがビデオ内の任意のポイントをシークするたびに、スコア表示を正しくレンダリングさせるために、メタデータテキストトラックキューは、スコアに適切であるようにする必要がある。たとえば、上のフレームにおいて、試合数を与える試合の長さに続く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
イベントがレート制限されているため、メタデータキューがアクティブになる場合、かつ表示が更新される場合、間のより高いレイテンシーを導入する。)
AudioTrack
kind
またはVideoTrack
kind
IDL属性の戻り値を識別する、またはテキストトラックの種類を識別するためのURLを必要とするその他の仕様またはフォーマットは、about:html-kind
URLを使用しなければならない。
controls
属性は真偽属性である。存在する場合、著者がスクリプト化されたコントローラーを提供しておらず、ユーザーエージェントに独自のコントロールの集合を提供したいと考えていることを示す。
media.volume [ = value ]
0.0から1.0までの範囲の数字として、現在の再生音量を返す。ここで0.0は最小音量で1.0は最大音量である。
音量を変更する設定が可能である。
新しい値が0.0から1.0の範囲でない場合、"IndexSizeError
" DOMException
を投げる。
media.muted [ = value ]
volume
属性を上書きし、音声がミュートである場合trueを返し、volume
属性が無視される場合、falseを返す。
オーディオがミュートであるかどうかを変更する設定が可能である。
メディア要素のmuted
属性は、潜在的にユーザー設定を上書きし、メディアリソースに属するオーディオ出力のデフォルトの状態を制御する真偽属性である。
この属性は動的効果(要素のデフォルトの状態のみを制御する)を持たない。
このビデオ(広告)は自動再生するが、ユーザーを悩ますのを避けるために音なしで再生して、ユーザーが音声をオンにできるようにする。ユーザーの操作なしで消音できない場合、ユーザーエージェントは映像を一時停止することができる。
< video src = "adverts.cgi?kind=video" controls autoplay loop muted ></ video >
Support in all current engines.
TimeRanges
インターフェイスを実装したオブジェクトは、時間の範囲(期間)のリストを表す。
media.length
オブジェクト内の範囲の数を返す。
time = media.start(index)
指定されたインデックスをもつ範囲の開始時刻を返す。
インデックスが範囲外の場合"IndexSizeError
" DOMException
を投げる。
time = media.end(index)
指定されたインデックスをもつ範囲の終了時刻を返す。
インデックスが範囲外の場合"IndexSizeError
" DOMException
を投げる。
TrackEvent
インターフェイスSupport in all current engines.
event.track
イベントが関連するトラックオブジェクト(TextTrack
、AudioTrack
、またはVideoTrack
)を返す。
上記の処理モデルの一部として、メディア要素で以下のイベントが発火する:
イベント名 | インターフェイス | 発火条件 | 前提条件 |
---|---|---|---|
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 | ユーザーエージェントは、リソース選択アルゴリズムの一部として、メディアデータを探し始める。 | networkState がNETWORK_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 | ユーザーエージェントは、メディアデータをフェッチしている。 | networkState がNETWORK_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 | ユーザーエージェントは、意図的に現在のメディアデータをフェッチしていない。 | networkState はNETWORK_IDLE と等しい |
abort 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 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() メソッドが呼び出されたためのいずれか)。 | networkState はNETWORK_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 | ユーザーエージェントは、メディアデータをフェッチしようとしているが、データが突発的に用意されない。 | networkState はNETWORK_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+ | Event | seeking IDL属性がtrueに変更され、かつユーザーエージェントが新しい位置を探し始めている。 | |
seeked 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 | current playback positionが変更された後に、seeking IDL属性がfalseに変更された。 | |
ended 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+ | Event | duration 属性はちょうど更新された。 | |
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 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 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 属性が更新されたばかりのいずれか。 | |
resize | Event | videoWidth とvideoHeight 属性のいずれかまたは両方がちょうど更新されている。 | メディア要素はvideo 要素である。readyState はHAVE_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+ | Event | volume 属性またはmuted 属性のいずれかが変更された。関連する属性のセッターが返された後に発火した。 |
次のイベントはsource
要素で発火する:
イベント名 | インターフェイス | 発火条件 |
---|---|---|
error | Event | メディアデータのフェッチ中にエラーが発生する、またはリソースの種類がサポートされていないメディアフォーマットである。 |
AudioTrackList
、VideoTrackList
、およびTextTrackList
オブジェクトで次のイベントが発火する:
イベント名 | インターフェイス | 発火条件 |
---|---|---|
change 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? 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? 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 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? 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+ 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+ 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
要素で発火する:
イベント名 | インターフェイス | 発火条件 |
---|---|---|
error | Event | テキストトラックフォーマットがサポートされないトラックデータまたはリソースの種類のフェッチ中にエラーが発生する。 |
load | Event | トラックデータがフェッチされ、正常に処理される。 |
次のイベントは、TextTrackCue
オブジェクトで発火する:
イベント名 | インターフェイス | 発火条件 |
---|---|---|
enter 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 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 | キューはアクティブになるのを停止している。 |
セットトップボックスや携帯電話などの小型機器上でオーディオおよびビデオを再生するリソースは多くの場合、限られたデバイスのハードウェアリソースによって制限される。たとえば、デバイスは3つの一斉ビデオのみをサポートするかもしれない。このような理由から、それらメディア要素が再生し終わったとき、要素への参照をすべて削除してガーベジコレクションを許可するのを非常に慎重に行うことによって、または要素のsrc
属性を空文字列を設定することによってのいずれかで、メディア要素が保持するリソースを解放することがよい習慣である。srcObject
が設定されている場合、代わりにsrcObject
をnullに設定する。
同様に、再生速度が正確に1.0でない場合、ハードウェア、ソフトウェア、またはフォーマットの制限はビデオフレームに欠損や、オーディオに音途切れや無音をもたらすかもしれない。