Expand your HTML skills through an MDN Fellowship - Apply by April 1 http://mzl.la/MDNFellowship

mozilla

Revision 644231 of <source>

  • Revision slug: Web/HTML/Element/Source
  • Revision title: <source>
  • Revision id: 644231
  • Created:
  • Creator: FredB
  • Is current revision? Yes
  • Comment

Revision Content

Résumé

L'élément HTML <source> est utilisé pour définir différentes ressources multi-média pour les éléments {{HTMLElement("picture")}}, {{HTMLElement("audio")}} et {{HTMLElement("video")}}. C'est un élément vide. Il est généralement utilisé pour servir le même média dans les différents formats supportés par les navigateurs.

  • Catégories de contenu Aucune
  • Contenu autorisé Aucun, c'est un élément vide.
  • Omission de balises Cet élément doit avoir une balise de début et ne pas avoir de balise de fin.
  • Élément parents autorisés Un élément média {{ HTMLElement("audio") }} ou {{ HTMLElement("video") }}, et il doit être placé avant tout contenu de flux ou un élément {{HTMLElement("track")}}.
    Un élément {{HTMLElement("picture")}}, et doit être placé avant tout élément {{HTMLElement("img")}}. 
  • Interface DOM {{domxref("HTMLSourceElement")}}

Attributs

Cet élément inclut les attributs globaux.

{{ htmlattrdef("sizes")}} {{experimental_inline}}
Est une liste de dimensions de sources qui décrit la largeur finale du rendu de l'image représentée par la source. Chaque dimension de source consiste en une liste de paires de conditions de longueur de médias séparés par des virgules. Cette information est utilisée par les navigateurs avant de procéder au rendu de la page pour déterminer quelle image définie par {{htmlattrxref("srcset", "source")}} doit être utilisée.
L'attribut sizes a un effet seulement si l'élément {{HTMLElement("source")}} est un enfant direct d'un élément {{HTMLElement("picture")}}.
{{ htmlattrdef("src") }}
Requis, définit l'adresse de la ressource à utiliser pour le média. La valeur de cet attribut est ignorée lorsque l'élément {{HTMLelement("source")}} est placé dans un élément {{HTMLElement("picture")}}.
{{ htmlattrdef("srcset")}} {{experimental_inline}}
Une liste d'une ou plusieurs chaînes séparées par des virgules indiquant un ensemble d'images possibles représenté par la source que le navigateur peut utiliser. Chaque chaîne est composée de :
  1. une URL vers une image,
  2. un descripteur de largeur, qui est un entier positif immédiattement suivi par un 'w'. La valeur par défaut, si manquant, est l'infini.
  3. un descripteur de densité de pixel, qui est un nombre décimal positif immédiatement suivi par 'x'. La valeur par défaut, si manquant, est 1x.
Chaque chaîne dans la liste doit avoir au moins un descripteur de largeur ou de densité de pixel valide. Parmis la liste, il doit y avoir au moins une chaîne contenant le même tuple de descripteurs de largeur ou de densité de pixel.
Le navigateur choisi l'image la plus adéquate pour l'affichage à un moment donné.
L'attribut scrset a un effet seulement lorsque l'élément {{HTMLElement("source")}} est l'enfant direct d'un élément {{HTMLElement("picture")}}.
{{ htmlattrdef("type") }}
Le type MIME de la ressource, peut comporter un paramètre codecs. Voir la RFC 4281 pour plus d'informations sur comment préciser des codecs.
{{ htmlattrdef("media") }}
La requête média visée par le média de la ressource.

Si l'attribut type n'est pas renseigné, le type du média est calculé depuis le serveur et analysé pour savoir s'il est supporté par Gecko : si ce n'est pas le cas, l'élément source suivant est vérifié. Si l'attribut type est renseigné, il est comparé par rapport à la liste des types supportés par Gecko : s'il n'est pas reconnu, aucun requête n'est faite au serveur et l'élément source qui suit est directement vérifié.

Exemple

