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.
  |
Syntax
var firstCue = document.getElementById("trackElement").track.cues[0];
DOM Information
Inheritance Hierarchy
The TextTrackCue does not inherit from any class or interface.Members
The TextTrackCue object has these types of members:
Methods
The TextTrackCue object has these methods.
| Method | Description |
|---|---|
| getCueAsHTML |
Returns the TextTrackCue text (caption) as a document fragment consisting of HTML elements and other DOM nodes . |
Properties
The TextTrackCue object has these properties.
| Property | Description |
|---|---|
|
Returns the ending time, in seconds, for a text track cue. | |
|
Returns the TextTrackCue identifier. | |
|
Returns the pause-on-exit flag on a TextTrackCue. When the flag is true, playback will pause when it reaches the cue's endTime. | |
|
Returns the text track cue start time in seconds. | |
|
Gets TextTrackCue text in un-parsed form. | |
|
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). Cues can also be created and added to a track.
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.
Examples
The following example shows how to get and display all the text cues for a track.
<script type="text/javascript">
function getCues() {
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++) {
document.getElementById("display").innerHTML += (myCues[i].getCueAsHTML().textContent + "<br/>"); //append track label
}
}
</script>
</head>
<body>
<video id="video1" controls >
<source src="video.mp4">
<track id="entrack" label="English subtitles" kind="captions" src="entrack.vtt" srclang="en" default>
</video>
<p>
<button onclick="getCues();">Show tracks</button>
</p>
<div style="display:block; overflow:auto; height:200px; width:650px;" id="display"></div>
See also
Send comments about this topic to Microsoft
Build date: 11/27/2012
