HTML - <source> tag

The <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

Following is the syntax for HTML <source> tag −

<source src=" " type=" ">

Specific Attributes

The HTML <source> tag also supports the following additional attributes −

S.No. Attribute & Description
1

media

defines the type of media resource
2

src

URL of the media file
3

type

media type of media resource

Example

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>

On running the above code, the output window will pop up, displaying the video uploaded to the webpage.

Example

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>

When we execute the above code, it will generate an output consisting of audio uploaded to the webpage.

Example

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.

<!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>

On running the above code, the output window will pop up, displaying the image along with a text on the webpage.

When the user minimizes the window, the image that is displayed first gets changed and displays another image.

html_tags_reference.htm
Advertisements