html
  1. html-source-tag

HTML <source> Tag

The HTML <source> tag is used to specify multiple video or audio sources for media elements like <video> and <audio>.

Syntax

<source src="url" type="mime_type">
  • The src attribute specifies the URL of the media file.
  • The type attribute specifies the MIME type of the media file.

Multiple <source> tags can be used to provide different versions of the same media content in different formats or resolutions for compatibility with different browsers.

Example

<video width="320" height="240" controls>
  <source src="video.webm" type="video/mp4">
  <source src="video.webm" type="video/ogg">
  Your browser does not support the video tag.
</video>
Try Playground

In the above example, two <source> tags are used to provide two versions of the same video in mp4 and ogg formats.

Explanation

The HTML <source> tag is usually used in conjunction with the <video> and <audio> tags to specify different versions of the same media content. The browser will choose the most appropriate source based on its supported types and file formats.

The type attribute is used to specify the MIME type of the media file. This ensures that the browser can accurately identify the type of media that is being loaded.

If no suitable source is found, the message inside the media element tag is displayed to indicate that the content cannot be played.

Use

The HTML <source> tag can be used to provide fallback options for media files in different formats or resolutions, which can ensure better compatibility with different browsers.

In addition, it can be used to specify media files in different languages, so that users can select their preferred option for viewing or listening.

Important Points

  • The src attribute of the <source> tag should point to the correct URL of the media file, otherwise it will not work properly.
  • The type attribute should accurately specify the MIME type of the media file.
  • The <source> tag should be placed inside either a <video> or an <audio> tag.
  • The order of the <source> tags matters. The browser will select the first source that is compatible with its supported types and file formats.

Summary

The HTML <source> tag is used inside the <video> and <audio> tags to specify multiple versions of the same media content in different formats or resolutions. It ensures better compatibility with different browsers and enables users to choose their preferred option for viewing or listening. The src attribute should point to the correct URL of the media file, and the type attribute should accurately specify the MIME type of the media file.

Published on: