Widely available Useful whenever multiple formats, codecs, or responsive media variants are needed.

<source>

The <source> HTML element specifies one or more media resources for the <picture>, <audio>, and <video> elements. It is a void element, which means that it has no content and does not require a closing tag. This element is commonly used to offer the same media content in multiple file formats in order to provide compatibility with a broad range of browsers given their differing support for image file formats and media file formats.

MediaSourcesFormats

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
<source>
3
12
3.5
3.1
18
2
HTML attribute
height
90
90
108
15
90
15
media
3
12
15
3.1
18
2
src
3
12
3.5
3.1
18
2
type
3
12
3.5
3.1
18
2
width
90
90
108
15
90
15
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Implementation note
  • Until Firefox 15, Firefox picked the first source element that has a type matching the MIME-type of a supported media format; see bug 449363 for details.
Notes 1 item(s)
Implementation note
  • `media` is supported in `<source>` within `<picture>`, `<audio>`, and `<video>`. In Firefox 53-119, `media` is supported only in `<source>` within `<picture>`.

Syntax

HTML 
<video controls>
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
</video>

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="画像">
</picture>

Live demo

Picture source selection

Use source inside picture to pick assets based on layout conditions.

PreviewFullscreen

Audio and video source markup

Illustrate how multiple source elements sit under a media element.

PreviewFullscreen

Source strategy table

Summarize common source use cases for picture, audio, and video.

PreviewFullscreen

Use cases

  • Format fallback

    Offer multiple media formats so browsers can select the one they support best.

  • Responsive variants

    Pair source with picture or video to deliver different assets under different conditions.

Cautions

  • Multiple sources increase maintenance overhead, so keep the selection strategy simple and intentional.
  • The fallback element still needs core attributes such as alt text or controls where relevant.

Accessibility

  • Alternative sources should preserve the same essential meaning so captions, transcripts, and labels stay accurate.

Related links