Easy Tutorial
❮ Att Meta Name Ev Onmouseover ❯

HTML <source> Tag

Example

An audio player with two source files. The browser needs to choose the source file it supports (if it supports both, it can choose either one):

&lt;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>

Browser Support

The numbers in the table indicate the first browser version that supports the tag.

Tag Chrome IE Firefox Safari Opera
<source> 4.0 9.0 3.5 4.0 10.5

Tag Definition and Usage

The <source> tag defines media resources for media elements such as <video> and <audio>.

The <source> tag allows you to specify two video/audio files for the browser to choose from, based on its support for media types or codecs.


Differences Between HTML 4.01 and HTML5

The <source> tag is new in HTML5.


Attributes

Attribute Value Description
media New media_query Specifies the type of media resource for the browser to decide whether to download.
src New URL Specifies the URL of the media file.
type MIME_type Specifies the MIME type of the media resource.
sizes Sets different image sizes for different page layouts.
srcset URL Used when <source> is applied to the <picture> tag. Specifies the image URL to be used in different situations.

More Examples

Example

Using <source> within the <video> tag to set a video:

&lt;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>

Example

Using <source> within the <picture> tag to set images for different screen sizes:

<picture>
  <source media="(min-width:650px)" srcset="https://static.tutorialpro.org/images/tutorialpro-logo.png">
  <source media="(min-width:465px)" srcset="https://static.tutorialpro.org/images/code-icon-script.png">
  <img decoding="async" src="https://static.tutorialpro.org/images/mix/hjkg_icon.png" style="width:auto;">
</picture>

Global Attributes

The <source> tag supports HTML's global attributes.


Event Attributes

The <source> tag supports HTML's event attributes.

❮ Att Meta Name Ev Onmouseover ❯