source: The Media Source element

The <source> HTML element specifies multiple media resources for the <picture>, the <audio> element, or the <video> element. It is a void element, meaning that it has no content and does not have a closing tag.

Attributes

Specific attributes

Required attributes

src="[URL]" specifies the URL of the media resource.

Recommended attributes

media="[media query]" specifies the media query of the resource’s intended media; this should be used only in a <picture> element.

type="[MIME type]" specifies the MIME media type of the resource, optionally with a codecs parameter.

Global attributes

accesskey Specifies a keyboard shortcut to activate or focus an element.

aria-* Defines accessibility properties and states for assistive technologies.

class Specifies one or more CSS class names for styling the element.

data-* Stores custom data private to the page or application.

dir Sets the text direction (left-to-right, right-to-left, or auto).

hidden Hides the element from display and assistive technologies.

id Defines a unique identifier for the element within the document.

inputmode Hints which virtual keyboard type to display on mobile devices.

itemid Provides a global identifier for microdata items.

itemprop Defines a property name-value pair for microdata.

itemref Associates properties with an item via element IDs for microdata.

itemscope Creates a new microdata item container.

itemtype Specifies the vocabulary URL for microdata items (like Schema.org).

lang Specifies the primary language of the element’s content.

nonce Provides a cryptographic nonce for Content Security Policy.

role Defines the element’s semantic role for accessibility.

tabindex Controls keyboard navigation order and focusability.

title Provides advisory information displayed as a tooltip.

Example

<video controls>
  <source src="/videos/interview.mp4" type="video/mp4">
  <source src="/videos/interview.webm" type="video/webm">
  <source src="/videos/interview.ogv" type="video/ogg">
  <p>Your browser doesn't support HTML video. <a href="/videos/interview.mp4">Download the MP4</a>.</p>
</video>

<audio controls>
  <source src="/podcasts/episode1.mp3" type="audio/mpeg">
  <source src="/podcasts/episode1.ogg" type="audio/ogg">
  <source src="/podcasts/episode1.wav" type="audio/wav">
  <p>Your browser doesn't support HTML audio. <a href="/podcasts/episode1.mp3">Download the podcast</a>.</p>
</audio>