---
title: VideoTrack
slug: Web/API/VideoTrack
tags:
  - HTML
  - HTML DOM
  - Interface
  - Media
  - Reference
  - Video
  - VideoTrack
  - track
translation_of: Web/API/VideoTrack
---
<div>{{APIRef("HTML DOM")}}</div>

<p><span class="seoSummary"><code>VideoTrack</code> インターフェイスは、{{HTMLElement("video")}} 要素からの単一の動画トラックを表します。</span> <code>VideoTrack</code> オブジェクトにアクセスするための最も一般的な用途は、その {{HTMLElement("video")}} 要素のアクティブ動画トラックにするために、その {{domxref("VideoTrack.selected", "selected")}} プロパティを切り替えることです。</p>

<h2 id="Properties" name="Properties">プロパティ</h2>

<dl>
 <dt>{{domxref("VideoTrack.selected", "selected")}}</dt>
 <dd>動画トラックがアクティブかどうかを制御する Boolean の値。 同時にアクティブにできる動画トラックは1つだけなので、別のトラックがアクティブなときに、あるトラックでこのプロパティを <code>true</code> に設定すると、アクティブであったトラックは非アクティブになります。</dd>
 <dt>{{domxref("VideoTrack.id", "id")}} {{ReadOnlyInline}}</dt>
 <dd>メディア内のトラックを一意に識別する {{domxref("DOMString")}}。この ID を使用して、{{domxref("VideoTrackList.getTrackById()")}} を呼び出して、動画トラックリスト内の特定のトラックを見つけることができます。 メディアが <a href="https://www.w3.org/TR/media-frags/">Media Fragments URI 仕様</a>（<a href="http://www.asahi-net.or.jp/~ax2s-kmtn/internet/media/REC-media-frags-10-20120925.html">その日本語訳</a>）に従ってメディアフラグメントによるシークをサポートしている場合は、ID を URL のフラグメント部分として使用することもできます。</dd>
 <dt>{{domxref("VideoTrack.kind", "kind")}} {{ReadOnlyInline}}</dt>
 <dd>トラックが属するカテゴリを指定する {{domxref("DOMString")}}。 例えば、メイン動画トラックには <code>"main"</code> という <code>kind</code> があります。</dd>
 <dt>{{domxref("VideoTrack.label", "label")}} {{ReadOnlyInline}}</dt>
 <dd>トラックに人間が読めるラベルを提供する {{domxref("DOMString")}}。 例えば、<code>kind</code> が <code>"sign"</code> のトラックには <code>"手話通訳"</code> という <code>label</code> が付いている場合があります。 ラベルが指定されていない場合、この文字列は空です。</dd>
 <dt>{{domxref("VideoTrack.language", "language")}} {{ReadOnlyInline}}</dt>
 <dd>動画トラックの主要言語を指定する {{domxref("DOMString")}}、または不明の場合は空の文字列。 言語は、<code>"en-US"</code> または <code>"pt-BR"</code> などの BCP 47（{{RFC(5646)}}）言語コードとして指定されています。</dd>
 <dt>{{domxref("VideoTrack.sourceBuffer", "sourceBuffer")}} {{ReadOnlyInline}}</dt>
 <dd>トラックを作成した {{domxref("SourceBuffer")}}。トラックが {{domxref("SourceBuffer")}} によって作成されなかった場合、または {{domxref("SourceBuffer")}} がその親メディアソースの {{domxref("MediaSource.sourceBuffers")}} 属性から取り除かれた場合は、null を返します。</dd>
</dl>

<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2>

<p>特定のメディア要素の <code>VideoTrack</code> を取得するには、その要素の {{domxref("HTMLMediaElement.videoTracks", "videoTracks")}} プロパティを使用します。 このプロパティは、メディアに含まれる個々のトラックを取得できる {{domxref("VideoTrackList")}} オブジェクトを返します。</p>

<pre class="brush: js">var el = document.querySelector("video");
var tracks = el.videoTracks;
</pre>

<p>その後、配列の構文または {{jsxref("Array.forEach", "forEach()")}} などの関数を使用して、メディアの個々のトラックにアクセスできます。</p>

<p>この最初の例は、メディア上の最初の動画トラックを取得します。</p>

<pre class="brush: js">var firstTrack = tracks[0];</pre>

<p>次の例では、メディアのすべての動画トラックをスキャンして、（変数 <code>userLanguage</code> から取得した）ユーザーの優先言語の最初の動画トラックをアクティブにします。</p>

<pre class="brush: js">for (var i = 0; i &lt; tracks.length; i++) {
  if (tracks[i].language === userLanguage) {
    tracks[i].selected = true;
    break;
  }
});
</pre>

<p>{{domxref("VideoTrack.language", "language")}} は標準（{{RFC(5646)}}）形式です。 例えば、アメリカ英語の場合、これは <code>"en-US"</code> になります。</p>

<h2 id="Specifications" name="Specifications">仕様</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様</th>
   <th scope="col">状態</th>
   <th scope="col">コメント</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', '#videotrack', 'VideoTrack')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>



<p>{{Compat("api.VideoTrack")}}</p>