Introduction
The Internet has gone through a complete transformation compared to its humble beginnings 30 years ago.
Today, the web content isn’t restricted to simple HTML pages; it expands to include audio and video content, including smart content. The HTML5 specification has provided first class support for specifying explicit external timed tracks for media elements. These tracks are associated with media and they do not represent anything on their own.
The support for this comes in the form of the “track” markup element which is part of the HTML5 specification.
The HTML5 specification says…
The HTML5 specification defines the track element as the markup element which enabled supplementary media tracks such as subtitle tracks and caption tracks to be specified for audio and video elements.
Source: http://www.w3.org/TR/html-markup/track.html#track
The DOM interface for the track element is defined as under:
interface HTMLTrackElement : HTMLElement {
attribute DOMString kind;
attribute DOMString src;
attribute DOMString srclang;
attribute DOMString label;
attribute boolean default;
const unsigned short NONE = 0;
const unsigned short LOADING = 1;
const unsigned short LOADED = 2;
const unsigned short ERROR = 3;
readonly attribute unsigned short readyState;
readonly attribute TextTrack track;
};
The track element can be used for the following scenarios:
- Providing subtitles for an audio/video track, and is intended for use where the users cannot consume the audio/video track as-is and the subtitles help the user understand the content
- Providing captions, and is intended for use where the user does not have access at all to the soundtrack (if the audience is deaf/mute)
- Providing descriptions, for the visual components of a video.
- Providing chapter titles
- For metadata content meant for use from script.
The “track” markup element is a type of void element. Any phrasing element can be the parent of a “progress” markup element, and all global attributes are permitted.
In addition to global attributes, “track” markup element supports the following default properties:
- kind – which specifies the kind of times track. It can be one of the following:
- Subtitles.
- Captions
- Descriptions
- Chapters
- metadata.
- src – which specifies the address of the timed track.
- srclang – which specifies the language of the timed track.
- label – which specifies a user-readable title for the timed track.
- default – which instructs the user agent that track is to be enabled unless the user’s preferences indicate otherwise. The permissible values are “default”, “” or empty.
Additional contracts that apply on track elements include:
- A track element must have a start tag, but not an end tag.
- The label attribute must be non-empty.
- The srclang values can only be a valid language tad defined in BCP-47 – http://www.w3.org/TR/html-markup/references.html#refsBCP47
- The “default” attribute cannot occur on more than one track element within the same audio/video element.
Hands On
For the purpose of this sample, we will need an HTMl5 compatible video file as well as companion subtitles file (SRT format).
Let us look at the source code of a simple HTML5 page which shows the “track” element.
<!DOCTYPE html>
<html>
<meta charset=”utf-8″>
<title>Track sample</title>
<body>
<video id=”video1″ src=”test.ogv” controls autoplay loop>
<track kind=subtitles src=test.srt srclang=en label=”English”>
</video>
<button id=”buttonStart” type=”button” onclick=”buttonStart_click()”>Start</button>
<button id=”buttonStop” type=”button” onclick=”buttonStop_click()”>Stop</button>
<article>
<header>
<h1>Track sample</h1>
<p>Demo showing track element used for video files in HTML5</p>
</header>
<footer>
<p>HTML Goodies</p>
</footer>
</article>
<script type=”text/javascript”>
function buttonStart_click() {
document.getElementById(‘video1’).play();
}
function buttonStop_click() {
document.getElementById(‘video1’).pause();
}
</script>
</body>
</html>
For the above setup, we are assuming that the test.ogv, test.srt and the HTML file are all on the same folder on the web server.
When the above code is rendered in a browser which understands the “track” HTML5 element, you will notice that when the video plays, subtitles are displayed and are in sync with video being played (even when the video is forwarded/rewinded.
Summary
In this article, we learned how to use the track markup element in HTML5 web pages. I hope you have found this information useful.
About the author
Vipul Patel is a Program Manager currently working at Amazon Corporation. He has formerly worked at Microsoft in the Lync team and in the .NET team (in the Base Class libraries and the Debugging and Profiling team). He can be reached at vipul.patel@hotmail.com
