HTML <source> tag

Definition and Usage

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

<source> The tag allows you to specify alternate video/audio/image files, and the browser can choose the first one it supports based on browser support or viewport width. <source>.

See also:

HTML Tutorial:HTML Video

HTML Tutorial:HTML Audio

HTML DOM Reference Manual:Source Object

Instance

Example 1

This is an audio player with two audio source files. The browser will choose the first one it supports. <source>:

<audio controls>
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>

Try it yourself

Example 2

Use in <video> <source> Play video:

<video width="640" height="400" controls>
  <source src="shanghai.mp4" type="video/mp4">
  <source src="shanghai.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

Try it yourself

Example 3

Use in <picture> <source> To define different images based on viewport width:

<picture>
  <source media="(min-width:650px)" srcset="flowers-1.jpg">
  <source media="(min-width:465px)" srcset="flowers-2.jpg">
  <img src="flowers-3.jpg" alt="Flowers" style="width:auto;">
</picture>

Try it yourself

Attribute

Attribute Value Description
media Media Query Accepts any valid media query, usually defined in CSS.
sizes Specify the image size for different page layouts.
src URL

Used to specify the URL of the media file.

This attribute is required when <source> is used for <audio> and <video>.
srcset URL

Used to specify the URL of the image to be used in different cases.

This attribute is required when <source> is used with <picture>.
type MIME Type Specifies the MIME type of the resource.

Global Attributes

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

Event Attributes

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

Default CSS Settings

None.

Browser Support

The numbers in the table indicate the first browser version to fully support this attribute.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.5 4.0 10.5