docs.rodeo

MDN Web Docs mirror

: The Media or Image Source element

{{HTMLSidebar}} 

The <source> HTML element specifies one or more media resources for the {{HTMLElement("picture")}} , {{HTMLElement("audio")}} , and {{HTMLElement("video")}}  elements. It is a {{glossary("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.

{{EmbedInteractiveExample("pages/tabbed/source.html", "tabbed-standard")}} 

Attributes

This element supports all global attributes. In addition, the following attributes can be used with it:

Usage notes

The <source> element is a {{glossary("void element")}} , which means that it not only has no content but also has no closing tag. That is, you never use </source> in your HTML.

The browser goes through a list of <source> elements to find a format it supports. It uses the first one it can display. For each <source> element:

If none of the <source> elements provide a usable source:

For information about image formats supported by web browsers and guidance on selecting appropriate formats to use, see our Image file type and format guide. For details on the video and audio media types you can use, see the Media type and format guide.

Examples

Using the type attribute with <video>

This example demonstrates how to offer a video in different formats: WebM for browsers that support it, Ogg for those that support Ogg, and QuickTime for browsers that support QuickTime. If the <audio> or <video> element is not supported by the browser, a notice is displayed instead. If the browser supports the element but does not support any of the specified formats, an error event is raised and the default media controls (if enabled) will indicate an error. For more details on which media file formats to use and their browser support, refer to our Media type and format guide.

<video controls>
  <source src="foo.webm" type="video/webm" />
  <source src="foo.ogg" type="video/ogg" />
  <source src="foo.mov" type="video/quicktime" />
  I'm sorry; your browser doesn't support HTML video.
</video>

Using the media attribute with <video>

This example demonstrates how to offer an alternate source file for viewports above a certain width. When a user’s browsing environment meets the specified media condition, the associated <source> element is chosen. The contents of its src attribute are then requested and rendered. If the media condition does not match, the browser will move on to the next <source> in the list. The second <source> option in the code below has no media condition, so it will be selected for all other browsing contexts.

<video controls>
  <source src="foo-large.webm" media="(min-width: 800px)" />
  <source src="foo.webm" />
  I'm sorry; your browser doesn't support HTML video.
</video>

For more examples, the HTML video and audio article in the Learn area is a great resource.

Using the media attribute with <picture>

In this example, two <source> elements are included within {{HTMLElement("picture")}} , providing versions of an image to use when the available space exceeds certain widths. If the available width is less than the smallest of these widths, the browser will fall back to the image specified in the {{HTMLElement("img")}}  element.

<picture>
  <source srcset="mdn-logo-wide.png" media="(min-width: 800px)" />
  <source srcset="mdn-logo-medium.png" media="(min-width: 600px)" />
  <img src="mdn-logo-narrow.png" alt="MDN Web Docs" />
</picture>

With the <picture> element, you must always include an <img> with a fallback image. Also, make sure to add an alt attribute for accessibility, unless the image is purely decorative and irrelevant to the content.

Using height and width attributes with <picture>

In this example, three <source> elements with height and width attributes are included in a {{HTMLElement("picture")}}  element. A media query allows the browser to select an image to display with the height and width attributes based on the viewport size.

<picture>
  <source
    srcset="landscape.png"
    media="(min-width: 1000px)"
    width="1000"
    height="400" />
  <source
    srcset="square.png"
    media="(min-width: 800px)"
    width="800"
    height="800" />
  <source
    srcset="portrait.png"
    media="(min-width: 600px)"
    width="600"
    height="800" />
  <img
    src="fallback.png"
    alt="Image used when the browser does not support the sources"
    width="500"
    height="400" />
</picture>

Technical summary

Content categories None.
Permitted content None; it is a `{{Glossary("void element")}}` .
Tag omission Must have a start tag and must not have an end tag.
Permitted parents
A media element—`{{HTMLElement("audio")}}`  or `{{HTMLElement("video")}}` —and it must be placed before any flow content or `{{HTMLElement("track")}}`  element.
A `{{HTMLElement("picture")}}`  element, and it must be placed before the `{{HTMLElement("img")}}`  element.
Implicit ARIA role No corresponding role
Permitted ARIA roles No role permitted
DOM interface `{{domxref("HTMLSourceElement")}}` 

Specifications

{{Specifications}} 

Browser compatibility

{{Compat}} 

See also

In this article

View on MDN