HTML Media Sources Tutorial - SOURCE Element for Audio and Video

Understanding HTML Media Sources

The HTML <source> element can provide alternative media files for an <audio> or <video> element.

Instead of depending on a single media file, multiple sources can be listed so the browser can choose a format it supports.

The <source> Element

The <source> element specifies a media resource that the browser can use with an <audio> or <video> element.

<audio controls>
  <source src="/audio-video/audio.mp3" type="audio/mpeg">
</audio>

The <source> element is a void element, so it does not have a closing tag.

src vs <source>

A single media file can be specified directly with the src attribute on an <audio> or <video> element.

<audio src="/audio-video/audio.mp3" controls></audio>

When alternative media files are needed, nested <source> elements can be used instead.

<audio controls>
  <source src="/audio-video/audio.mp3" type="audio/mpeg">
  <source src="/audio-video/audio.ogg" type="audio/ogg">
</audio>

Using <source> elements makes it possible to list several versions of the same media content.

Multiple Media Sources

Multiple <source> elements can provide the same audio or video content in different formats.

<audio controls>
  <source src="/audio-video/audio.mp3" type="audio/mpeg">
  <source src="/audio-video/audio.ogg" type="audio/ogg">
  <source src="/audio-video/audio.wav" type="audio/wav">
</audio>

The files should contain equivalent content so the user receives the same audio or video regardless of which source the browser selects.

Source Order

The browser evaluates media sources in the order they appear and uses the first suitable source it can play.

<audio controls>
  <source src="/audio-video/audio.mp3" type="audio/mpeg">
  <source src="/audio-video/audio.ogg" type="audio/ogg">
  <source src="/audio-video/audio.wav" type="audio/wav">
</audio>

Because source order matters, the preferred format should normally be listed before alternative formats.

The type Attribute

The type attribute specifies the MIME type of a media source.

<source src="/audio-video/audio.mp3" type="audio/mpeg">
<source src="/audio-video/audio.ogg" type="audio/ogg">
<source src="/audio-video/audio.wav" type="audio/wav">

Providing the media type allows the browser to determine whether it is likely to support a source without first having to retrieve the entire media file.

Audio Sources

The <source> element is particularly easy to demonstrate with the three versions of the audio file used throughout this tutorial section.

<audio controls preload="metadata">
  <source src="/audio-video/audio.mp3" type="audio/mpeg">
  <source src="/audio-video/audio.ogg" type="audio/ogg">
  <source src="/audio-video/audio.wav" type="audio/wav">
  Your browser does not support the HTML audio element.
</audio>

The browser selects a source it can play and presents it through the same audio player controls.

Video Sources

The same technique works with the <video> element when multiple versions of a video are available.

<video controls preload="metadata">
  <source src="/audio-video/movie.mp4" type="video/mp4">
  Your browser does not support the HTML video element.
</video>

Only one video source is needed when that format provides the browser support required by the website. Multiple <source> elements are useful when genuine alternative versions of the same video are available.

Fallback Content

Fallback content can be placed after the <source> elements and before the closing </audio> or </video> tag.

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

The fallback content is intended for browsers that cannot use the media element rather than as an alternative displayed alongside a working media player.

Media Source Example

The following example uses the MP3, Ogg, and WAV versions of the same audio recording. Try changing the order of the <source> elements or temporarily removing a source to experiment with how the browser selects the available media.

Play in Editor

Media Source Best Practices

Use <source> when alternative versions of the same media content are available.
List the preferred media source before alternative sources.
Provide the correct type value for each source.
Make sure alternative sources contain equivalent media content.
Do not create additional media formats simply to increase the number of <source> elements when they provide no practical compatibility benefit.
Include useful fallback content after the media sources.

Summary

The HTML <source> element provides alternative media resources for <audio> and <video>. Each source identifies a media file with src and can identify its MIME type with type.

When several sources are provided, the browser evaluates them in order and selects a suitable format it can play, allowing the same media content to be delivered in alternative formats when necessary.