Revision 1110101 of <track>

<p>The <strong>HTML <code>&lt;track&gt;</code> element</strong> is used as a child of the media elements—{{HTMLElement("audio")}} and {{HTMLElement("video")}}. It lets you specify timed text tracks (or time-based data), for example to automatically handle subtitles. The tracks are formatted in <a href="/en-US/docs/Web/API/Web_Video_Text_Tracks_Format">WebVTT format</a> (<code>.vtt</code> files) — Web Video Text Tracks.</p>

<p>The type of data that <code> track</code> adds to the media is set in the <code>kind</code> attribute, which can take values of <code>subtitles</code>, <code>captions</code>, <code>descriptions</code>, <code>chapters</code> or <code>metadata</code>. The element points to a source file containing timed text that the browser exposes when the user requests additional data.<!--This allows for universal accessibility, because anyone can link to the source file and access your data by using a <code>video</code> or <code>audio</code> element that includes the track element.--></p>

<p>A <code>media</code> element cannot have more than one <code>track</code> with the same <code>kind</code>, <code>srclang</code>, and <code>label</code>.</p>

<h2 id="Usage_context">Usage context</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <td>Content categories</td>
   <td>None</td>
  </tr>
  <tr>
   <td>Permitted content</td>
   <td>None, it is an {{Glossary("empty element")}}.</td>
  </tr>
  <tr>
   <td>Tag omission</td>
   <td>As it is a void element, the start tag must be present and the end tag must not be present.</td>
  </tr>
  <tr>
   <td>Permitted parent elements</td>
   <td>A media element, before any <a href="/en-US/docs/HTML/Content_categories#Flow_content">flow content</a>.</td>
  </tr>
  <tr>
   <td>Normative document</td>
   <td><a class="external" href="https://dev.w3.org/html5/spec/Overview.html#the-track-element" rel="external nofollow" target="_blank">HTML5, section 4.8.9</a></td>
  </tr>
 </tbody>
</table>

<h2 id="Attributes">Attributes</h2>

<p>This element includes the <a href="/en-US/docs/HTML/Global_attributes">global attributes</a>.</p>

<dl>
 <dt>{{htmlattrdef("default")}}</dt>
 <dd>This attribute indicates that the track should be enabled unless the user's preferences indicate that another track is more appropriate. This may only be used on one <code>track</code> element per media element.</dd>
 <dt>{{htmlattrdef("kind")}}</dt>
 <dd>How the text track is meant to be used. If omitted the default kind is <code>subtitles</code>. If the attribute is not present, it will use the <code>subtitles</code>. If the attribute contains an invalid value, it will use <code>metadata</code>. (Versions of Chrome earlier than 52 treated an invalid value as <code>subtitles</code>.)&nbsp;The following keywords are allowed:
 <ul>
  <li><code>subtitles</code>
   <ul>
    <li>Subtitles provide translation of content that cannot be understood by the viewer. For example dialogue or text that is not English in an English language film.</li>
    <li>Subtitles may contain additional content, usually extra background information. For example the text at the beginning of the Star Wars films, or the date, time, and location of a scene.</li>
   </ul>
  </li>
  <li><code>captions</code>
   <ul>
    <li>Closed captions provide a transcription and possibly a translation of audio.</li>
    <li>It may include important non-verbal information such as music cues or sound effects. It may indicate the cue's source (e.g. music, text, character).</li>
    <li>Suitable for users who are deaf or when the sound is muted.</li>
   </ul>
  </li>
  <li><code>descriptions</code>
   <ul>
    <li>Textual description of the video content.</li>
    <li>Suitable for users who are blind or where the video cannot be seen.</li>
   </ul>
  </li>
  <li><code>chapters</code>
   <ul>
    <li>Chapter titles are intended to be used when the user is navigating the media resource.</li>
   </ul>
  </li>
  <li><code>metadata</code>
   <ul>
    <li>Tracks used by scripts. Not visible to the user.</li>
   </ul>
  </li>
 </ul>
 </dd>
 <dt>{{htmlattrdef("label")}}</dt>
 <dd>A user-readable title of the text track which is used by the browser when listing available text tracks.</dd>
 <dt>{{htmlattrdef("src")}}</dt>
 <dd>Address of the track (<code>.vtt</code> file). Must be a valid URL. This attribute must be defined.</dd>
 <dt>{{htmlattrdef("srclang")}}</dt>
 <dd>Language of the track text data. It must be a valid <a href="https://people.w3.org/rishida/utils/subtags/">BCP 47</a> language tag. If the <code>kind</code> attribute is set to&nbsp;<code>subtitles,</code> then <code>srclang</code> must be defined.</dd>
