HtmlHow-ToBeginner · 3 min read

How to Add Source to Video and Audio in HTML Easily

To add source files to video and audio elements in HTML, use one or more <source> tags inside them. Each <source> tag specifies a media file and its format, allowing browsers to pick the best supported file.

📐

Syntax

The video and audio elements use one or more <source> tags inside them to specify media files. Each <source> tag has two main attributes:

src: The URL or path to the media file.
type: The media file's MIME type (like video/mp4 or audio/mpeg), which helps the browser decide if it can play that file.

Browsers try each <source> in order and use the first one they support.

html

<video controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  Your browser does not support the video tag.
</video>

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  Your browser does not support the audio tag.
</audio>

💻

Example

This example shows a video and an audio player with multiple source files. The browser will pick the first supported format to play.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Video and Audio Source Example</title>
</head>
<body>
  <h2>Video Player</h2>
  <video controls width="320">
    <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" type="video/webm">
    <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4">
    Sorry, your browser does not support the video tag.
  </video>

  <h2>Audio Player</h2>
  <audio controls>
    <source src="https://interactive-examples.mdn.mozilla.net/media/examples/t-rex-roar.mp3" type="audio/mpeg">
    <source src="https://interactive-examples.mdn.mozilla.net/media/examples/t-rex-roar.ogg" type="audio/ogg">
    Sorry, your browser does not support the audio tag.
  </audio>
</body>
</html>

Output

A webpage with a video player showing a flower video and an audio player playing a T-Rex roar sound, each with controls to play/pause.

⚠️

Common Pitfalls

Not including multiple <source> tags can cause playback issues if the browser does not support the single format provided.
Forgetting the type attribute can slow down browser decisions or cause it to skip a playable source.
Placing the src attribute directly on the video or audio tag without <source> works but limits format fallback options.
Not providing fallback text inside the video or audio tags leaves users without information if their browser can't play the media.

html

<!-- Wrong: single source without type -->
<video controls src="video.unknownformat">
  Your browser does not support the video tag.
</video>

<!-- Right: multiple sources with type -->
<video controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  Your browser does not support the video tag.
</video>

📊

Quick Reference

Remember these tips when adding sources to video and audio:

Use multiple <source> tags for better browser support.
Always include the type attribute to specify the media format.
Provide fallback text inside the media tags for unsupported browsers.
Use the controls attribute to show playback controls.

✅

Key Takeaways

Use multiple tags inside

Always include the type attribute to help browsers pick the right file quickly.

Provide fallback text inside media tags for browsers that do not support them.

The controls attribute adds play/pause buttons for user interaction.