HTML - <source> tag

HTML <source> tag is an empty element. It denotes the absence of both a closing tag and any content in the tag. It is used to define a variety of media resources in different formats, such as audio, video, and images. To ensure the best cross-browser compatibility, this is important.

The browser can choose from the available format that it supports and play music and video files without any problems. In a single document, the <source> element may be used many times to designate alternate audio, video, and image files in a variety of formats.

If the <source> tag is part of the <audio> or <video> tags, it should come before the <track> tag and after the media files. If it is contained within an <picture> tag, it must come before <img> tag.

Syntax

<source src=" " type=" ">

Attribute

HTML source tag supports Global and Event attributes of HTML. And some specific attributes as well which are listed bellow.

Attribute	Value	Description
media	media_query	Specify the type of media resource.
sizes		Specifies piicture sizes when used on <picture< element.
src	URL	Specify the URL of the media file.
srcset	URL	Specify the URL of the media file when used on <picture< element.
type	MIME-type	media type of media resource
height	pixel	Specify the height of the media when used on <picture< element.
width	pixel	Specify the width of the media when used on <picture< element.

Examples of HTML source Tag

Bellow examples will illustrate the usage of source tag. Where, when and how to use source tag.

Using source tag on Video Element

Following is the example where we are going to use the <source> tag within the <video> to play video.

<!DOCTYPE html>
<html>
<body>
   <video width="250" height="150" controls>
      <source src=
"https://player.vimeo.com/external/415068616.hd.mp4?s=e6dc106b7cccb956aa1d00d705e440977290df18&profile_id=174&oauth2_token_id=57447761.mp4" 
   type="video/mp4">
   </video>
</body>
</html>

Using source tag on Audio Element

Consider another scenario where we are going to use the <source> tag within the <audio> to play audio.

<!DOCTYPE html>
<html>
<body style="background-color:#D5F5E3">
   <audio controls>
      <source src=
"https://samplelib.com/lib/preview/mp3/sample-3s.mp3"
   type="audio/mpeg">
   </audio>
</body>
</html>

Using source tag on Picture Element

Let’s look at another example where we are going to use the <source> tag within <picture> to load different images based on the viewport width. When the user minimizes the window, the image that is displayed first gets changed and displays another image.

<!DOCTYPE html>
<html>
<body>
   <p>When You minimize the window it loads different image on the webpage.</p>
   <picture>
      <source media="(min-width:651px)" 
                 srcset="https://www.tutorialspoint.com/sql/images/sql-mini-logo.jpg">
      <source media="(min-width:464px)" 
                 srcset="https://www.tutorialspoint.com/html/images/html-mini-logo.jpg">
      <img src=
"https://www.tutorialspoint.com/sql/images/sql-mini-logo.jpg"
   alt="Flowers" style="width:auto;">
   </picture>
</body>
</html>

Supported Browsers

Tag
source	Yes 4.0	Yes 9.0	Yes 3.5	Yes 4.0	Yes 10.5

html_tags_reference.htm