addTextTrack method

Create a new TextTrack object to add to an HTML5 video.

Syntax

object.addTextTrack(kind, label, language, textTrack)

Parameters

kind [in]

Type: string

The type of text track. One of the following:

Value	Meaning
subtitles	A transcription or translation of the audio dialog.
captions	A transcription or translation of the dialog, sound effects, musical cues, or other audio information.
descriptions	Textual descriptions of the video component, intended for audio synthesis, such as text-to-speech conversion, when the video component is not viewable by the user.
chapters	Chapter titles to be used for navigating the video content.
metadata	Information available to be used from script, not displayed in the player or browser.

label [in, optional]

Type: string

A user readable title for a text track.

language [in, optional]

Type: string

The BCP47 language tag of the track. For example "en" for English or "fr" for French.

Return value

Type: TextTrack

A TextTrack object.

Remarks

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

Examples

The video element in the following example uses controls and muted attributes to provide the built-in playback controls and turn the sound off. Use the source element to set the video source file. The example specifies a generic video file from the Internet Explorer test drive site, but 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. At the end of the loop, we start the video with a video.play() command.

See the example live online.

HTML


<!DOCTYPE html >

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

<video id="video1" controls="controls" muted="muted">
     <!-- change to your own mp4 video file -->
  <source src="http://ie.microsoft.com/testdrive/Videos/BehindIE9ModernWebStandards/Video.mp4" />   
  HTML5 Video not supported 
</video>

 <script>
   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));
   }
   video.play();
  </script>
</body>
</html>

addTextTrack method

Syntax

Parameters

Return value

Remarks

Examples

See also