Code has been added to clipboard!

HTML track Tag

Reading time 2 min
Published Jun 29, 2017
Updated Sep 11, 2019

HTML track Tag: Main Tips

  • Media elements like <video> and <audio> can use text tracks. They are visible while the media is playing, and defined by track HTML tags.
  • The track tag is newly added in HTML5.
  • You don't need to use a closing tag.

Using track: HTML Media Text

The track tag is useful when defining HTML subtitles, captions, or other media text. It defines the text tracks for all the media elements:

Example
<video controls width="325" height="245">
  <source src="random_video.mp4" type="video/mp4">
  <source src="track_video.mp4" type="video/mp4">
  <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
  <track src="lithuanian_subtitles_lt.vtt" kind="subtitles" srclang="lt" label="Lithuanian">
</video>

The text must be in the Web Video Text Tracks format and have a .vvt extension. You can also specify the timing of the track, which is crucial for HTML subtitles.

Udacity
Pros
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid certificates of completion
Coursera
Pros
  • Professional service
  • Flexible timetables
  • A variety of features to choose from
Main Features
  • Professional certificates of completion
  • University-level courses
  • Multiple Online degree programs
Datacamp
Pros
  • Great user experience
  • Offers quality content
  • Very transparent with their pricing
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable

Available track Tag Attributes

How to add subtitles to a video? How to include captions or descriptions? First of all, you need to specify the location of the text track you need.

src is required to include. It defines the source of the track file (an URL address):

Example
<track src="subtitles_en.vtt">

kind sets the kind of the text track:

Example
<track src="subtitles_en.vtt" kind="subtitles" srclang="en">

There are five possible values for this attribute:

Value Definition
Subtitles The default kind of track, providing translation of the video, as well as additional content (i.e., time or place).
Metadata Used by scripts and not accessible by the user
Chapters Used by the user to navigate the media
Captions Provide transcription and translation of the video, as well as non-verbal information (i.e., sound effects). Might be used by deaf or hearing-impaired users, or displayed when the sound is muted.
Descriptions Describe the video in text. Might be used by blind or vision-impaired users, or displayed when the browser can't show the video.

default sets the track to be enabled by default:

Example
<track src="subtitles_en.vtt" default>

label defines the title of the text track:

Example
<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">

When the value of kind is HTML subtitles, you must also include the srclang attribute. It sets the language for the track text:

Example
<track src="subtitles_en.vtt" kind="subtitles" srclang="en">

Note: when using srclang, make sure you define the language in a valid BCP 47 language subtag.

Browser Support

Browser image
Chrome
23+
Browser image
Edge
All
Browser image
Firefox
-
Browser image
IE
10+
Browser image
Opera
12.1+
Browser image
Safari
6+

Mobile Browser Support

Browser image
Chrome
25+
Browser image
Firefox
-
Browser image
Opera
-
Browser image
Safari
-

Latest Udacity Coupon Found:

Verified STAFF PICK

75% OFF COURSES

Udacity Black Friday Offer

The best time to save on Udacity courses is now - follow this coupon to access a 75% Udacity Black Friday discount & enjoy learning at a very low cost!

Expiration date: 27/02/2021
3176 People Used
Only 97 Left
Rating
5.0