HTML Tag: <source>

Usage of <source>

The <source> tag is used to specify multiple media sources for a <video> or <audio> element. It allows browsers to select the most appropriate source based on factors such as file format, resolution, and bitrate.

Attributes of <source>

src: Specifies the URL of the media file.
type: Indicates the MIME type of the media file, e.g. "video/mp4" or "audio/mpeg".
media: Specifies the media conditions that the source should be used for, e.g. "screen" or "print".

Examples with <source>

<video>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
</video>

In this example, browsers will first try to load and play the video.mp4 file. If the browser does not support the MP4 format, it will fall back to the video.webm file.

Exploring the <source> Tag

<!DOCTYPE html>
<html>
<head>
  <title>Exploring the &lt;source&gt; Tag</title>
</head>
<body>
  <video controls>
    <source src="my-video.mp4" type="video/mp4">
    <source src="my-video.webm" type="video/webm">
  </video>
</body>
</html>

How it works:

The <video> element creates a video player with video controls.
The first <source> tag specifies a source for MP4 video files.
The second <source> tag specifies a source for WebM video files.
The browser will select the most appropriate source based on your device and capabilities.

Accessibility and Ease of Use

The <source> tag supports accessibility by providing multiple media formats, ensuring that users with different devices and preferences can access the content. Additionally, browsers can use the media conditions in the <source> tag to automatically select the most suitable source for the current viewing environment.