HTML <source> Tag

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The <source> tag in HTML is used to specify multiple media resources for elements such as <audio> and <video>, allowing the browser to choose the most suitable one based on its capabilities and the available formats. This tag is particularly useful for providing fallback options, ensuring that media content can be played across different browsers and devices even if a specific format is unsupported.

Placed inside a <video> or <audio> element, each <source> tag points to a different media file, and the browser evaluates them in order until it finds one it can play. This enables developers to provide multiple versions of a file in different formats, bitrates, or codecs, improving accessibility and compatibility.

For example, a <video> element might include multiple <source> tags for .mp4, .webm, and .ogg files. The browser attempts to play the first format it supports, skipping the others. If none of the sources are compatible, the content inside the <video> or <audio> tag, such as a text fallback message, is displayed instead.

The <source> tag itself is empty, meaning it does not have any closing content, and it cannot contain other HTML elements. Its primary role is to act as a declarative reference to media files for the parent media element.

Properties

Permitted Parents: A media element - <audio> or <video> - and it must be placed before any flow content or <track> element. A <picture> element, and it must be placed before the <img> element
Content: None. It is an empty element.
Start/End Tags: Start tag: required, End tag: forbidden

Example

HTML

<video width="300" height="240" controls>

  <source src="audio/toy.mp4" type="video/mp4">

  <source src="audio/toy.ogv" type="video/ogg">

  Your browser does not support the video tag.

</video>

Result

Editor

Attributes

src: Specifies the URL of the media file.
media: Specifies the type of media resource.
type: Specifies the MIME type of the media resource.

Global Attributes

The <source> tag also supports the Global Attributes in HTML5

Event Attributes

The <source> tag also supports the Event Attributes in HTML5

Browser Support

The following information will show you the current browser support for the HTML <source> tag. Hover over a browser icon to see the version that first introduced support for this HTML tag.