Information
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

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.

HTML5 A vocabulary and associated APIs for HTML and XHTMLInternet Explorer 10

 

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

The track object has these properties.

PropertyAccess typeDescription

default

Read/write

Gets or sets the default timed text track to use when multiple track elements are specified for a video element.

kind

Read/write

Gets or sets the type or category of the timed text track associated with a track element.

label

Read/write

Gets or sets the label attribute to create a user readable title for a text track.

readyState (track)

Read-only

Gets the current state of the track resource.

src

The address or URL of the a media resource (videoaudio) 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

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.


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 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.


    <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>


See also

Make your videos accessible with Timed Text Tracks

 

 

Show:
© 2014 Microsoft