TextTrack object

The object that represents the timed text track content of a track element.

HTML5 A vocabulary and associated APIs for HTML and XHTML

Syntax


var myTrack = document.getElementById("trackElement").track; // gets existing track
var newTrack = oVideo.addTextTrack(kind, [label], [language]); // gets new textTrack

DOM Information

Inheritance Hierarchy

The TextTrack does not inherit from any class or interface.

Members

The TextTrack object has these types of members:

Events
Methods
Properties

Events

The TextTrack object has these events.

Event	Description
oncuechange	Occurs when a TextTrackCue in a HTMLTrackElement changes.

Methods

The TextTrack object has these methods.

Method	Description
addCue	Add a TextTrackCue object to a TextTrack list of cues.
addEventListener	Registers an event handler for the specified event type.
dispatchEvent	Sends an event to the current element.
removeCue	Remove a specific TextTrackCue from a TextTrack's list of cues.
removeEventListener	Removes an event handler that the addEventListener method registered.

Properties

The TextTrack object has these properties.

Property	Access type	Description
activeCues	Read-only	Returns the TextTrackCues from the currently active TextTrackList as a TextTrackCueList object.
cues	Read-only	Returns the list of text track cues as a TextTrackCueList object.
kind	Read-only	Gets the type or category of the timed text track associated with a TextTrack object.
language	Read-only	Gets or sets the BCP47 language tag of an AudioTrack, VideoTrack or TextTrack if available, or an empty string if not.
mode	Read/write	Sets or gets a value that represents whether a text track is currently disabled, hidden, or showing.
readyState	Read-only	Returns the readiness state of a TextTrack with values that let you determine whether the track is loaded, is loading, or failed to load.

Standards information

HTML5 A vocabulary and associated APIs for HTML and XHTML

Remarks

In Internet Explorer 11, you can create tracks with addTextTrack and add cues using addCue.

The track object contains the collection of TextTrackCues (times and text) that are contained in the file that the track element represents.

You can also get a text track object from the video element through the TextTracks property, which returns a TextTrackList object. The TextTrackList object contains a collection of TextTrack objects.

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

The following example shows how to get a TextTrack and list the text captions.

HTML


<!DOCTYPE html >
<html >
  <head>
    <title>Get track example</title>
  </head>
  <body>
    <h1>Get track 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>
    </video>
    <p>
    <button id="mybutton">Show tracks</button>
    </p>
    <div style="display:block; overflow:auto; height:200px; width:650px;" id="display"></div>
   
    <script>
      document.getElementById("mybutton").addEventListener("click", function () {
        var myTrack = document.getElementById("entrack").track; // get text track from track element          
        var myCues = myTrack.cues;   // get list of cues                    
        for (var i = 0; i < myCues.length; i++) {
        // append track label
        document.getElementById("display").innerHTML += (myCues[i].getCueAsHTML().textContent + "<br/>");  
        }
     }, false);
   </script>
  </body>
</html>