mozilla
Your Search Results

    <source>

    Summary

    The HTML <source> element is used to specify multiple media resources for <picture>, <audio> and <video> elements. It is an empty element. It is commonly used to serve the same media in multiple formats supported by different browsers.

    Usage Context

    Attributes

    This element includes the global attributes.

    sizes
    Is a list of source sizes that describes the final rendered width of the image represented by the source. Each source size consists of a comma-separated list of media condition-length pairs. This information is used by the browser to determine, before laying the page out, which image defined in srcset to use.
    The sizes attribute has an effect only when the <source> element is the direct child of a <picture> element.
    src
    Required for <audio> and <video>, address of the media resource. The value of this attribute is ignored when the <source> element is placed inside a <picture> element.
    srcset
    A list of one or more strings separated by commas indicating a set of possible images represented by the source for the browser to use. Each string is composed of:
    1. one URL to an image,
    2. a width descriptor, that is a positive integer directly followed by 'w'. The default value, if missing, is the infinity.
    3. a pixel density descriptor, that is a positive floating number directly followed by 'x'. The default value, if missing, is 1x.

    Each string in the list must have at least a width descriptor or a pixel density descriptor to be valid. Among the list, there must be only one string containing the same tuple of width descriptor and pixel density descriptor.
    The browser chooses the most adequate image to display at a given point of time.
    The srcset attribute has an effect only when the <source> element is the direct child of a <picture> element.

    type
    The MIME-type of the resource, optionally with a codecs parameter. See RFC 4281 for information about how to specify codecs.
    media
    Media query of the resource's intended media; this should be used only in a <picture> element.

    If the type attribute isn't specified, the media's type is retrieved from the server and checked to see if Gecko can handle it; if it can't be rendered, the next source is checked. If the type attribute is specified, it's compared against the types Gecko can play, and if it's not recognized, the server doesn't even get queried; instead, the next source element is checked at once.

    Examples

    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.

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

    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) behind the dom.image.picture.enabled preference (off by default) ? ? ?
    srcset attribute ? 33 (33) behind the dom.image.picture.enabled preference (off by default) ? ? ?
    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) behind the dom.image.picture.enabled preference (off by default) ? ? ?
    srcset attribute ? 33.0 (33) behind the dom.image.picture.enabled preference (off by default) ? ? ?

    Gecko-specific notes

    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

    Document Tags and Contributors

    Last updated by: Zcorpan,