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.

HTML
<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  

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

Element HTML HTML embedded content Media Reference Web