EN
Ce contenu n’est pas disponible dans votre langue. Voici la version anglaise.

TextTrackCue object

The TextTrackCue object represents the individual cues, and provides methods and properties to access the data and events to act on changes to cue state.

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

Syntax


var newCue = new TextTrackCue(startTime, endTime, text); // cue constructor
var firstCue = document.getElementById("trackElement").track.cues[0]; 


Members

The TextTrackCue object has these types of members:

Methods

The TextTrackCue object has these methods.

MethodDescription
addEventListener

Registers an event handler for the specified event type.

dispatchEvent

Sends an event to the current element.

getCueAsHTML

Returns the TextTrackCue text (caption) as a document fragment consisting of HTML elements and other DOM nodes .

removeEventListener

Removes an event handler that the addEventListener method registered.

 

Properties

The TextTrackCue object has these properties.

PropertyAccess typeDescription

endTime

Read-only

Returns the ending time, in seconds, for a text track cue.

id

Read-only

Returns the TextTrackCue identifier.

pauseOnExit

Read-only

Returns the pause-on-exit flag on a TextTrackCue. When the flag is true, playback will pause when it reaches the cue's endTime.

startTime

Read-only

Returns the text track cue start time in seconds.

text

Read-only

Gets TextTrackCue text in un-parsed form.

track

Read-only

Returns the TextTrack object that the TextTrackCue belongs to, or null otherwise.

 

Standards information

Remarks

Individual cues are returned from a TextTrackCueList object (collection of cues). In Internet Explorer 11, you can create cues using the constructor and add them to a track using addCue. To add a cue to a track, the track must be created in JavaScript using var newTrack = video.addTextTrack(kind, [label], [language]). The video is the video object that you're attaching the track to, and language and label are both optional.

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 and display all the text cues for a track.


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

 

 

Afficher:
© 2014 Microsoft