Tutorials References Exercises Videos Menu
Create Website Get Certified Upgrade

HTML <source> Tag


Example

An audio player with two source files. The browser will choose the first <source> it supports:

<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 browser support or viewport width. The browser will choose the first <source> it supports.


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

Attributes

Attribute Value Description
media media_query Accepts any valid media query that would normally be defined in a CSS
sizes   Specifies image sizes for different page layouts
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
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

Use <source> within <video> to play a video:

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>
Try it Yourself »

Example

Use <source> within <picture> to define different images based on the viewport width:

<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: HTML Video

HTML tutorial: HTML Audio

HTML DOM reference: Source Object


Default CSS Settings

None.