HTML <source> Tag

The <source> tag in HTML is used to specify multiple media resources for <audio> and <video> elements. It allows developers to provide alternative media files for different browsers and scenarios, ensuring a more reliable and versatile multimedia experience. This is especially important because different browsers support different media formats. By using multiple <source> tags, you can increase the likelihood of your media playing successfully on a wider range of browsers.

Syntax

<source src="url" type="mime_type" media="media_query" srcset="url_list" sizes="size_list" >

Attributes

Example

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

More Examples

Basic Audio Example

This example shows how to include two audio sources: one in MP3 and another in OGG format for browser compatibility.

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

Using Media Queries with Video

This example demonstrates how you can use media attributes to provide a higher resolution video for larger screens.

<video controls>
  <source src="video-small.mp4" type="video/mp4" media="(max-width: 768px)">
  <source src="video-large.mp4" type="video/mp4" media="(min-width: 769px)">
    Your browser does not support the video tag.
</video>

Fallback Message

In the above examples, notice the fallback message "Your browser does not support the video tag." or "Your browser does not support the audio element.". This content is displayed if the browser fails to load any of the source files, which is useful when none of the formats are supported.

Using Multiple Sources for different bitrates

You can provide multiple sources to allow users with varied network conditions to have a better experience.

<video controls>
  <source src="video-low.mp4" type="video/mp4" media="(max-network:3G)">
  <source src="video-medium.mp4" type="video/mp4"  media="(min-network:4G) and (max-network:5G)">
  <source src="video-high.mp4" type="video/mp4" media="(min-network:6G)">
    Your browser does not support the video tag.
</video>

NOTE: max-network and min-network are not standard media features and may not be supported by all browsers. This is just a demo to showcase a potential usage.

Browser Support

The <source> tag is well-supported across all modern browsers:

• Chrome: Full support
• Edge: Full support
• Firefox: Full support
• Safari: Full support
• Opera: Full support

Notes and Tips

• Always specify the type attribute with the correct MIME type. This helps the browser decide if it can play the media file without downloading it unnecessarily.
• List sources in order of preference (e.g., more modern formats like WebM before older formats like Ogg). The browser will choose the first source that it can play.
• The srcset and sizes attributes are less common with <audio> and <video> sources, as they are primarily used for <img> elements for responsive images. However they can be used for specialized media delivery mechanisms.
• Use fallback content (text inside the <audio> or <video> tags) to inform the user if their browser does not support the media elements.
• Consider using a CDN (Content Delivery Network) for hosting media files, ensuring faster delivery and reduced load on your server.
• Use media queries effectively to deliver optimized media based on network conditions or device characteristics.
• Keep your media files optimized for web delivery, balancing quality with file size.