<source> element is used to define multiple media resources for elements like
<video>. Its primary role is to ensure content is displayed optimally, adapting both to browser capabilities and varying viewport conditions.
Examples and Usage
Being an empty(void) element,
<source> does not contain any content and does not require a closing tag. Its common purpose is to offer multiple media formats for elements, addressing broader compatibility across browsers with varying support for media file types.
Below, we'll observe illustrative examples that highlight some of its capabilities.
<video controls> <source src="sample-video.webm" type="video/webm"> <source src="sample-video.mp4" type="video/mp4"> <p>Your browser doesn't support the given video file.</p> </video>
In the provided example, a video player is created using the
<video> element with the
controls attribute to allow user interaction. Within the video player, two
<source> elements are specified, each with a
type attribute. The first
<source> element, which points to
sample-video.webm, has its
type attribute set to
video/webm, indicating the WebM format.
If the browser supports this format, it will display the video from the mentioned URL. If not, it moves to the next
<source> with the MP4 format specified by
type="video/mp4". Should both formats be unsupported by the browser, a descriptive message wrapped in a
<p> tag alerts the user.
Next, let's explore its potential usage when working with images.
<picture> <source srcset="landscape-image.png" media="(min-width: 800px)"> <source srcset="medium-width-image.png" media="(min-width: 600px)"> <img src="portrait-image.png" alt="A landscape view."> </picture>
<picture> element encapsulates a set of
<source> elements and an
<img> tag. Each
<source> element uses the
srcset attribute to specify the image's URL and the media attribute to define the condition under which that image should be displayed.
<source> targets viewports wider than 800 pixels with its
media="(min-width: 800px)" attribute, suggesting larger screens. The second
<source> targets viewports between 600 and 800 pixels in width. If none of the conditions from the media attributes are met, the browser defaults to the
<img> tag, rendering the
portrait-image.png with its alternative text description, "A landscape view".
The intricacies of media formats can be challenging, especially given the diverse nature of browser support and the nuances of each format. While we've touched upon some primary considerations, the broader context of media formats is vast and complex. For an in-depth understanding, consult this comprehensive guide on media formats.
In addition to global attributes, the
<source> element comes with a set of specific attributes to customize its behavior.
|Specifies the intended media type of the resource using a media query. Used only when the parent is a |
|Indicates the MIME type of the resource, optionally with a codecs parameter. Determines if the user agent can present the resource.|
|Specifies the address of the media resource. It's required when the parent element is either |
|A list of possible images for the browser to use, separated by commas. Each string specifies an image's URL and a width or pixel density descriptor. Used only when the parent is a |
|Describes the expected display width of the image. Effective only when width descriptors are provided with |
|Denotes the image's inherent width in pixels. It's mandatory to provide the value as an integer without any associated units. Used only when the parent is a |
|Denotes the image's inherent height in pixels. It's mandatory to provide the value as an integer without any associated units. Used only when the parent is a |
<source> element does not inherently possess specific accessibility roles or properties. Given its primary function to specify media resources, its impact is largely behind-the-scenes, and its semantic meaning might not be explicitly recognized by assistive technologies.
As a result, the element doesn't directly interact with ARIA roles or
aria-* attributes. When implementing media elements like
<picture>, it's crucial that the main elements are made accessible, as the
<source> element serves to support them.
<source>element provides considerable benefits, especially in mobile contexts. By allowing browsers to prioritize among multiple media formats, we can reduce load times. Furthermore, by specifying the media format through the
typeattribute, we can improve browser performance; this is because browsers can quickly decide on the suitable format without needing to sample or preliminarily download any media content.
srcsetattribute can specify multiple images for the browser to choose from. Each entry consists of a URL and a width (
300w) or pixel density descriptor (
2x). It's important not to mix width and pixel density descriptors within the same srcset.
When using the
sizesattribute, width descriptors must be specified in
sizesattribute essentially tells the browser how wide the image will be rendered on the page, based on different viewport sizes.
typeattribute is beneficial for performance. If specified, the browser will only query the server for the media resource if it can handle the given type. If not recognized, the browser skips to the next
<source>without making unnecessary requests.
For a detailed breakdown of specific browser nuances and older version support refer to the first link in the Useful Resources below.