HTMLTrackElement

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

HTMLTrackElement インターフェイスは DOM 内にある HTML<track> 要素を表します。この要素は <audio> または <video> の子として使用され、クローズドキャプションや字幕などの情報を含むテキストトラックを指定することが可能です。

EventTarget Node Element HTMLElement HTMLTrackElement

インスタンスプロパティ

親である HTMLElement から継承したプロパティがあります。

HTMLTrackElement.kind

HTML の kind 属性を反映した文字列で、使用する予定のテキストトラックを示します。可能な値は subtitles, captions, descriptions, chapters, metadata です。

HTMLTrackElement.src

HTML の src 属性を反映した文字列で、テキストトラックデータの在りかを示します。

HTMLTrackElement.srclang

HTML の srclang 属性を反映した文字列で、テキストのトラックデータの言語を示します。

HTMLTrackElement.label

HTML の label 属性を反映した文字列で、トラックのユーザーが読めるタイトルを示します。

HTMLTrackElement.default

default 属性を反映した論理値で、ユーザーの環境設定で他のトラックがより適切であることが示されていない場合、そのトラックを有効にすることを示します。

HTMLTrackElement.readyState 読取専用

トラックの準備状態を示す unsigned short を返します。

定数 説明
NONE 0 テキストトラックのキューが得られていないことを示します。
LOADING 1 テキストトラックが読み込まれ、今のところ致命的なエラーはないことを示します。パーサーによって、さらにキューがトラックに追加されるかもしれません。
LOADED 2 テキストトラックが致命的なエラーなしに読み込まれたことを示します。
ERROR 3 テキストトラックが有効であったが,ユーザーエージェントがそれを取得しようとしたとき,これが何らかの形で失敗したことを示す。一部または全部のキューが欠落している可能性が高く、取得できない。
HTMLTrackElement.track 読取専用

track 要素のテキストトラックデータである TextTrack を返します。

インスタンスメソッド

固有のメソッドはありません。親である HTMLElement から継承したメソッドがあります。

イベント

<track> 要素では、親である HTMLElement で発生する可能性があるイベントに加えて、以下のイベントが発生する可能性があります。

cuechange

基礎となる TextTrack が、現在表示されているキューを変更したときに送られます。このイベントは常に TextTrack に送られますが、もし HTMLTrackElement がトラックと関連付けられていれば、そちらにも送られます。 また、 oncuechange イベントハンドラーを使用して、このイベントのハンドラーを確立することができます。

使用上のメモ

トラックのテキストリソースの読み込み

トラックの mode が初期状態で disabled になっていると、テキストトラックの実際のキューを記述した WebVTT や TTML データは読み込まれません。もし <track> が設定された後にトラックに対して何らかの処理を行う必要がある場合は、代わりにトラックの modehidden (最初からユーザーに表示したくない場合)か showing (最初にトラックを表示する場合)のどちらかになるようにしなければなりません。モードは後で好きなように変更することができます。

仕様書

Specification
HTML
# htmltrackelement

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
HTMLTrackElement
cuechange event
default
kind
label
readyState
src
srclang
track

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
See implementation notes.
Has more compatibility info.

関連情報

  • このインターフェイスを実装している HTML 要素: <track>