Cet exemple montre comment afficher une vidéo au format Ogg pour les utilisateurs dont le navigateur supporte ce format ou au format QuickTime pour ceux dont le navigateur supporte ce format. Si l'élément audio ou video n'est pas supporté par le navigateur, un avertissement est alors affiché. Si le navigateur supporte l'élément mais ne supporte aucun des formats donnés, un événement error est envoyé et les contrôles par défaut du média (s'ils sont activés) indiqueront une erreur. Voir également la liste des formats multimedia supportés par les éléments audio et video dans diverses navigateurs.

<video controls>
  <source src="foo.ogg" type="video/ogg"> <!-- Choisi par Firefox -->
  <source src="foo.mov" type="video/quicktime"> <!-- Choisi par Safari -->
  Nous sommes désolés, votre navigateur ne supporte pas la vidéo HTML5.
</video>

Pour plus d'exemples, voir l'utilisation des éléments audio et video en HTML5.

Spécifications

Spécification Statut Commentaires
{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-source-element', '<option>')}} {{Spec2('HTML5 W3C')}}  

Compatibilité des navigateurs

{{ CompatibilityTable() }}

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support simple {{ CompatVersionUnknown() }} {{ CompatGeckoDesktop("1.9.1") }} 9.0 {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }}
Attribut media {{ CompatVersionUnknown() }} {{ CompatGeckoDesktop("15.0") }} 9.0 {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }}
Fonctionnalité Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support simple {{ CompatVersionUnknown() }} {{ CompatGeckoMobile("1.0") }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
Attribut media {{ CompatVersionUnknown() }} {{ CompatGeckoMobile("15.0") }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

Notes relatives à Gecko

À l'heure actuelle, seulement une fraction des fonctionnalités attendues est implémentée. Gecko considères le premier élément source ayant un type correspondant au type MIME d'une format supporté. Voir le {{ bug(449363) }} pour plus de détails.

Voir également

Les éléments HTML5 {{ HTMLElement("audio") }} et {{ HTMLElement("video") }}.

{{HTMLRef}}

Revision Source

<h2 id="R.C3.A9sum.C3.A9">Résumé</h2>
<p>L'<strong>élément HTML <code>&lt;source&gt;</code></strong> est utilisé pour définir différentes ressources multi-média pour les éléments {{HTMLElement("picture")}},&nbsp;{{HTMLElement("audio")}} et&nbsp;{{HTMLElement("video")}}. C'est un élément vide. Il est généralement utilisé pour servir le même média dans <a href="/fr/docs/Web/HTML/formats_media_support" title="Formats médias acceptés par les éléments audio et video">les différents formats supportés par les navigateurs</a>.</p>
<ul class="htmlelt">
 <li><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu" title="/fr/docs/HTML/Catégorie_de_contenu">Catégories de contenu</a> </dfn>Aucune</li>
 <li><dfn>Contenu autorisé </dfn>Aucun, c'est un élément vide.</li>
 <li><dfn>Omission de balises </dfn>Cet élément doit avoir une balise de début et ne pas avoir de balise de fin.</li>
 <li><dfn>Élément parents autorisés </dfn>Un élément média {{ HTMLElement("audio") }} ou {{ HTMLElement("video") }}, et il doit être placé avant tout <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_de_flux" title="contenu de flux">contenu de flux</a> ou un élément {{HTMLElement("track")}}.<br />
  Un élément {{HTMLElement("picture")}}, et doit être placé avant tout élément {{HTMLElement("img")}}.&nbsp;</li>
 <li><dfn>Interface DOM </dfn> {{domxref("HTMLSourceElement")}}</li>
</ul>
<h2 id="Attributs">Attributs</h2>
<p><span style="line-height: 21px;">Cet élément inclut les </span><a href="/fr/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="/fr/docs/HTML/Global_attributes">attributs globaux</a>.</p>
<dl>
 <dt>
  {{ htmlattrdef("sizes")}} {{experimental_inline}}</dt>
 <dd>
  Est une liste de dimensions de sources qui décrit la largeur finale du rendu de l'image représentée par la source. Chaque dimension de source consiste en une liste de paires de conditions de longueur de médias séparés par des virgules. Cette information est utilisée par les navigateurs avant de procéder au rendu de la page pour déterminer quelle image définie par {{htmlattrxref("srcset", "source")}} doit être utilisée.<br />
  L'attribut <code>sizes</code> a un effet seulement si l'élément {{HTMLElement("source")}} est un enfant direct d'un élément {{HTMLElement("picture")}}.</dd>
 <dt>
  {{ htmlattrdef("src") }}</dt>
 <dd>
  Requis, définit l'adresse de la ressource à utiliser pour le média. La valeur de cet attribut est ignorée lorsque l'élément {{HTMLelement("source")}} est placé dans un élément {{HTMLElement("picture")}}.</dd>
 <dt>
  {{ htmlattrdef("srcset")}} {{experimental_inline}}</dt>
 <dd>
  Une liste d'une ou plusieurs chaînes séparées par des virgules indiquant un ensemble d'images possibles représenté par la source que le navigateur peut utiliser. Chaque chaîne est composée de :
  <ol>
   <li>une URL vers une image,</li>
   <li>un descripteur de largeur, qui est un entier positif immédiattement suivi par un <code>'w'</code>. La valeur par défaut, si manquant, est l'infini.</li>
   <li>un descripteur de densité de pixel, qui est un nombre décimal positif immédiatement suivi par <code>'x'</code>. La valeur par défaut, si manquant, est <code>1x</code>.</li>
  </ol>
  Chaque chaîne dans la liste doit avoir au moins un descripteur de largeur ou de densité de pixel valide. Parmis la liste, il doit y avoir au moins une chaîne contenant le même tuple de descripteurs de largeur ou de densité de pixel.<br />
  Le navigateur choisi l'image la plus adéquate pour l'affichage à un moment donné.<br />
  L'attribut <code>scrset</code> a un effet seulement lorsque l'élément {{HTMLElement("source")}} est l'enfant direct d'un élément {{HTMLElement("picture")}}.</dd>
 <dt>
  {{ htmlattrdef("type") }}</dt>
 <dd>
  Le type MIME de la ressource, peut comporter un paramètre <code>codecs</code>. Voir la <a class="external" href="http://tools.ietf.org/html/rfc4281" title="http://tools.ietf.org/html/rfc4281">RFC 4281</a> pour plus d'informations sur comment préciser des codecs.</dd>
 <dt>
  {{ htmlattrdef("media") }}</dt>
 <dd>
  <a class="internal" href="/fr/docs/CSS/Media_queries" title="CSS/Media queries">La requête média</a> visée par le média de la ressource.</dd>
</dl>
<p>Si l'attribut <code><strong>type</strong></code> n'est pas renseigné, le type du média est calculé depuis le serveur et analysé pour savoir s'il est supporté par Gecko : si ce n'est pas le cas, l'élément <code><strong>source</strong></code> suivant est vérifié. Si l'attribut <code><strong>type</strong></code> est renseigné, il est comparé par rapport à la liste des types supportés par Gecko : s'il n'est pas reconnu, aucun requête n'est faite au serveur et l'élément<strong> <code>source</code></strong> qui suit est directement vérifié.</p>
<h2 id="Exemple">Exemple</h2>
<p>Cet exemple montre comment afficher une vidéo au format Ogg pour les utilisateurs dont le navigateur supporte ce format ou au format QuickTime pour ceux dont le navigateur supporte ce format. Si l'élément <code>audio</code> ou <code>video</code> n'est pas supporté par le navigateur, un avertissement est alors affiché. Si le navigateur supporte l'élément mais ne supporte aucun des formats donnés, un événement <code>error</code> est envoyé et les contrôles par défaut du média (s'ils sont activés) indiqueront une erreur. Voir également la liste <a href="/fr/docs/Web/HTML/formats_media_support" title="Media formats supported by the audio and video elements">des formats multimedia supportés par les éléments audio et video </a>dans diverses navigateurs.</p>
<pre class="brush: html">
&lt;video controls&gt;
  &lt;source src="foo.ogg" type="video/ogg"&gt; &lt;!-- Choisi par Firefox --&gt;
  &lt;source src="foo.mov" type="video/quicktime"&gt; &lt;!-- Choisi par Safari --&gt;
&nbsp; Nous sommes désolés, votre navigateur ne supporte pas la vidéo HTML5.
&lt;/video&gt;
</pre>
<p>Pour plus d'exemples, voir <a class="internal" href="/fr/docs/Web/HTML/Utilisation_d'audio_et_video_en_HTML5" title="Using audio and video in Firefox">l'utilisation des éléments audio et video en HTML5</a>.</p>
<h2 id="Specifications" name="Specifications">Spécifications</h2>
<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spécification</th>
   <th scope="col">Statut</th>
   <th scope="col">Commentaires</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-source-element', '&lt;option&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td>&nbsp;</td>
  </tr>
 </tbody>
</table>
<h2 id="Compatibilit.C3.A9_des_navigateurs">Compatibilité des navigateurs</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
 <table class="compat-table">
  <tbody>
   <tr>
    <th>Fonctionnalité</th>
    <th>Chrome</th>
    <th>Firefox (Gecko)</th>
    <th>Internet Explorer</th>
    <th>Opera</th>
    <th>Safari</th>
   </tr>
   <tr>
    <td>Support simple</td>
    <td>{{ CompatVersionUnknown() }}</td>
    <td>{{ CompatGeckoDesktop("1.9.1") }}</td>
    <td>9.0</td>
    <td>{{ CompatVersionUnknown() }}</td>
    <td>{{ CompatVersionUnknown() }}</td>
   </tr>
   <tr>
    <td>Attribut <code>media</code></td>
    <td>{{ CompatVersionUnknown() }}</td>
    <td>{{ CompatGeckoDesktop("15.0") }}</td>
    <td>9.0</td>
    <td>{{ CompatVersionUnknown() }}</td>
    <td>{{ CompatVersionUnknown() }}</td>
   </tr>
  </tbody>
 </table>
</div>
<div id="compat-mobile">
 <table class="compat-table">
  <tbody>
   <tr>
    <th>Fonctionnalité</th>
    <th>Android</th>
    <th>Firefox Mobile (Gecko)</th>
    <th>IE Mobile</th>
    <th>Opera Mobile</th>
    <th>Safari Mobile</th>
   </tr>
   <tr>
    <td>Support simple</td>
    <td>{{ CompatVersionUnknown() }}</td>
    <td>{{ CompatGeckoMobile("1.0") }}</td>
    <td>{{ CompatUnknown() }}</td>
    <td>{{ CompatUnknown() }}</td>
    <td>{{ CompatUnknown() }}</td>
   </tr>
   <tr>
    <td>Attribut <code>media</code></td>
    <td>{{ CompatVersionUnknown() }}</td>
    <td>{{ CompatGeckoMobile("15.0") }}</td>
    <td>{{ CompatUnknown() }}</td>
    <td>{{ CompatUnknown() }}</td>
    <td>{{ CompatUnknown() }}</td>
   </tr>
  </tbody>
 </table>
</div>
<h3 id="Notes_relatives_.C3.A0_Gecko">Notes relatives à Gecko</h3>
<p>À l'heure actuelle, seulement une fraction des fonctionnalités attendues est implémentée. Gecko considères le premier élément source ayant un type correspondant <a href="/fr/docs/Web/HTML/formats_media_support" title="/fr/docs/HTML/formats_media_support">au type MIME d'une format supporté</a>. Voir le {{ bug(449363) }} pour plus de détails.</p>
<h2 id="Voir_.C3.A9galement">Voir également</h2>
<p>Les éléments HTML5 {{ HTMLElement("audio") }} et {{ HTMLElement("video") }}.</p>
<p>{{HTMLRef}}</p>
Revert to this revision