Getting started with the Track element
The HTML5 track element enables you to add captions that are displayed in the HTML5 video player, without scripting or additional software.
The text is displayed near the bottom of the video area in the player. The captioning selection menu button on the player enables you to turn the track on and off, or switch between multiple tracks. At this time the position and color of text can't be controlled, but you can retrieve text through script and display it in your own way. See Scripting the track element for more info. For more info about using video elements, see How to use HTML5 to play video files on your webpage.
<video src="video.mp4" controls autoplay loop> <track src="en_track.vtt" srclang="en" label="English" kind="subtitles" default> </video>
The track element is a child element of the video element, similar to the source element that's used to specify video files. In this example, the video element's src attribute is a file called "video.mp4". The controls, autoplay, and loop attributes enable the player's built-in playback controls, start the video when the page is opened, and replay the video repeatedly. The track element's source is a file called "en_track.vtt" file. The srclang, label, and kind attributes define the language (en), a friendly name for the built in captioning selection menu (English), and the type of text file (captions). The default attribute specifies that this track file should be active and be displayed in the player when the video starts. If the default attribute is left off, the user would need to choose the track from the captioning selection menu in the video player as shown in the following screen shot.
The track element accepts the following attributes.
Defines the type of text content. The following are the options, and usage as recommended by the w3c.
If this attribute is omitted, the track kind defaults to subtitles.
URL of the timed text file. The player accepts Web Video Text Track (WebVTT) or Timed Text Markup Language (TTML) format files.
The language of the timed text file. For information purposes; not used in the player.
Provides a label that can be used to identify the timed text. Each track must have a unique label. This label is displayed in the captioning selection menu shown in the screen shot above.
Specifies the default track element. If not specified, no track is displayed.
More than one timed text file can be used—for instance, to provide your users with multiple languages or alternate commentary. If you're using multiple tracks, you set one as default to be used if your page doesn't specify or the user hasn't picked a language. Within the video player, the user can choose alternate tracks by using the built-in captioning selection menu.
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>
In this example, the source element is used to define the video file (video.mp4), and the track elements each specify a text translation. The following screen shot shows the captioning selection menu with three language options.
- Create WebVTT or TTML files with Caption Maker
- How to use HTML5 to play video files on your webpage
- HTML5 Timed Text Track sample
- Internet Explorer 10 Samples and Tutorials
- Scripting the track element
- Track element