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.
<track kind="subtitles" src="enTrack.vtt" srclang="en" label="English">
The track object has these types of members:
The track object has these properties.
Specifies whether to use Cross-Origin Resource Sharing (CORS) when fetching an image from a site outside the webpage's domain.
Gets or sets the default timed text track to use when multiple track elements are specified for a video element.
Gets or sets the label attribute to create a user readable title for an audio, video, or text track.
Gets the current state of the track resource.
Gets or sets the language of the text track data. This attribute is required if "subtitles" is specified in the kind attribute.
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.
WebVTT files are 8-bit Unicode Transformation Format (UTF-8) format text files that look like the following.
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".
<?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.
The following example shows a video element with three track elements.
<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>