ProgramGuru

HTML source and track Tags

HTML <source> and <track> Elements: Smarter Media Delivery

Want your videos to play in every browser, and your captions to be accessible for everyone? Enter the <source> and <track> elements — two tiny tags that make a huge difference in how your audio and video are delivered and understood.

The <source> Tag: Supporting Multiple Formats

Different browsers support different media formats. With the <source> tag, you can provide several versions of the same audio or video, and the browser will choose the first format it supports.

Basic Syntax

<video controls width="320">
  <source src="banana.mp4" type="video/mp4">
  <source src="banana.webm" type="video/webm">
  Your browser does not support this video.
</video>

[ Video appears with controls ]

If the browser can play MP4, it will. If not, it tries WebM. If neither works, the fallback text appears.

Using <source> with <audio>

<audio controls>
  <source src="apple.ogg" type="audio/ogg">
  <source src="apple.mp3" type="audio/mpeg">
  Audio playback is not supported on your device.
</audio>

This increases the chances of successful playback across browsers and devices.

The <track> Tag: Captions, Subtitles, and More

The <track> element is used within the <video> tag to add text tracks, such as subtitles, captions, descriptions, or metadata.

Basic Syntax

<video controls width="320">
  <source src="cherry.mp4" type="video/mp4">
  <track src="cherry-captions.vtt" kind="subtitles" srclang="en" label="English">
</video>

track Attributes Explained

| Attribute | Description | |-----------|-------------| | src | Path to the subtitle or caption file | | kind | Type of text track: subtitles, captions, descriptions, chapters, metadata | | srclang | Language of the text (e.g. en, fr) | | label | What the user sees in the language menu | | default | Marks the track as selected by default |

Example: Subtitled Video

<video controls width="480">
  <source src="fruit-tour.mp4" type="video/mp4">
  <track src="fruit-tour.vtt" kind="subtitles" srclang="en" label="English" default>
  <track src="fruit-tour-fr.vtt" kind="subtitles" srclang="fr" label="Français">
</video>

The viewer can choose between English and French subtitles, or default to English if no choice is made.

What Is a .vtt File?

WebVTT (Web Video Text Tracks) is the format required for subtitle and caption files. Here’s a small example of its content:

00:00:01.000 --> 00:00:04.000
Hello! Welcome to the fruit tour.

00:00:05.000 --> 00:00:07.000
Here, we grow apples, bananas, and cherries.

Accessibility Benefits

  • Captions and subtitles make your content usable for hearing-impaired users
  • track with kind="descriptions" can offer narration for visually impaired users
  • Multilingual support increases your global reach

Summary

The <source> and <track> tags give your multimedia superpowers. You’ve learned how to:

  • Use <source> to provide multiple media formats
  • Add <track> elements for subtitles, captions, and accessibility
  • Understand key attributes like kind, srclang, and label

Check your understanding 1

What is the primary purpose of the <source> element in HTML multimedia?
Choose one answer. You can try again.

Answer and explanation

To provide multiple file formats for media fallback

The <source> tag allows specifying multiple media file formats, enabling browsers to choose the supported one for playback.

Check your understanding 2

The <track> element is used for adding captions or subtitles to audio and video content.
Choose one answer. You can try again.

Answer and explanation

True

The <track> tag is specifically designed to provide text tracks such as captions, subtitles, or descriptions for audio and video elements.

Check your understanding 3

Choose the option that lists all and only the correct statements.

  1. subtitles
  2. captions
  3. metadata
  4. formats
Which of the following are valid values for the kind attribute of the <track> element?
Choose one answer. You can try again.

Answer and explanation

Statements 1 and 2 and 3

The kind attribute can be 'subtitles', 'captions', 'descriptions', 'chapters', or 'metadata', but not 'formats'. It defines the role of the track.

Check your understanding 4

Where should the <source> and <track> elements be placed in an HTML document?
Choose one answer. You can try again.

Answer and explanation

Inside the <code><audio></code> or <code><video></code> elements

<source> and <track> elements must be nested inside the <audio> or <video> tags to function correctly.

Check your understanding 5

The browser automatically selects the first supported <source> element when multiple are provided.
Choose one answer. You can try again.

Answer and explanation

True

When multiple <source> elements are specified, the browser picks the first format it supports, ensuring broader compatibility.

Check your understanding 6

Choose the option that lists all and only the correct statements.

  1. src
  2. kind
  3. label
  4. controls
Which attributes are essential in the <track> element for proper caption display?
Choose one answer. You can try again.

Answer and explanation

Statements 1 and 2 and 3

The src, kind, and label attributes are required for the <track> element. The controls attribute is used in <audio> or <video>, not <track>.

What’s Next?

Next, we’ll wrap up the media section by exploring best practices for accessible multimedia and how to ensure every visitor can engage with your content.

Reaching the recap and completing the quizzes are separate milestones.

    Next lesson: HTML Media Accessibility →