THE WORLD'S LARGEST WEB DEVELOPER SITE

HTML <source> Tag


Example

An audio player with two source files. The browser should choose which file (if any) it has support for:

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>
Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The <source> tag is used to specify multiple media resources for media elements, such as <video>, <audio>, and <picture>.

The <source> tag allows you to specify alternative video/audio/image files which the browser may choose from, based on its media type, codec support or media query.


Browser Support

The numbers in the table specify the first browser version that fully supports the element.

Element
<source> 4.0 9.0 3.5 4.0 10.5

Differences Between HTML 4.01 and HTML5

The <source> tag is new in HTML5.


Attributes

Attribute Value Description
src URL Required when <source> is used in <audio> and <video>. Specifies the URL of the media file
srcset URL Required when <source> is used in <picture>. Specifies the URL of the image to use in different situations
media media_query Accepts any valid media query that would normally be defined in a CSS
sizes   Specifies image sizes for different page layouts
type MIME-type Specifies the MIME-type of the resource

Global Attributes

The <source> tag also supports the Global Attributes in HTML.


Event Attributes

The <source> tag also supports the Event Attributes in HTML.


More Examples

Example

A <picture> element with two source files, and a fallback image:

<picture>
  <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width: 465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
Try it Yourself »

Related Pages

HTML tutorial: HTML5 Video

HTML tutorial: HTML5 Audio

HTML DOM reference: Source Object


Default CSS Settings

None.