---
title: <source>
slug: Web/HTML/Element/source
tags:
  - Element
  - HTML
  - HTML embedded content
  - Media
  - Reference
  - Web
translation_of: Web/HTML/Element/source
---
<h2 id="Sumari">Sumari</h2>

<p>L'<strong>element HTML <code>&lt;source&gt;</code></strong> especifica múltiples recursos multimèdia, ja sigui per l'element {{HTMLElement("picture")}}, {{HTMLElement("audio")}} o {{HTMLElement("video")}}. És un element buit. S'utilitza comunament per servir el mateix contingut multimèdia en<a href="https://developer.mozilla.org/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements"> múltiples formats suportats pels diferents navegadors</a>.</p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row">
    <p>Contexte d'ùs</p>
   </th>
   <td>Un element multimèdia {{HTMLElement("audio")}} o {{HTMLelement("video")}}, s'ha de col·locar abans de qualsevol <a href="/en-US/docs/HTML/Content_categories#Flow_content">contingut dinàmic</a> o element {{HTMLElement("track")}}.</td>
  </tr>
  <tr>
   <th scope="row">Elements pares permesos</th>
   <td>Un element {{HTMLElement("picture")}}, s'ha de col·locar abans que l'element {{HTMLElement ("img")}}.</td>
  </tr>
  <tr>
   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Categories de contingut</a></th>
   <td>Cap.</td>
  </tr>
  <tr>
   <th scope="row">Contingut permès</th>
   <td>Cap, és un {{Glossary("empty element")}}.</td>
  </tr>
  <tr>
   <th scope="row">Omissió de l'etiqueta</th>
   <td><span id="result_box" lang="ca"><span>Ha de tenir</span> <span>una etiqueta</span> <span>d'inici,</span> <span>però</span> <span>no ha de tenir</span> <span>una etiqueta</span> <span>de tancament.</span></span></td>
  </tr>
  <tr>
   <th scope="row">Interfície DOM</th>
   <td>{{domxref("HTMLSourceElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Atributs">Atributs</h2>

<p>Aquest element inclou els <a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes">atributs globals</a>.</p>

<dl>
 <dt>{{htmlattrdef("sizes")}} {{experimental_inline}}</dt>
 <dd>És una llista de mides de font que descriu l'ample final donat de la imatge representada per l'origen. Cada mida de font consisteix en una llista separada per comes de parells de condició-longitud del medi. Aquesta informació és utilitzada pel navegador per determinar, abans de col·locar la pàgina, quina imatge es defineix en {{htmlattrxref ( "srcset", "source")}} per usar. L'atribut <code>sizes</code> només té efecte quan l'element {{HTMLElement("source")}} és el fill directe d'un element {{HTMLElement("picture")}}.</dd>
 <dt>{{htmlattrdef("src")}}</dt>
 <dd>Obligatori per {{HTMLElement("audio")}} i {{HTMLElement("video")}}, l'adreça del recurs de medi. El valor d'aquest atribut s'ignora quan l'element <code>&lt;source&gt;</code> es col·loca dins d'un element {{HTMLElement("picture")}}.</dd>
 <dt>{{htmlattrdef("srcset")}} {{experimental_inline}}</dt>
 <dd>Una llista d'una o més cadenes separades per comes que indiquen un conjunt de possibles imatges representades per la font per a l'ús del navegador. Cada cadena es compon de:
 <ol>
  <li><span id="result_box" lang="ca"><span>un URL</span> <span>a</span> <span>una imatge,</span></span></li>
  <li><span id="result_box" lang="ca"><span>un descriptor</span> <span>d'amplada, que</span> <span>és</span> <span>un enter</span> <span>positiu</span> <span>seguit</span> <span>directament</span> <span>per <code>'</code></span><code><span>w'</span></code><span>.</span> <span>El valor</span> <span>per defecte,</span> <span>si és que</span> <span>cal,</span> <span>és</span> <span>l'infinit.</span></span></li>
  <li>un descriptor de densitat de píxels, que és un nombre flotant positiu seguit directament per <code>'x'</code>. El valor per defecte, si és que cal, és <code>1x</code>.</li>
 </ol>

 <p>Cada cadena de la llista ha de tenir almenys un descriptor d'ample o un descriptor de densitat de píxels per ser vàlida. Entre la llista, hi ha d'haver una sola cadena que contingui la mateixa tupla de descriptor d'ample i descriptor de densitat de píxels.<br>
  El navegador escull la imatge més adequada per mostrar-la en un moment donat.<br>
  L'atribut <code>srcset</code> només té efecte quan l'element {{HTMLElement("source")}} és el fill directe d'un element {{HTMLElement("picture")}}.</p>
 </dd>
 <dt>{{htmlattrdef("type")}}</dt>
 <dd>El tipus MIME del recurs, opcionalment amb un paràmetre <code>codecs</code>. Veure <a class="external" href="http://tools.ietf.org/html/rfc4281">RFC 4281</a> per obtenir informació sobre com especificar els còdecs.</dd>
 <dt>{{htmlattrdef("media")}} {{experimental_inline}}</dt>
 <dd>Consulta de mitjans dels mitjans de comunicació previstos del recurs; això s'ha d'utilitzar només en un element {{HTMLElement("picture")}}.</dd>
</dl>

<p>Si no s'especifica l'atribut <strong>type</strong>, el tipus del mitjà es recupera del servidor i es verifica si Gecko pot manejar-ho; Si no es pot processar, es comprova la font següent. Si s'especifica l'atribut <strong>type</strong>, es compara amb els tipus que Gecko pot reproduir i, si no es reconeix, el servidor ni tan sols el consulta; En el seu lloc, el següent element font es comprova alhora.</p>

<h2 id="Exemples">Exemples</h2>

<p>Aquest exemple demostra com oferir un vídeo en format Ogg per als usuaris que tinguin el navegador compatible amb el format Ogg, i un format de vídeo de QuickTime per als usuaris de navegadors que donin aquest suport. Si l'element <code>audio</code> o <code> video</code> no és compatible amb el navegador, apareixerà un avís al seu lloc. Si el navegador és compatible amb l'element, però no admet qualsevol dels formats especificats, es genera un esdeveniment d'error i els controls multimèdia per defecte (si està activat) donarà un error. Veure també la llista de <a href="https://developer.mozilla.org/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements">formats de mitjans suportats pels elements audio i video</a> en diferents navegadors.</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;
  I'm sorry; your browser doesn't support HTML5 video.
&lt;/video&gt;
</pre>

<p><span class="short_text" id="result_box" lang="ca"><span>Per a més</span> <span>exemples</span><span>,</span> <span>vegeu</span></span> <a class="internal" href="/en-US/docs/Using_HTML5_audio_and_video">Utilitzant àudio i video en Firefox</a>.</p>

<h2 id="Especificacions">Especificacions</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificació</th>
   <th scope="col">Estat</th>
   <th scope="col">Comentari</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>Definició inicial de <code>&lt;source&gt;</code> utilitzat dins d'un element {{HTMLElement("picture")}}.</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'the-video-element.html#the-source-element', '&lt;source&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>Definició inicial de <code>&lt;source&gt;</code> utilitzat dins d'un element multimedia, {{HTMLElement("audio")}} o {{HTMLElement("video")}}.</td>
  </tr>
 </tbody>
</table>

<h2 id="Navegadors_compatibles">Navegadors compatibles</h2>

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

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Suport bàsic</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
   <td>9.0</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td>atribut <code>media</code></td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop("15.0")}}</td>
   <td>9.0</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td>atribut <code>sizes</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoDesktop(33)}}<sup>[1]</sup></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td>atribut <code>srcset</code></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>Característica</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Suport bàsic</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile("1.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td>atribut <code>media</code></td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile("15.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td>atribut <code>sizes</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile(33)}}<sup>[1]</sup></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td>atribut <code>srcset</code></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] <span id="result_box" lang="ca"><span>Aquesta característica</span> <span>està darrere</span> <span>de la preferència</span> <code><span>dom.image.picture.enabled</span></code><span>, per defecte</span> <span>és</span><code> <span>fals</span>e</code></span>.</p>

<p>Actualment, només s'implementa un petit subconjunt de la funcionalitat: Gecko recull el primer element font que té un tipus que coincideixi amb <a href="https://developer.mozilla.org/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements">el tipus MIME d'un format de suport multimèdia</a>; veure {{bug(449363)}} per a més informació</p>

<h2 id="Veure">Veure</h2>

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

<p>{{HTMLRef}}</p>