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

The TextTrack object has these events.

EventDescription
oncuechange

Occurs when a TextTrackCue in a HTMLTrackElement changes.

 

Methods

The TextTrack object has these methods.

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

PropertyAccess typeDescription

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

Gets or sets the type or category of the timed text track associated with a track element.

label

Read/write

Gets or sets the label attribute to create a user readable title for a text track.

language

Read-only

Gets the BCP47 language tag of an AudioTrack 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

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 a Windows Store app using JavaScript 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 a Windows Store app using JavaScript 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.


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


See also

Make your videos accessible with Timed Text Tracks

 

 

Show:
© 2014 Microsoft