HTML source Tag - Lena Design

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

The HTML <source> element specifies alternative video/audio/image files which the browser can choose from, based on browser support (the browser will choose the first <support> it supports).

Example1:

The audio player with two source files (the browser will choose the first <source> it supports):

<!DOCTYPE html>
<html>
<body>

<audio controls>
  <source src="https://lenadesign.org/wp-content/uploads/2021/07/Wooden-Train-Whistle.mp3" type="audio/mpeg">
  <source src="https://lenadesign.org/wp-content/uploads/2021/07/Wooden-Train-Whistle.ogg" type="audio/ogg">
</audio>

</body>
</html>

Output:

Example2:

Use the HTML source element within <picture> element to specify different images based on the viewport width:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<picture>
  <source media="(min-width:650px)" srcset="https://lenadesign.org/wp-content/uploads/2022/01/css-diamond.gif">
  <source media="(min-width:465px)" srcset="https://lenadesign.org/wp-content/uploads/2021/12/cookie.png">
  <img src="https://lenadesign.org/wp-content/uploads/2021/06/ghost-example.jpg" alt="ghost" style="width:auto;">
</picture>

</body>
</html>

Output:

Resize the browser window to load different images:

Example3:

Use the HTML source element within <video> element to play the video:

<!DOCTYPE html> 
<html> 
<body> 

<video width="640" controls>
  <source src="https://videos.files.wordpress.com/lFj3lsG4/valentines-day-movie_dvd.mp4" type="video/mp4">
<source src="https://videos.files.wordpress.com/lFj3lsG4/valentines-day-movie_dvd.ogg" type="video/ogg">
</video>

</body> 
</html>

Output:

Attributes:

media (media_query) – accepts any valid media query specified in a CSS.

sizes – defines image sizes for different page layouts.

src (URL) – defines the URL of the media file (required when <source> is used in <audio> and <video>).

srcset (URL) – defines the URL of the media file (required when <source> is used in <picture>).

type (MIME-type) – defines the MIME-type of the resource.

Enjoy coding!

Share this: