Export (0) Print
Expand All

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 XHTMLInternet Explorer 10

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

The TextTrackList object has these events.

EventDescription
addtrack

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

 

Methods

The TextTrackList object has these methods.

MethodDescription
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.

PropertyAccess typeDescription

length

Read-only

Returns the number of tracks in a TextTrackList, TextTrackCueList, or AudioTrackList list object.

 

Standards information

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



</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>


See also

Make your videos accessible with Timed Text Tracks
TextTrack

 

 

Show:
© 2014 Microsoft