track element | track object

The track element enables you to add timed text tracks, such as closed captioning, translations, or text commentary, to HTML5 video elements.

View Sample

HTML5 A vocabulary and associated APIs for HTML and XHTML

Syntax

 <track kind="subtitles" src="enTrack.vtt" srclang="en" label="English">

DOM Information

Inheritance Hierarchy

Node

Element

HTMLElement

track

Members

The track object has these types of members:

Properties

Properties

The track object has these properties.

Property	Access type	Description
crossOrigin	Read/write	Specifies whether to use Cross-Origin Resource Sharing (CORS) when fetching an image from a site outside the webpage's domain.
default	Read/write	Gets or sets the default timed text track to use when multiple track elements are specified for a video element.
label	Read/write	Gets or sets the label attribute to create a user readable title for an audio, video, or text track.
readyState (track)	Read-only	Gets the current state of the track resource.
src		The address or URL of the a media resource (video, audio) that is to be considered.
srclang	Read/write	Gets or sets the language of the text track data. This attribute is required if "subtitles" is specified in the kind attribute.

Standards information

HTML5 A vocabulary and associated APIs for HTML and XHTML

Remarks

The HTMLTrackElement represents a timed text file to provide users with multiple languages or commentary for videos. You can use multiple tracks, and set one as default to be used when the video starts.

The text is displayed in the lower portion of the video player. At this time the position and color can't be controlled, but you can retrieve text through script and display it in your own way. The user can choose alternate tracks, or turn tracks off through a built-in user interface or script.

The track element can't be used with the addCue method. Internet Explorer 11 provides the addTextTrack to create a new track object, and cues are added using addCue.

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 Windows Internet Explorer to use the latest standards. For more information about document compatibility, see Defining Document Compatibility.

Text tracks use a simplified version of the Web Video Text Track (WebVTT) or Timed Text Markup Language (TTML) timed text file formats.Internet Explorer 10 and Windows Store apps using JavaScript currently support only timing cues and text captions.

Note To create timed text files in both WebVTT and TTML formats, see HTML5 Video Caption Maker on the Internet Explorer test drive site.

WEBVTT

WebVTT files are 8-bit Unicode Transformation Format (UTF-8) format text files that look like the following.

Text


WEBVTT

00:00:01.878 --> 00:00:05.334
Good day everyone, my name is John Smith

00:00:08.608 --> 00:00:15.296
This video will teach you how to 
build a sand castle on any beach

The file starts with the tag "WEBVTT" as the first line, followed by a line feed. The timing cues are in the format "HH:MM:SS.sss". The start and end time cues are separated by a space, two hyphens and a greater-than sign ( --> ), and another space. The timing cues are on a line by themselves followed by a line feed. Immediately following the cue is the caption text. Text captions can be one or more lines. The only restriction is that there must be no blank lines between lines of text. The MIME type is "text/vtt".

TTML

Internet Explorer 10 and Windows Store apps using JavaScript use a subset of the TTML file format, which is defined in the TTML specification. Internet Explorer and Windows Store apps using JavaScript support the following structure.

XML


<?xml version='1.0' encoding='UTF-8'?>
<tt xmlns='http://www.w3.org/ns/ttml' xml:lang='en' >
<body>
<div>

<p begin="00:00:01.878" end="00:00:05.334" >Good day everyone, my name is John Smith</p>
<p begin="00:00:08.608" end="00:00:15.296" >This video will teach you how to<br/>build a sand castle on any beach</p>
</div>

</body>
</tt>

The TTML file includes XML version, encoding type, namespace declaration, and the language in the root element ("<tt>"). This is followed by the" <body>" and a "<div>" element. Within the "<div>" element are the timing cues. The actual times are set as attributes (begin, end) of the opening paragraph tag (<p>) and the text is delineated by the closing </p> tag. Blank lines and white space are ignored. If there are multiple lines, they are defined by <br/> tags. The MIME type for TTML files is application/ttml+xml. See Section 5.2 of the TTML specification for more information.

Examples

The following example shows a video element with three track elements.

HTML


    <video id="video1" controls autoplay loop>
      <source src="http://ie.microsoft.com/testdrive/ieblog/2011/nov/pp4_blog_demo.mp4" type="video/mp4" >
      <track id="enTrack" src="entrack.vtt" label="English" kind="subtitles" srclang="en" default> 
      <track id="esTrack" src="estrack.vtt" label="Spanish" kind="subtitles" srclang="es">
      <track id="deTrack" src="detrack.vtt" label="German" kind="subtitles" srclang="de">
      HTML5 video not supported
    </video>