TextTrackCueList object

TextTrackCueList represents a dynamically updating list of text track cues.

HTML5 A vocabulary and associated APIs for HTML and XHTMLInternet Explorer 10

 

Syntax


 myCuesList = document.getElementById("trackElement").cues;  

DOM Information

Inheritance Hierarchy

The TextTrackCueList does not inherit from any class or interface.

Members

The TextTrackCueList object has these types of members:

Methods

The TextTrackCueList object has these methods.

MethodDescription
getCueById

Returns the TextTrackCue (in cue order) for a specified id.

item

Returns a track from a list that corresponds with the given index based on track order.

 

Properties

The TextTrackCueList 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 list of cues from a track element.

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


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