addCue method

Add a TextTrackCue object to a TextTrack list of cues.

HTML5 A vocabulary and associated APIs for HTML and XHTMLIE11





cue [in]

Type: TextTrackCue

A TextTrackCue object. A cue consists of:

  • id - an arbitrary string identifying the cue.
  • startTime - the beginning time in seconds that applies to the cue.
  • endTime - the ending time in seconds that applies to the cue.
  • pauseOnExit flag - a boolean that tells Internet Explorer to pause when the end of the cue is reached.
  • text - the raw text for the cue.

Return value

This method does not return a value.

Standards information


AddCue only works on a TextTrack object created using addTextTrack. If you try to add a cue to a track object from an HTMLTrackElement element, it throws an InvalidStateError exception.

For more info and examples of creating new tracks and cues, see Dynamic TextTracks.


The video element in the following example uses controls, autoplay, and muted attributes to provide the built-in playback controls, start the video when it loads, and turn the sound off. These attributes are true if present, false if not, so you don't need to assign values. Use the source element to set the video source file. The example specifies a generic video file, so you can substitute any mp4 video.

The start time, end time, and a simple caption message for the TextTrackCue objects are created in a loop. The start and end time are set so that each message shows for five seconds.

<!DOCTYPE html >

<html >
    <title>Add Text Tracks example</title>

<video id="video1" controls="controls" muted="muted">
     <!-- change to your own mp4 video file -->
  <source src="" />   
  HTML5 Video not supported 

   var video = document.getElementById("video1");
   var startTime, endTime, message;
   var newTextTrack = video.addTextTrack("captions", "sample");
   newTextTrack.mode = newTextTrack.SHOWING; // set track to display
   // create some cues and add them to the new track 
   for (var i = 0; i < 30; i++) {
     startTime = i * 5;
     endTime = ((i * 5) + 5);
     message = "This is number " + i;
     newTextTrack.addCue(new TextTrackCue(startTime, endTime, message));

See also

Dynamic TextTracks