<source>

Résumé

L'élément HTML <source> est utilisé pour définir différentes ressources multi-média pour les éléments <picture>, <audio> et <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 mais ne pas avoir de balise de fin.
• Élément parents autorisés Un élément média <audio> ou <video>, et il doit être placé avant tout contenu de flux ou un élément <track>.
  Un élément <picture>, et doit être placé avant tout élément <img>. 
• Interface DOM HTMLSourceElement

Attributs

Cet élément inclut les attributs globaux.

sizes

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 srcset doit être utilisée.
L'attribut sizes a un effet seulement si l'élément <source> est un enfant direct d'un élément <picture>.

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 <source> est placé dans un élément <picture>.

srcset

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édiatement 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 manquante, est 1x.

Chaque chaîne dans la liste doit avoir au moins un descripteur de largeur ou de densité de pixel valide. Parmi 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 choisit l'image la plus adéquate pour l'affichage à un moment donné.
L'attribut scrset a un effet seulement lorsque l'élément <source> est l'enfant direct d'un élément <picture>.

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.

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

Compatibilité des navigateurs

Notes relatives à Gecko

À l'heure actuelle, seulement une fraction des fonctionnalités attendues est implémentée. Gecko considère 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 <audio> et <video>.