HTML <source> Element

Publish in HTML Tutorial el 25/05/2025 16:19

The <source> element is used to specify multiple media resources for media elements like <audio>, <video>, and <picture>. It allows you to provide alternative media formats for better browser compatibility and responsive design.

Key attributes of <source>:

src: Specifies the URL of the media file
type: Defines the MIME type of the media resource
media: Specifies media queries for responsive images
srcset: Used with <picture> for responsive images
sizes: Defines image sizes for different layouts

Basic Syntax

Example 1: Multiple Video Formats

This example shows how to provide fallback video formats using <source>. The browser will try each source in order until it finds a format it supports.

Play Code

<video controls width="250">
  <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">
  Your browser doesn't support HTML5 video.
</video>

Example 2: Responsive Images with <picture>

The <source> element can be used with <picture> to serve different images based on viewport size or device capabilities.

Play Code

<picture>
  <source media="(min-width: 800px)" srcset="https://samplelib.com/lib/preview/jpeg/sample-city-park-400x300.jpg">
  <source media="(min-width: 400px)" srcset="https://samplelib.com/lib/preview/jpeg/sample-birch-400x300.jpg">
  <img src="https://samplelib.com/lib/preview/jpeg/sample-city-park-400x300.jpg" alt="Example image">
</picture>

Example 3: Audio with Fallback Formats

Similar to video, you can provide multiple audio formats for better browser compatibility.

Play Code

<audio controls>
  <source src="https://samplelib.com/lib/preview/wav/sample-6s.wav" type="audio/wav">
  <source src="https://samplelib.com/lib/preview/mp3/sample-6s.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

Example 4: Dynamic Source Change with JavaScript

This example demonstrates how to change the video source dynamically using JavaScript.

Play Code

<video id="myVideo" controls width="250">
  <source id="vidSource" src="" type="video/mp4">
  Your browser doesn't support HTML5 video.
</video>
<button onclick="changeVideo()">Change Video</button>

<script>
function changeVideo() {
  const video = document.getElementById('myVideo');
  const source = document.getElementById('vidSource');
  source.src = "https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4";
  video.load();
  video.play();
}
</script>

Example 5: Checking Supported Formats with JavaScript

This example shows how to detect which media formats are supported by the browser.

Play Code

<audio id="testAudio" controls>
  <source src="https://samplelib.com/lib/preview/wav/sample-6s.wav" type="audio/wav">
  <source src="https://samplelib.com/lib/preview/mp3/sample-6s.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>
<p id="formatSupport"></p>

<script>
const audio = document.getElementById('testAudio');
const supportText = document.getElementById("formatSupport");

audio.addEventListener('error', function() {
  if (audio.error.code === audio.error.MEDIA_ERR_SRC_NOT_SUPPORTED) {
    supportText.textContent = "Current format not supported, trying next...";
  }
});

audio.addEventListener('canplay', function() {
  const currentSource = audio.currentSrc;
  supportText.textContent = "Playing: " + currentSource.substring(currentSource.lastIndexOf('.') + 1);
});
</script>

Tips and Tricks

Always specify the type attribute to help browsers determine if they can play the media without downloading it first
Order sources from most preferred to least preferred format
For video, place higher quality formats first (like WebM before MP4)
Use media queries with <picture> to optimize image delivery for different screen sizes
Consider using the srcset attribute for resolution switching with responsive images