HTML - <source> tag

Quiz

Introduction to <source> Tag

The HTML <source> tag is an empty element, meaning it has no closing tag or content. It is used to define various media resources in different formats, such as audio, video, and images, ensuring optimal cross-browser compatibility.

The browser can select a supported format and play music and video files without issues. In a single document, the <source> element can be used multiple times to specify alternative audio, video, and image files in various format.

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

Syntax

Following is the syntax of the <source> tag −

<source src=" " type=" ">

Attributes

The HTML <source> tag supports Global and Event attributes, along with some specific attributes listed bellow.

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

Example: <source> Tag on Video Element

In the following example, we use the <source> tag within the <video> element to play a video. This HTML code creates a video player with specifies dimensions, using a source URL for an MP4 video file.

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

Example: <source> Tag on Audio Element

In another scenario, we use the <source> tag within the <audio> element to play audio. This HTML code creates an audio player with controls, suing a source URL for an MP3 audio file.

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

Example: <source> Tag on Picture Element

Lets consider another example where we use the <source> tag within <picture> to load different images based on the viewport width. When the user minimizes the window, the initially displayed image changes to 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

Print Page