VideoTrack

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

VideoTrack インターフェイスは、<video> 要素からの単一の映像トラックを表します。

VideoTrack オブジェクトにアクセスするための最も一般的な用途は、その <video> 要素のアクティブ映像トラックにするために、その selected プロパティを切り替えることです。

プロパティ

selected

映像トラックがアクティブかどうかを制御する論理値です。同時にアクティブにできる映像トラックは 1 つだけなので、別のトラックがアクティブなときに、あるトラックでこのプロパティを true に設定すると、アクティブであったトラックは非アクティブになります。

id 読取専用

メディア内のトラックを一意に識別する文字列です。この ID を使用して、VideoTrackList.getTrackById() を呼び出して、映像トラックリスト内の特定のトラックを見つけることができます。 メディアが Media Fragments URI 仕様その日本語訳)に従ってメディアフラグメントによるシークをサポートしている場合は、ID を URL のフラグメント部分として使用することもできます。

kind 読取専用

トラックが属するカテゴリーを指定する文字列です。 例えば、メイン映像トラックには "main" という kind があります。

label 読取専用

トラックに人間が読めるラベルを提供する文字列です。 例えば、kind"sign" のトラックには "手話通訳" という label が付いている場合があります。 ラベルが指定されていない場合、この文字列は空です。

language 読取専用

映像トラックの主要言語を指定する文字列、または不明の場合は空文字列です。 言語は、"en-US" または "pt-BR" などの BCP 47 (RFC 5646) 言語コードとして指定されます。

sourceBuffer 読取専用

トラックを作成した SourceBuffer。トラックが SourceBuffer によって作成されなかった場合、または SourceBuffer がその親メディアソースの MediaSource.sourceBuffers 属性から取り除かれた場合は、null を返します。

使用上の注意

特定のメディア要素の VideoTrack を取得するには、その要素の videoTracks プロパティを使用します。 このプロパティは、メディアに含まれる個々のトラックを取得できる VideoTrackList オブジェクトを返します。

js
const el = document.querySelector("video");
const tracks = el.videoTracks;

その後、配列の構文または forEach() などの関数を使用して、メディアの個々のトラックにアクセスできます。

この最初の例は、メディア上の最初の映像トラックを取得します。

js
const firstTrack = tracks[0];

次の例では、メディアのすべての映像トラックをスキャンして、(変数 userLanguage から取得した)ユーザーの優先言語の最初の映像トラックをアクティブにします。

js
for (const track of tracks) {
  if (track.language === userLanguage) {
    track.selected = true;
    break;
  }
}

language は標準 (RFC 5646) 形式です。 例えば、アメリカ英語の場合、これは "en-US" になります。

仕様書

Specification
HTML
# videotrack

ブラウザーの互換性

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
VideoTrack
id
kind
label
language
selected
sourceBuffer

Legend

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

Full support
Full support
Partial support
Partial support
No support
No support
User must explicitly enable this feature.
Has more compatibility info.