HTML track Tag: How to Add Subtitles to Videos

The track tag in HTML adds text tracks like subtitles and captions to media. It improves video access and helps search engines. It also supports multiple languages.

Understand the <track> Tag in HTML

The <track> tag adds extra text content to a media file. It works only inside <video> or <audio>. You can use it for subtitles or captions. It does not show on its own. It only supports media with the right player or browser.

This is the basic tag:

<track src="file.vtt" kind="subtitles" srclang="en" label="English" default>

Each part tells the browser what kind of track it is and what language it uses. Also, it tells what the track to load by default.

So, how does it support <video> and <audio> Tags?

You use the <track> tag inside a <video> or <audio> element. It does not work on its own. The browser reads it and shows subtitles or captions. It also reads metadata while the media plays.

Users can turn text tracks on or off if the player supports it.

Here is how each attribute works:

• src: sets the file path to the track. It must be a .vtt file. Required.
• kind: tells the browser what kind of track it is. Common values include subtitles, captions, descriptions, chapters, and metadata. Optional but needed.
• srclang: shows the track language. Use language codes like en, fr, or es. Required when kind="subtitles".
• label: gives the track a name. This name appears in the video player.
• default: loads this track first unless the user chooses another.

So, why should you use the <track> tag?

Here is a list that shows you the common use cases of the <track> tag:

• Add subtitles for users who do not speak the audio language.
• Show captions for users who are deaf.
• Describe scenes with sound for blind users.
• Mark chapters so users can jump to sections in long videos.
• Add extra metadata like keywords or tags for custom player tools.

Now that you know where to use it, let us look at the different types of tracks.

Types of Tracks

The kind attribute tells the browser what type of track you added. You choose from the following:

• subtitles: show spoken words in text. Good for users who speak other languages.
• captions: show both spoken words and sound effects. Help users who cannot hear the audio.
• descriptions: explain what happens on screen with text. Used for users with low vision.
• chapters: break videos into named parts. This allows you to skip parts you interested.
• metadata: stores extra data for scripts or plugins. It does not show to the user.

Each kind has a clear purpose. You choose based on what your media needs.

How to Create .vtt Files for <track> Tag in HTML

WebVTT files use simple text. You set the time and the text to show. Here is a sample format:

00:00:01.000 --> 00:00:04.000
Welcome to our video guide.

00:00:05.000 --> 00:00:08.000
In this part, you will learn the basics.

Save this as file.vtt and link it in the src attribute.

You can use these tools in it:

• Notepad or VS Code to write the file
• VTT Creator (web-based editors)
• W3C Validator to check syntax
• Subtitle Edit for advanced control

You must save the file as UTF-8 without BOM. Some editors offer this option with save.

Examples of <track> Tag in HTML

English Subtitles for a Video:

<video controls width="400">
  <source src="lesson.mp4" type="video/mp4">
  <track src="english.vtt" kind="subtitles" srclang="en" label="English" default>
</video>

This example shows a video with English subtitles. The track loads by default. The user can turn subtitles on or off. This helps non-native English speakers.

Captions and Subtitles with Language Switch:

<video controls width="400">
  <source src="interview.mp4" type="video/mp4">
  <track src="english_captions.vtt" kind="captions" srclang="en" label="English" default>
  <track src="french_subs.vtt" kind="subtitles" srclang="fr" label="Français">
</video>

This example includes both captions and subtitles. English captions load first. French users can switch to French subtitles.

Metadata Track for Chapter Navigation:

<video controls width="400">
  <source src="documentary.mp4" type="video/mp4">
  <track src="chapters.vtt" kind="chapters" srclang="en" label="Chapters">
</video>

This uses the chapters kind. Each entry in the VTT file marks a section of the video. A media player can show a list of chapters to help users jump to key parts.

Descriptive Text for Visually Impaired Users:

<video controls width="400">
  <source src="nature.mp4" type="video/mp4">
  <track src="descriptions.vtt" kind="descriptions" srclang="en" label="Audio Descriptions">
</video>

This track type adds scene descriptions. It helps blind or low-vision users understand what happens on screen. The browser or screen reader can read the text aloud if supported.

Wrapping Up

In this article, you learned what the <track> tag does, how to use it. Also, you learned how to create .vtt files. You also saw the types of tracks and where they fit best.

Here is a quick recap:

• The <track> tag adds extra text tracks to media.
• You use it inside <video> or <audio> tags.
• You choose the track type with the kind attribute.
• Subtitles and chapters help make content better for all users.
• Use .vtt files to store your text tracks.

FAQs

<video controls>
  <source src="movie.mp4" type="video/mp4">
  <track src="subtitles.vtt" kind="subtitles" srclang="en" label="English" default>
</video>

Similar Reads