<source>-media source

The <source> tag in HTML5 is used to provide multiple media sources for <audio> and <video> elements. It allows developers to specify alternative media files, ensuring the browser can select the most suitable resource based on its supported formats, thereby improving compatibility.

Basic Syntax of <source>

<source> is an empty tag, typically nested inside <audio> or <video>. Its core attributes include:

• src: Specifies the path (URL) to the media file.
• type: Declares the MIME type of the media file, which may include codec information.
• media (optional): A media query condition for adapting to different devices.

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

Multiple Format Alternatives and Browser Compatibility

Browser support for media formats varies significantly. For example:

• MP4 (H.264) is supported by almost all modern browsers.
• WebM performs well in Chrome and Firefox but may require additional configuration in Safari.
• Ogg Theora is gradually being phased out but can still serve as a fallback.

By prioritizing resources with <source>, the browser selects the first playable format from top to bottom:

<audio controls>
  <source src="audio.opus" type="audio/ogg; codecs=opus">
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.aac" type="audio/aac">
</audio>

Importance of the type Attribute

The type attribute not only specifies the MIME type but can also include codec parameters, helping the browser determine decodability in advance:

<video>
  <source src="movie.webm" type="video/webm; codecs=vp9,opus">
  <source src="movie.mp4" type="video/mp4; codecs=avc1.4d002a">
</video>

Omitting type forces the browser to download part of the file to check compatibility, potentially impacting performance.

Dynamic Adaptation with the media Attribute

The media attribute allows loading different resources based on screen size or device features:

<video>
  <source src="video-large.mp4" media="(min-width: 800px)">
  <source src="video-small.mp4" media="(max-width: 799px)">
</video>

Combining Responsive Design and Art Direction

Use <picture> and <source> together for more complex media adaptation:

<picture>
  <source media="(min-width: 1200px)" srcset="large.jpg">
  <source media="(min-width: 600px)" srcset="medium.jpg">
  <img src="small.jpg" alt="Responsive image">
</picture>

Practical Considerations

1. Order Matters: Browsers check <source> tags in sequence, so prioritize the most ideal format (e.g., WebM) first.
2. Fallback Content: Add text or legacy Flash plugin prompts inside <audio>/<video> for better compatibility.
3. Performance Optimization: Avoid redundant requests by limiting <source> tags to 2-3 alternatives.

<video controls width="600">
  <source src="high-quality.mp4" type="video/mp4" media="(min-width: 800px)">
  <source src="medium-quality.mp4" type="video/mp4">
  <source src="low-quality.mp4" type="video/mp4" media="(max-width: 480px)">
  <p>Please upgrade your browser or try another device to watch the video.</p>
</video>

JavaScript Example for Dynamic Media Loading

Use scripts to dynamically switch <source> for more flexible control:

const video = document.querySelector('video');
const sources = video.querySelectorAll('source');

function changeSource(newSrc, newType) {
  sources[0].src = newSrc;
  sources[0].type = newType;
  video.load(); // Reload the video
}

// Example: Switch sources based on network conditions
if (navigator.connection.effectiveType === '4g') {
  changeSource('uhd.mp4', 'video/mp4');
} else {
  changeSource('sd.mp4', 'video/mp4');
}

Collaboration with the <track> Tag

<source> is often paired with subtitle tracks <track> for a complete multimedia experience:

<video controls>
  <source src="film.mp4" type="video/mp4">
  <track src="subtitles-en.vtt" kind="subtitles" srclang="en" label="English">
  <track src="subtitles-zh.vtt" kind="subtitles" srclang="zh" label="Chinese">
</video>