HTML - <source>
The HTML <source> element specifies multiple media resources for either the <picture>, the <audio> or the <video> element. It is an empty element. It is commonly used to serve the same media content in multiple formats supported by different browsers.
Example
This example demonstrates how to offer a video in Ogg format for users whose browsers support Ogg format, and a QuickTime format video for users whose browsers support that. If the audio or video element is not supported by the browser, a notice is displayed instead. If the browser supports the element but does not support any of the specified formats, an error event is raised and the default media controls (if enabled) will indicate an error. See also the list of media formats supported by the audio and video elements in various browsers.
<video controls> <source src="foo.webm" type="video/webm"> <source src="foo.ogg" type="video/ogg"> <source src="foo.mov" type="video/quicktime"> I'm sorry; your browser doesn't support HTML5 video. </video>
For more examples, see Using audio and video in Firefox.
Description
The HTML <source> element specifies multiple media resources for either the <picture>, the <audio> or the <video> element. It is an empty element. It is commonly used to serve the same media content in multiple formats supported by different browsers.
|
Usage Context |
A media element (<audio> or <video>, and it should be placed before any flow content or <track> element. |
|---|---|
| Permitted parent elements | A <picture> element, and it should be placed before the <img> element. |
| Content categories | None. |
| Permitted content | None, it is an empty element. |
| Tag omission | It must have start tag, but must not have an end tag. |
| DOM interface | HTMLSourceElement |
Browser Compatibility
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | (Yes) | 3.5 (1.9.1) | 9.0 | (Yes) | (Yes) |
media attribute |
(Yes) | 15.0 (15.0) | 9.0 | (Yes) | (Yes) |
sizes attribute |
? | 33 (33)[1] | ? | ? | ? |
srcset attribute |
? | 33 (33)[1] | ? | ? | ? |
| Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | (Yes) | 1.0 (1.0) | ? | ? | ? |
media attribute |
(Yes) | 15.0 (15.0) | ? | ? | ? |
sizes attribute |
? | 33.0 (33)[1] | ? | ? | ? |
srcset attribute |
? | 33.0 (33)[1] | ? | ? | ? |
[1] This feature is behind the dom.image.picture.enabled preference, defaulting to false.
Currently, only a small subset of the functionality is implemented — Gecko picks the first source element that has a type matching the MIME-type of a supported media format; see bug 449363 for details.
See Also
<picture>element
Specifications
| Specification | Status | Comment |
|---|---|---|
| WHATWG HTML Living Standard The definition of '<source>' in that specification. |
Living Standard | Initial definition of <source> used inside a <picture> element. |
| WHATWG HTML Living Standard The definition of '<source>' in that specification. |
Living Standard | Initial definition of <source> used inside a media element, <audio> or <video>. |
License
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/html/element/source