TextTrackList object

Represents a list of TextTrack objects. A video element can have more than one associated TextTrack and the TextTrackList object contains the list.

HTML5 A vocabulary and associated APIs for HTML and XHTML

Syntax


 var texttracklist = document.getElementById("VideoELement").textTracks;

DOM Information

Inheritance Hierarchy

The TextTrackList does not inherit from any class or interface.

Members

The TextTrackList object has these types of members:

Events
Methods
Properties

Events

The TextTrackList object has these events.

Event	Description
addtrack	Occurs when a track is added to the track list on a video object.

Methods

The TextTrackList object has these methods.

Method	Description
addEventListener	Registers an event handler for the specified event type.
dispatchEvent	Sends an event to the current element.
item	Returns a track from a list that corresponds with the given index based on track order.
removeEventListener	Removes an event handler that the addEventListener method registered.

Properties

The TextTrackList object has these properties.

Property	Access type	Description
length	Read-only	Returns the number of tracks in TextTrackList, VideoTrackList, TextTrackCueList, or AudioTrackList objects.

Standards information

HTML5 A vocabulary and associated APIs for HTML and XHTML

Remarks

The following example gets the TextTrackList for the video element and then displays the label for each TextTrack.

Note To create timed text files in both Web Video Text Track (WebVTT) and Timed Text Markup Language (TTML) formats, see HTML5 Video Caption Maker on the Windows Internet Explorer test drive site.

Note If you are developing locally or on an intranet and have rendering issues for HTML5, you can add a "meta http-equiv-'X-UA-Compatible' content= " meta command, followed by "IE=edge" to the <head> block of a webpage to force Internet Explorer to use the latest standards. For more information about document compatibility, see Defining Document Compatibility.

Examples

HTML



</head>
<body>
  <h1>Show tracks example</h1>
  <video id="video1" controls  >
    <source src="http://ie.microsoft.com/testdrive/Videos/BehindIE9ModernWebStandards/Video.mp4">
    <track id="entrack" label="English subtitles" kind="captions" src="entrack.vtt" srclang="en" default>
    <track id="sptrack" label="Spanish subtitles" kind="captions" src="estrack.vtt" srclang="es">
    <track id="detrack" label="German subtitles" kind="captions" src="detrack.vtt" srclang="de">
  </video>
  <br />
  <button id="gettracks" >View text tracks</button>
  <div id="display"></div>

  <script>
    document.getElementById("gettracks").addEventListener("click", function () {
      var display = document.getElementById("display");
      display.innerHTML = "";
      var mytracks = document.getElementById("video1").textTracks;  //  get the textTrackList
      for (var i = 0; i < mytracks.length; i++) {
        display.innerHTML += (mytracks[i].label + "<br/>");  //append track label to inner text of <div>
      }
    }, false);
</script>