Source and Track Elements in HTML
Multiple Formats and Captions

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

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.