Tag <source> In Html
In this post, we will discuss about Tag source through examples in the expectation that it will satisfy our requirements.
The <source> tag in HTML is used to specify multiple media resources for an HTML media element, such as <video> or <audio>.
A player for audio files with two sources. Browsers will select the first source they support:
Example:
Tag <source> Usage
A Tag <source> is employed to describe a variety of media sources for various media types, for example <video>, <audio> and <pictures>.
By choosing an alternate video/audio/image file in <source> tag, you can determine which file the browser will choose depending on the browser’s support or viewport width. It will select the first source it supports.
Use <source> within <video> to play a video:
Example:
The can be used within an image to define different images based on the viewport size, as follows:
Example:
The following code will display a video player with different sources for different video quality based on the user’s internet speed:
Example:
Key Features of Source Tag
Here are some key features of the <source> tag:
- The <source> tag allows developers to specify multiple sources for a media element, such as different file formats or different resolutions. This ensures that the media can be played on a wide range of devices and platforms.
- The <source> tag also allows developers to specify an order of preference for the media sources. This means that the media element will attempt to play the first source first, and if that is not supported, it will move on to the next source in the list.
- The <source> tag requires a “type” attribute that specifies the MIME type of the media resource. This ensures that the browser can properly interpret and play the media.
- In case none of the sources specified in the <source> tag are supported by the browser, developers can include fallback content within the media element using the <video> or <audio> tags.
- By providing multiple sources for a media element, developers can ensure that the content is accessible to users with different devices and network capabilities. This can help to improve the overall user experience and ensure that the content is accessible to a wider audience.
Attributes
Global
The Tag source <source> also accepts the Global Attributes in HTML.
Event
Tag source <source> also accommodates the Event Attributes in HTML.
Attributes List
| Attributes | Value | Overview |
|---|---|---|
| media | media_query | It supports any kind of media query that is typically specified in CSS. |
| sizes | Sets the size of images for different page layouts. | |
| src | URL | It is essential when <source> is used in <audio> and <video>. Provide the URL of the media file. |
| srcset | URL | This is needed whenever <source> is used in <picture>. Provide the URL for a specific image depending on the situation. |
| type | MIME-type | Indicates the MIME-type of the resource. |
Browser Compatibility
Numbers in the table indicate the earliest browser version fully compatible with the element.
| Element |  |  |  |  |  |
|---|---|---|---|---|---|
| <source> | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
HTML Source Tag Benefits
The <source> tag in HTML provides several benefits, some of them are given below :
- The <source> tag allows developers to provide multiple versions of a media file, such as different video file formats or audio codecs, to ensure that the media can be played on a wide range of devices and platforms.
- Developers can use the <source> tag to specify an order of preference for the media files, allowing the browser to select the best option for the user’s device and network conditions.
- By providing multiple versions of a media file, developers can ensure that the content is accessible to users with different devices, screen sizes, and network speeds.
- The <source> tag also provides a way to provide fallback content, such as a message or an image, in case none of the media files specified in the tag are supported by the browser.
- Using the <source> tag can help improve the performance of media-heavy web pages by ensuring that the correct version of the media file is loaded for the user’s device and network conditions, reducing the load time and improving the overall user experience.
