Revision 999191 of <source>

<div>{{HTMLRef}}</div>

<p>The <strong>HTML <code>&lt;source&gt;</code> element</strong> is used to specify multiple media resources for {{HTMLElement("picture")}}, {{HTMLElement("audio")}} and {{HTMLElement("video")}} elements. It is an empty element. It is commonly used to serve the same media in <a href="/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements">multiple formats supported by different browsers</a>.</p>

<h2 id="Usage_Context">Usage Context</h2>

<ul>
 <li><dfn>Permitted parent elements</dfn> A media element ({{HTMLElement("audio")}} or {{HTMLelement("video")}}, and it should be placed before any <a href="/en-US/docs/HTML/Content_categories#Flow_content">flow content</a> or {{HTMLElement("track")}} element.<br />
  A {{HTMLElement("picture")}} element, and it should be placed&nbsp;before the {{HTMLElement("img")}} element.</li>
</ul>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th>
   <td>None.</td>
  </tr>
  <tr>
   <th scope="row">Permitted content</th>
   <td>None, it is an {{Glossary("empty element")}}.</td>
  </tr>
  <tr>
   <th scope="row">Tag omission</th>
   <td>It must have start tag, but must not have an end tag.</td>
  </tr>
  <tr>
   <th scope="row">DOM interface</th>
   <td>{{domxref("HTMLSourceElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Attributes">Attributes</h2>

<p>This element includes the <a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes">global attributes</a>.</p>

<dl>
 <dt>{{htmlattrdef("sizes")}} {{experimental_inline}}</dt>
 <dd>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 {{htmlattrxref("srcset", "source")}} to use.<br />
 The <code>sizes</code> attribute has an effect only when the {{HTMLElement("source")}} element is the direct child of a {{HTMLElement("picture")}} element.</dd>
 <dt>{{htmlattrdef("src")}}</dt>
 <dd>Required for {{HTMLElement("audio")}} and {{HTMLElement("video")}}, address of the media resource. The value of this attribute is ignored when the <code>&lt;source&gt;</code> element is placed inside a {{HTMLElement("picture")}} element.</dd>
 <dt>{{htmlattrdef("srcset")}} {{experimental_inline}}</dt>
 <dd>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:
 <ol>
  <li>one URL to an image,</li>
  <li>a width descriptor, that is a positive integer directly followed by <code>'w'</code>. The default value, if missing, is the infinity.</li>
  <li>a pixel density descriptor, that is a positive floating number directly followed by <code>'x'</code>. The default value, if missing, is <code>1x</code>.</li>
 </ol>

 <p>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.<br />
  The browser chooses the most adequate image to display at a given point of time.<br />
  The <code>srcset</code> attribute has an effect only when the {{HTMLElement("source")}} element is the direct child of a {{HTMLElement("picture")}} element.</p>
 </dd>
 <dt>{{htmlattrdef("type")}}</dt>
 <dd>The MIME-type of the resource, optionally with a <code>codecs</code> parameter. See <a class="external" href="https://tools.ietf.org/html/rfc4281">RFC 4281</a> for information about how to specify codecs.</dd>
 <dt>{{htmlattrdef("media")}} {{experimental_inline}}</dt>
 <dd><a class="internal" href="/en-US/docs/CSS/Media_queries">Media query</a> of the resource's intended media; this should be used only in a {{HTMLElement("picture")}} element.</dd>
</dl>

<p>If the <strong>type</strong> 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 <strong>source</strong> is checked. If the <strong>type</strong> 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 <strong>source</strong> element is checked at once.</p>

<h2 id="Examples">Examples</h2>

<p>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<code> audio</code> or <code>video</code> element is not supported by the browser, a notice is displayed instead.&nbsp; If the browser supports the element but does not support any of the specified formats, an <code>error</code> event is raised and the default media controls (if enabled) will indicate an error. See also the list of <a href="/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements">media formats supported by the audio and video elements</a> in various browsers.</p>

<pre class="brush: html">
&lt;video controls&gt;
  &lt;source src="foo.webm" type="video/webm"&gt;
  &lt;source src="foo.ogg" type="video/ogg"&gt; 
  &lt;source src="foo.mov" type="video/quicktime"&gt;
&nbsp; I'm sorry; your browser doesn't support HTML5 video.
&lt;/video&gt;
</pre>

<p>For more examples, see <a class="internal" href="/en-US/docs/Using_HTML5_audio_and_video">Using audio and video in Firefox</a>.</p>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'edits.html#the-source-element-when-used-with-the-picture-element', '&lt;source&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>Initial definition of <code>&lt;source&gt;</code> used inside a {{HTMLElement("picture")}} element.</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'the-video-element.html#the-source-element', '&lt;source&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>Initial definition of <code>&lt;source&gt;</code> used inside a media element, {{HTMLElement("audio")}} or {{HTMLElement("video")}}.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
   <td>9.0</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><code>media</code> attribute</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop("15.0")}}</td>
   <td>9.0</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><code>sizes</code> attribute</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoDesktop(33)}}<sup>[1]</sup></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>srcset</code> attribute</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoDesktop(33)}}<sup>[1]</sup></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile("1.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>media</code> attribute</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile("15.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>sizes</code> attribute</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile(33)}}<sup>[1]</sup></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>srcset</code> attribute</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile(33)}}<sup>[1]</sup></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] This feature is behind the <code>dom.image.picture.enabled</code> preference, defaulting to <code>false</code>.</p>

<p>Currently, only a small subset of the functionality is implemented — Gecko picks the first source element that has a type matching <a href="/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements">the MIME-type of a supported media format</a>; see {{bug(449363)}} for details.</p>

<h2 id="See_also">See also</h2>

<ul>
 <li>{{HTMLElement("picture")}} element</li>
</ul>