HTML <source> Tag

The <source> tag is used to define multiple media resources in different format: video, audio or image. This is necessary to achieve best possible cross browser compatibility: from the possible options browser can choose the format, which it supports and play audio and video files without any difficulty.

The <source> element can be used multiple times in one document to indicate the alternative audio/video files and images of numerous formats.

If <source> tag is included in <audio> or <video> tags, it should be placed before <img> if it’s inside <picture> tag.

Syntax

The closing tag </source> is not mandatory.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <picture>
      <source media="(min-width: 650px)" alt="img_1" srcset="/uploads/media/news_gallery/0001/01/thumb_348_news_gallery_list.jpeg">
      <source media="(min-width: 430px)" alt="img_2" srcset="/uploads/media/news_gallery/0001/01/thumb_316_news_gallery_list.jpeg">
      <img src="/uploads/media/news_gallery/0001/01/thumb_366_news_gallery_list.jpeg" alt="img" style="width:auto;">
    </picture>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
  </body>
</html>

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      video {
      width: 300px; 
      height: 220px;
      border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <video controls>
      <source src=”http://techslides.com/demos/sample-videos/small.ogv” type=video/ogg>
      <source src="/build/videos/arcnet.io(7-sec).mp4" type=video/mp4>
    </video>
    <p>Some information about video</p>
  </body>
</html>

Attributes

Attributes Value Description
media media_query Indicates that the file is adapted to certain type of devices.
sizes Indicates relative acceptable size of the source.
Added in HTML5.
src URL Indicates URL address of the media file.
srcset URL Indicates the images which are used in different situations ( for ipad screens, for retina screens etc.)
Added in HTML5.
type Value for video:
video/ogg
video/mp4
video/webm
Value for audio:
audio/ogg
audio/mpeg
Indicates mime-type of media source.

The <source> tag also supports the Global Attributes and the Event Attributes.

Browser support

4+ 9+ 3.5+ 4+ 10.5+