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

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

Spécification Statut Commentaires
WHATWG HTML Living Standard
La définition de '<source>' dans cette spécification.
Standard évolutif Définition initiale de l'élément <source> utilisé dans un élement <picture>.
HTML5
La définition de '<option>' dans cette spécification.
Recommendation Définition initiale de l'élément <source> utilisé dans un élement <video>.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support simple (Oui) 3.5 (1.9.1) 9.0 (Oui) (Oui)
Attribut media (Oui) 15.0 (15.0) 9.0 (Oui) (Oui)
Attribut sizes ? 33 (33) behind the dom.image.picture.enabled preference (off by default) ? ? ?
Attribut srcset ? 33 (33) behind the dom.image.picture.enabled preference (off by default) ? ? ?
Fonctionnalité Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support simple (Oui) 1.0 (1.0) ? ? ?
Attribut media (Oui) 15.0 (15.0) ? ? ?
Attribut sizes ? 33.0 (33) behind the dom.image.picture.enabled preference (off by default) ? ? ?
Attribut srcset ? 33.0 (33) behind the dom.image.picture.enabled preference (off by default) ? ? ?

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

Étiquettes et contributeurs liés au document

Contributeurs à cette page : Hell_Carlito, Goofy, louuis, FredB, SphinxKnight, tregagnon, mekal
Dernière mise à jour par : Hell_Carlito,