Revision 1110105 of HTMLTrackElement

<div>
<div>{{ APIRef("HTML DOM") }}</div>
</div>

<p>The&nbsp;<strong><code style="font-size: 14px;">HTMLTrackElement</code></strong>&nbsp;interface provides access to the properties of {{HTMLElement("track")}} elements, as well as methods to manipulate them.</p>

<h2 id="Properties" name="Properties">Properties</h2>

<p><em>Inherits properties from its parent, {{domxref("HTMLElement")}}.</em></p>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Name</th>
   <th scope="col">Type</th>
   <th scope="col">Description</th>
  </tr>
  <tr>
   <td><code>kind</code></td>
   <td>{{domxref("DOMString")}}</td>
   <td>Reflects the {{htmlattrxref("kind", "track")}}&nbsp;HTML attribute,&nbsp;indicating&nbsp;how the text track is meant to be used. Possible values are: subtitles, captions, descriptions, chapters, metadata. See&nbsp;{{htmlattrxref("kind", "track")}}&nbsp;attribute documentation for details.</td>
  </tr>
  <tr>
   <td><code>src</code></td>
   <td>{{domxref("DOMString")}}</td>
   <td>Reflects the&nbsp;{{htmlattrxref("src", "track")}}&nbsp;HTML attribute, indicating the address of the text track data.</td>
  </tr>
  <tr>
   <td><code>srclang</code></td>
   <td>{{domxref("DOMString")}}</td>
   <td>Reflects the&nbsp;{{htmlattrxref("srclang", "track")}}&nbsp;HTML attribute,&nbsp;indicating the language of the text track data.</td>
  </tr>
  <tr>
   <td><code>label</code></td>
   <td>{{domxref("DOMString")}}</td>
   <td>Reflects the&nbsp;{{htmlattrxref("label", "track")}}&nbsp;HTML attribute,&nbsp;indicating&nbsp;a user-readable title for the track.</td>
  </tr>
  <tr>
   <td><code>default</code></td>
   <td>{{domxref("Boolean")}}</td>
   <td>Reflects the&nbsp;{{htmlattrxref("default", "track")}}&nbsp;HTML attribute,&nbsp;indicating&nbsp;that the track is to be enabled if the user's preferences do not indicate that another track would be more appropriate.</td>
  </tr>
  <tr>
   <td><code>readyState</code> {{ReadOnlyInline}}</td>
   <td><code>unsigned short</code></td>
   <td>
    <p style="margin: 0px 0px 1.286em; padding: 0px; line-height: 1.5em;">The readiness state of the track.</p>

    <table class="standard-table" style="border-spacing:0px; margin:0px 0px 1.286em">
     <tbody>
      <tr>
       <td class="header">Constant</td>
       <td class="header">Value</td>
       <td class="header">Description</td>
      </tr>
      <tr>
       <td><code style="font-size: 14px;">NONE</code></td>
       <td>0</td>
       <td>Indicates that the text track's cues have not been obtained.</td>
      </tr>
      <tr>
       <td><code style="font-size: 14px;">LOADING</code></td>
       <td>1</td>
       <td>Indicates that the text track is loading and there have been no fatal errors encountered so far. Further cues might still be added to the track by the parser.</td>
      </tr>
      <tr>
       <td><code style="font-size: 14px;">LOADED</code></td>
       <td>2</td>
       <td>Indicates that the text track has been loaded with no fatal errors.</td>
      </tr>
      <tr>
       <td><code style="font-size: 14px;">ERROR</code></td>
       <td>3</td>
       <td>Indicates that the text track was enabled, but when the user agent attempted to obtain it, this failed in some way. Some or all of the cues are likely missing and will not be obtained.</td>
      </tr>
     </tbody>
    </table>
   </td>
  </tr>
  <tr>
   <td><code>track</code> {{ReadOnlyInline}}</td>
   <td>{{Domxref("TextTrack")}}</td>
   <td>The track element's text track data.</td>
  </tr>
 </tbody>
</table>

<h2 id="Methods">Methods</h2>

<p><em>No specific method; inherits methods from its parent, {{domxref("HTMLElement")}}.</em></p>

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

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('HTML WHATWG', "the-video-element.html#the-track-element", "HTMLTrackElement")}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>No change from {{SpecName("HTML5 W3C")}}.</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#the-track-element", "HTMLTrackElement")}}</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 (WebKit)</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoDesktop("24")}}<sup>[1]</sup></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>src</code> attribute settable</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoDesktop("50")}}<sup>[1]</sup></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</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 Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("24")}}<sup>[1]</sup></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>src</code> attribute settable</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("50")}}<sup>[2]</sup></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>

<p>[1] The <code>HTMLTrackElement</code> interface was added in Firefox 24, but was disabled by default behind the preference {{pref("media.webvtt.enabled")}}. The interface is enabled by default (along with all other WebVTT features) in <a href="/en-US/docs/Mozilla/Firefox/Releases/31">Firefox 31</a>.</p>

<p>[2] Until Firefox 50, the <code>src</code> attribute is settable, but the change does not get handled properly. Starting in Firefox 50, existing track data is properly disposed of, new track data is loaded and put into effect, and so forth.</p>
</div>

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

<ul>
 <li>The HTML element implementing this interface: {{ HTMLElement("track") }}.</li>
</ul>

<p>&nbsp;</p>