</dl>

<h2 id="DOM_interface">DOM interface</h2>

<p>This element implements the {{domxref("HTMLTrackElement")}} interface.</p>

<h2 id="Examples">Examples</h2>

<pre class="brush: html">
&lt;video controls <span class="highATT">poster=</span><span class="highVAL">"/images/sample.gif"</span>&gt;
<span class="highLT">   &lt;</span><span class="highELE">source</span> <span class="highATT">src=</span><span class="highVAL">"sample.mp4"</span> <span class="highATT">type=</span><span class="highVAL">"video/mp4"</span><span class="highGT">&gt;</span>
   &lt;source src="sample.ogv" type="video/ogv"&gt;
   &lt;track kind="captions" src="sampleCaptions.vtt" srclang="en"&gt;
   &lt;track kind="descriptions" src="sampleDescriptions.vtt" srclang="en"&gt;
   &lt;track kind="chapters" src="sampleChapters.vtt" srclang="en"&gt;
   &lt;track kind="subtitles" src="sampleSubtitles_de.vtt" srclang="de"&gt;
   &lt;track kind="subtitles" src="sampleSubtitles_en.vtt" srclang="en"&gt;
   &lt;track kind="subtitles" src="sampleSubtitles_ja.vtt" srclang="ja"&gt;
   &lt;track kind="subtitles" src="sampleSubtitles_oz.vtt" srclang="oz"&gt;
   &lt;track kind="metadata" src="keyStage1.vtt" srclang="en" label="Key Stage 1"&gt;
   &lt;track kind="metadata" src="keyStage2.vtt" srclang="en" label="Key Stage 2"&gt;
   &lt;track kind="metadata" src="keyStage3.vtt" srclang="en" label="Key Stage 3"&gt;
   &lt;!-- Fallback --&gt;
   ...
&lt;/video&gt;
</pre>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("HTML5 W3C", "embedded-content-0.html#the-track-element", "&lt;track&gt;")}}</td>
   <td>{{Spec2("HTML5 W3C")}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>23</td>
   <td>{{CompatGeckoDesktop(24)}}<sup>[2]</sup></td>
   <td>10</td>
   <td>12.10</td>
   <td>6</td>
  </tr>
  <tr>
   <td><code>src</code> attribute settable</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoDesktop(50)}}<sup>[3]</sup></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td>Invalid <strong>kind</strong> value as <code>metadata</code></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>25<sup>[1]</sup></td>
   <td>{{CompatGeckoMobile(24)}}<sup>[2]</sup></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td><code>src</code> attribute settable</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile(50)}}<sup>[3]</sup></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td>Invalid <strong>kind</strong> value as <code>metadata</code></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] In Chrome for Android, the&nbsp;<code>&lt;track&gt;</code> element doesn’t work for fullscreen video yet.</p>

<p>[2] The <code>&lt;track&gt;</code> element, the {{domxref("HTMLTrackElement")}} interface, and associated APIs were implemented in Firefox 24 behind the preference {{pref("media.webvtt.enabled")}}, which is disabled by default. To enable WebVTT support, set this preference to <code>true</code>. WebVTT is enabled by default starting in Firefox 31 and can be disabled by setting the preference to <code>false</code>.</p>

<p>[3] Until Firefox 50, the {{htmlattrxref("src")}} attribute is not settable.</p>

<h2 id="See_also">See also</h2>

<ul>
 <li><a href="/en-US/docs/HTML/WebVTT">WebVTT text track format</a></li>
</ul>

<p>{{HTMLRef}}</p>