<track>

  • Revision slug: Web/HTML/Element/track
  • Revision title: track
  • Revision id: 467365
  • Created:
  • Creator: SaschaNaz
  • Is current revision? No
  • Comment fixed dead link

Revision Content

{{HTMLVersionHeader("5")}}

The track element is used as a child of the media elements—{{HTMLElement("audio")}} and {{HTMLElement("video")}}—and does not represent anything on its own. It lets you specify timed text tracks (or time-based data).

The type of data that track adds to the media is set in the kind attribute, which can take values of subtitles, captions, descriptions, chapters or metadata. The element points to a source file containing timed text that the browser exposes when the user requests additional data.

A media element cannot have more than one track with the same kind, srclang, and label.

Usage context

Content categories None
Permitted content None, this is a void element.
Tag omission As it is a void element, the start tag must be present and the end tag must not be present.
Permitted parent elements A media element, before any flow content.
Normative document HTML5, section 4.8.9

Attributes

This element includes the global attributes.

{{htmlattrdef("default")}}
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 track element per media element.
{{htmlattrdef("kind")}}
How the text track is meant to be used. If omitted the default kind is subtitles. The following keywords are allowed:
  • subtitles
    • 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.
    • 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.
  • captions
    • Closed captions provide a transcription and possibly a translation of audio.
    • 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).
    • Suitable for users who are deaf or when the sound is muted.
  • descriptions
    • Textual description of the video content.
    • Suitable for users who are blind or where the video cannot be seen.
  • chapters
    • Chapter titles are intended to be used when the user is navigating the media resource.
  • metadata
    • Tracks used by scripts. Not visible to the user.
{{htmlattrdef("label")}}
A user-readable title of the text track which is used by the browser when listing available text tracks.
{{htmlattrdef("src")}}
Address of the track. Must be a valid URL. This attribute must be defined.
{{htmlattrdef("srclang")}}
Language of the track text data. It must be a valid BCP 47 language tag. If the kind attribute is set to subtitles, then srclang must be defined.

DOM interface

This element implements the HTMLTrackElement interface.

Examples

<video src="sample.ogv">
   <track kind="captions" src="sampleCaptions.srt" srclang="en">
   <track kind="descriptions" src="sampleDesciptions.srt" srclang="en">
   <track kind="chapters" src="sampleChapters.srt" srclang="en">
   <track kind="subtitles" src="sampleSubtitles_de.srt" srclang="de">
   <track kind="subtitles" src="sampleSubtitles_en.srt" srclang="en">
   <track kind="subtitles" src="sampleSubtitles_ja.srt" srclang="ja">
   <track kind="subtitles" src="sampleSubtitles_oz.srt" srclang="oz">
   <track kind="metadata" src="keyStage1.srt" srclang="en" label="Key Stage 1">
   <track kind="metadata" src="keyStage2.srt" srclang="en" label="Key Stage 2">
   <track kind="metadata" src="keyStage3.srt" srclang="en" label="Key Stage 3">
</video>

Compatibility

{{CompatibilityTable}}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 23 {{CompatNo}}
{{unimplemented_inline("629350")}}
10 12.10 6
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 25 (see notes) {{CompatNo}} {{CompatNo}} {{CompatNo}} {{CompatNo}}

Compatibility notes

For Chrome for Android, the <track> element doesn’t work for fullscreen video on Chrome for Android yet.

Specifications

See also

Revision Source

<div>
  {{HTMLVersionHeader("5")}}</div>
<p>The <code>track</code> element is used as a child of the media elements—{{HTMLElement("audio")}} and {{HTMLElement("video")}}—and does not represent anything on its own. It lets you specify timed text tracks (or time-based data).</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, this is a void element.</td>
    </tr>
    <tr>
      <td>Tag omission</td>
      <td>As it is a void element, the <span title="syntax-start-tag">start tag</span> must be present and the <span title="syntax-end-tag">end tag</span> 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" title="HTML/Content_categories#Flow_content">flow content</a>.</td>
    </tr>
    <tr>
      <td>Normative document</td>
      <td><a class="external" href="http://dev.w3.org/html5/spec/Overview.html#the-track-element" rel="external nofollow" target="_blank" title="http://dev.w3.org/html5/spec/Overview.html#the-track-element">HTML5, section 4.8.9</a></td>
    </tr>
  </tbody>
</table>
<h2 id="Attributes">Attributes</h2>
<p><span style="line-height: 21px;">This element includes the&nbsp;</span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">global attributes</a><span style="line-height: 21px;">.</span></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>. 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. 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="http://people.w3.org/rishida/utils/subtags/" title="http://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 <a href="/en-US/docs/DOM/HTMLTrackElement" title="DOM/HTMLTrackElement">HTMLTrackElement</a> interface.</p>
<h2 id="Examples">Examples</h2>
<pre class="brush: html">
&lt;video src="sample.ogv"&gt;
   &lt;track kind="captions" src="sampleCaptions.srt" srclang="en"&gt;
   &lt;track kind="descriptions" src="sampleDesciptions.srt" srclang="en"&gt;
   &lt;track kind="chapters" src="sampleChapters.srt" srclang="en"&gt;
   &lt;track kind="subtitles" src="sampleSubtitles_de.srt" srclang="de"&gt;
   &lt;track kind="subtitles" src="sampleSubtitles_en.srt" srclang="en"&gt;
   &lt;track kind="subtitles" src="sampleSubtitles_ja.srt" srclang="ja"&gt;
   &lt;track kind="subtitles" src="sampleSubtitles_oz.srt" srclang="oz"&gt;
   &lt;track kind="metadata" src="keyStage1.srt" srclang="en" label="Key Stage 1"&gt;
   &lt;track kind="metadata" src="keyStage2.srt" srclang="en" label="Key Stage 2"&gt;
   &lt;track kind="metadata" src="keyStage3.srt" srclang="en" label="Key Stage 3"&gt;
&lt;/video&gt;
</pre>
<h2 id="Compatibility">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>{{CompatNo}}<br />
          {{unimplemented_inline("629350")}}</td>
        <td>10</td>
        <td>12.10</td>
        <td>6</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 (see notes)</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatNo}}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="Compatibility_notes">Compatibility notes</h2>
<p>For Chrome for Android, the&nbsp;<code>&lt;track&gt;</code> element doesn’t work for fullscreen video on Chrome for Android yet.</p>
<h2 id="Specifications">Specifications</h2>
<ul>
  <li><a class="external" href="http://www.w3.org/TR/html5/embedded-content-0.html#the-track-element" title="http://www.w3.org/TR/html5/video.html#the-track-element">http://www.w3.org/TR/html5/embedded-content-0.html#the-track-element</a></li>
</ul>
<h2 id="See_also">See also</h2>
<ul>
  <li><a href="/en-US/docs/HTML/WebVTT" title="HTML/WebVTT">WebVTT text track format</a></li>
</ul>
Revert to this revision