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.