Windows Dev Center

EN
Il contenuto non è disponibile nella lingua di destinazione, ma solo in inglese.

TextTrackCueList object

TextTrackCueList represents a dynamically updating list of text track cues.

HTML5 A vocabulary and associated APIs for HTML and XHTML

 

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 TextTrackList, VideoTrackList, TextTrackCueList, or AudioTrackList objects.

 

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


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

 

 

Mostra:
© 2015 Microsoft