Video and audio are a mundane affair these days on the web. The internet isn’t simply text based anymore. Video contributes to almost 40% of search results. From a user’s point of view, multimedia is an interactive and amusing session. On the other hand, for a developer, enhancing the experience was an arduous thing to do until HTML5’s <track>
element came to the rescue.
After reading this article you’ll understand how to add timed media tracks like subtitles to your media files. Also, you’ll get to know how these add to the SEO value of the web page. Before moving ahead, you might want to go through an intro on HTML video and audio, explaining container formats, codecs, markup and the basics.
The <track>
Element
The <track>
element defines any text that you want to display along with the playing media file. Text may include subtitles
, captions
, descriptions
, chapters
or metadata
.
In other words, the <track>
element allows you to specify additional time-synchronized text resources that align with the audio
element’s audio files timeline or the video
element’s video files timeline.
The track element is an empty element, i.e. it must not have a closing tag (meaning it’s a void element). It must be contained inside <video>
or <audio>
tags. Also, if there is any <source>
element inside the video or audio tags, then the <track>
element should appear after the <source>
element.
For example:
<video width="640" height="320" controls>
<source src="some_video.mp4" type="video/mp4">
<source src="some_video.ogg" type="video/ogg">
<track src="some_video_subtitles.srt"
kind="subtitles"
srclang="en"
label="English_subs">
</video>
The src
Attribute
This attribute specifies the source address for the text file that contains the track data, and is naturally a required attribute. The value should be an absolute or relative URL. This means the files need to be put on a web server; the track element cannot be used from a file:// URL.
For example:
<track src="video_captions.srt">
The srclang
Attribute
srclang
defines the language of the time-tracked data. This attribute must be included if the kind
attribute is set to a value of subtitles
(more on that below). The value of the srclang
attribute must be a valid BCP 47 language tag. For instance, the value hi
represents Hindi and en
is used for English. There are about 8,000 language subtags available.
<track src="video_subtitles.srt" kind="subtitles" srclang="en">
THe above example code specifies the language of the text timed track file as English.
The kind
Attribute
This attribute defines the kind of track we want to add. It may contain one of a number of values, each explained below.
subtitles
These are usually the translation of dialogue being played in the video or audio file. These come in handy when the user is unable to understand the language being played in the soundtrack, but when the user can read the dialogues written in the preferred language. Specifying the language of the source is mandatory. This is done by adding the appropriate value to the srclang
attribute:
<track src="video_subtitles.srt" kind="subtitles" srclang="en">
captions:
A caption is a brief description accompanying the video being played. These are appropriate in a case where we want to inform the user of some relevant information or even when the sound is not clear or inaudible. A simple example.
<track src="video_captions.srt" kind="captions">
descriptions:
As the name suggests, these are used to describe the media content. This is appropriate when the user is blind or video is not available or is obscured. Timed tracks that are marked as descriptions are usually synthesized as a separate audio track. For example:
<track src="video_descriptions.srt" kind="descriptions">
metadata
This is intended for timed tracks that offer metadata content. It is not normally displayed by the user agent. The metadata value is meant to be used by a script like JavaScript. Here’s an example:
<track src="video_metadata.srt" kind="metadata">
chapters
This represents a chapter title, intended to be used when the user is navigating the media resource. The tracks that are marked as chapters are usually displayed with an interactive list on the user agent’s interface.
<track src="video_chapters.srt" kind="chapters">
The label
Attribute
This attribute is used to define the title of the text track included in the video/audio file. It is used by the browser while listing the available text tracks and is a user-readable label of the text track.
If you add the label
attribute to the <track>
element, the value of the label
attribute cannot be an empty value, or else the code will not validate. The value must be a string. If this attribute is not present, the browser will assign a default value like “untitled”.
<track src="video_subtitles.srt"
kind="subtitles"
srclang="en"
label="English_subtitles">
In the example above we can see that the label
attribute contains a value of “English_subtitles”.
The default
Attribute
This is a Boolean attribute, used to identify a track as the default track. Obviously, default
can be included with only one <track>
element. It can be enabled if the user’s preferences do not indicate that another track would be more appropriate.
The following example explains that out of the subtitles specified in the three languages present (Hindi, English, and Japanese), the subtitles in Hindi are instructed to be played as the default track:
<track kind="subtitles" src="video_subtitles_hi.srt" srclang="hi" default>
<track kind="subtitles" src="video_subtitles_en.srt" srclang="en">
<track kind="subtitles" src="video_subtitles_ja.srt" srclang="ja">
Now that we’ve examined most of the relevant attributes you can use with the <track>
element, a complete example summarizing the usage of <track>
along with the video
and source
elements is shown below:
<video src="sample.ogv">
<source src="some_video.mp4" type="video/mp4">
<source src="some_video.ogg" type="video/ogg">
<track kind="captions" src="video_captions.srt" srclang="en">
<track kind="descriptions" src="video_desciptions.srt" srclang="en">
<track kind="chapters" src="video_chapters.srt" srclang="en">
<track kind="subtitles" src="video_subtitles_en.srt" srclang="en" default>
<track kind="subtitles" src="video_subtitles_oz.srt" srclang="oz">
<track kind="metadata" src="video_metadata1.srt" srclang="en" label="Metadata 1">
<track kind="metadata" src="video_metadata2.srt" srclang="en" label="Metadata 2">
</video>
SEO Benefits of Media Tracks
The <track>
element has completely opened the doors of video Search Engine Optimization (SEO) and has allowed for a more cost effective way to get your video files better understood by search engines.
The search engines are becoming more multimedia aware and the more information you can attach to your files means better targeted and higher traffic that will convert into income for you.
Some of the key SEO advantages are:
- Improves your search presence: Search engines crawl any text content associated with the video while searching.
- Deep Linking: Search engines return search results that point to a specific part of a video associated with the time codes.
- Associated content: The text files can be easily incorporated into associated text content on the same page.
- Accessibility and UX: The subtitles and captions improve the usability and accessibility for those with disabilities.
- Thumbnail in search results: A video page has the advantage of being displayed as a rich snippet with a thumbnail in search results which can increase click-through rates.
More info on the SEO benefits of video transcripts and captions can be found in this article.
Browser Support for <track>
All things considered, the <track>
element has excellent browser support:
- Chrome
- Firefox 31+
- IE10+
- Safari 6+
- Opera 15+
Demos and Conclusion
To see the <track>
element in action here are two links:
- IE’s Video Caption demo page
- track Example at HTML5 Demos
The <track>
element standardizes adding track data to media files. It enables the use of dynamic content linked to media playback, which in turn adds value to the audio and video elements and has the potential for SEO benefits.
Frequently Asked Questions about HTML5 Track Element
What is the HTML5 track element and what is its primary function?
The HTML5 track element is a powerful tool used in web development. It is primarily used for providing timed text tracks (such as subtitles, captions, descriptions, chapters, or metadata) for media elements like video and audio. This is particularly useful for making multimedia content more accessible to users with hearing impairments or those who speak different languages.
How do I use the HTML5 track element in my code?
To use the HTML5 track element, you need to nest it within your media element (video or audio). You should specify the source of the track file using the ‘src’ attribute, the kind of text track using the ‘kind’ attribute, and the language of the track text using the ‘srclang’ attribute. For example:<video controls>
<source src="myVideo.mp4" type="video/mp4">
<track src="captions_en.vtt" kind="captions" srclang="en" label="English">
</video>
What are the different ‘kind’ attribute values I can use in the track element?
The ‘kind’ attribute in the track element can take several values. These include ‘subtitles’ for translations of dialogue, ‘captions’ for transcription of dialogue and relevant sound effects, ‘descriptions’ for audio descriptions, ‘chapters’ for chapter titles, and ‘metadata’ for tracks used by scripts and not visible to users.
How do I style the captions or subtitles provided by the track element?
You can style the captions or subtitles provided by the track element using CSS. The ::cue pseudo-element can be used to style the text, while the ::cue-region pseudo-element can be used to style the area that contains the text.
Can I use multiple track elements in a single media element?
Yes, you can use multiple track elements in a single media element. This allows you to provide multiple text tracks, which can be useful for providing captions or subtitles in different languages.
What is the ‘default’ attribute in the track element?
The ‘default’ attribute in the track element is a boolean attribute that specifies that the track should be enabled if the user’s preferences do not indicate that another track would be more appropriate. It’s important to note that there should only be one track element with the ‘default’ attribute per media element.
What is the ‘label’ attribute in the track element?
The ‘label’ attribute in the track element provides a title for the track which can be used by the user agent when listing available text tracks.
What file format should I use for the track text?
The track text should be in WebVTT (.vtt) format. This is a simple text format that allows you to specify the timing and content of each text track.
How does the browser determine which track to display?
The browser determines which track to display based on the user’s preferences and the ‘default’ attribute. If the user has not specified any preferences, the track with the ‘default’ attribute will be displayed.
Can I use the track element in all browsers?
The track element is supported in most modern browsers, including Chrome, Firefox, Safari, and Edge. However, it is not supported in Internet Explorer.
Ankul is a freelancer, technical writer, and developer from India. He loves to explore new opportunities and technologies with Android and other mobile platforms being his present muse. He is a co-founder and developer at scheduLAWyer, an Android app.