HTML <source> Tag – Media Sources
📌 Introduction
The <source> tag is used to specify multiple media files for:
<audio><video><picture>
It helps the browser choose the best supported format automatically.
🧱 Syntax
Inside <video>
<video controls>
<source src="video.mp4" type="video/mp4" />
</video>
Inside <audio>
<audio controls>
<source src="audio.mp3" type="audio/mpeg" />
</audio>
💡 Example (Video)
<!DOCTYPE html>
<html>
<head>
<title>Source Example</title>
</head>
<body>
<h1>Video with Multiple Sources</h1>
<video controls width="400">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.webm" type="video/webm" />
Your browser does not support the video tag.
</video>
</body>
</html>
🖥️ Output Explanation
- The browser checks each
<source> - It picks the first supported format
- If none work, fallback text is shown
🎯 Why <source> is Important
Different browsers support different formats:
| Type | Formats |
|---|---|
| Video | MP4, WebM, OGG |
| Audio | MP3, OGG, WAV |
✔ <source> ensures compatibility
🔄 How Browser Chooses
- Checks first
<source> - If not supported → tries next
- Stops when it finds a compatible format
💡 Example (Audio)
<audio controls>
<source src="audio.mp3" type="audio/mpeg" />
<source src="audio.ogg" type="audio/ogg" />
Your browser does not support audio.
</audio>
🎯 When to Use <source>
Use it when:
- You want cross-browser compatibility
- You provide multiple formats
- You are building professional media players
⚠️ Important Notes
- Always specify
typeattribute - Place
<source>inside<audio>,<video>, or<picture> - Order matters (best format first)
🚫 Common Mistakes
- Using only one format ❌
- Missing
typeattribute ❌ - Putting
<source>outside media tags ❌
🎨 Example Tip
<video controls>
<source src="video.mp4" type="video/mp4" />
</video>
✔ Always include fallback text for older browsers
🧪 Mini Exercise
Create a media player that:
- Has a video with 2 formats (
.mp4and.webm) - Has an audio file with 2 formats
- Includes fallback text