Export (0) Print
Expand All
This topic has not yet been rated - Rate this topic

addCue method

Add a TextTrackCue object to a TextTrack list of cues.

HTML5 A vocabulary and associated APIs for HTML and XHTMLIE11

Syntax

TextTrack.addCue(cue);

Parameters

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

Remarks

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.

Examples

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 >
  <head>
    <title>Add Text Tracks example</title>
    //  this is only uses when testing on a local or intranet machine
    //  remove when deployed on the Internet
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
</head>
<body>

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

 <script type="text/javascript">
    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<10;i++){
        startTime =  i * 5 ;
        endTime = ( (i * 5) +  5);
        message =  "This is number " + i; 
        newTextTrack.addCue(new TextTrackCue(startTime, endTime, message));
    }    
  </script>
</body>
</html>


See also

TextTrack
Dynamic TextTracks

 

 

Did you find this helpful?
(1500 characters remaining)
Thank you for your feedback
Show:
© 2014 Microsoft. All rights reserved.