Definition
The <source> HTML element is used as a child element within the <video> and <audio> elements to specify the source media files for multimedia content. It allows you to provide multiple versions of the same media content in different formats or resolutions, ensuring compatibility across various browsers and devices.
Here’s an example of how to use the <source> element within a <video> element:
<video controls>
<source src="video.mp4" type="video/mp4" />
<source src="video.webm" type="video/webm" />
Your browser does not support the video tag.
</video>
In this example, two <source> elements are used to specify two different video formats: MP4 and WebM. The src attribute specifies the URL of the media file, and the type attribute defines the MIME type of the media file. Browsers will try to find a supported format and play the first one that matches their capabilities.
The text “Your browser does not support the video tag.” is placed between the opening and closing <video> tags. This text is displayed if the browser doesn’t support the HTML5 video element or none of the specified source formats.
You can include multiple <source> elements with different file formats to ensure compatibility across various browsers and platforms. The browser will automatically select and play the first supported source format from the list.
Similarly, the <source> element can be used within an <audio> element to provide different audio formats for cross-browser compatibility.
In summary, the <source> element is used within the <video> and <audio> elements to specify different source media files for multimedia content. By including multiple <source> elements with different file formats, you can ensure broader compatibility and provide fallback options for various browsers and devices.