<source> : l'élément de source d'image et média

Exemple interactif

<video controls width="250" height="200" muted>
  <source src="/shared-assets/videos/flower.webm" type="video/webm" />
  <source src="/shared-assets/videos/flower.mp4" type="video/mp4" />
  Téléchargez la vidéo
  <a href="/shared-assets/videos/flower.webm">WEBM</a>
  ou
  <a href="/shared-assets/videos/flower.mp4">MP4</a>.
</video>

Attributs

Cet élément inclut les attributs universels.

type

Définit le type MIME de l'image ou autre type de média, incluant éventuellement un paramètre codecs.

src

Définit l'URL de la ressource média. Obligatoire si le parent de <source> est <audio> ou <video>. Interdit si le parent est <picture>.

srcset

Définit une liste, séparée par des virgules, d'une ou plusieurs URL d'images et de leurs descripteurs. Obligatoire si le parent de <source> est <picture>. Interdit si le parent est <audio> ou <video>.

La liste se compose de chaînes de caractères séparées par des virgules, indiquant un ensemble d'images possibles à utiliser par le navigateur. Chaque chaîne de caractères se compose de :

• Une URL indiquant l'emplacement de l'image.
• Un descripteur de largeur optionnel — un entier positif suivi directement de "w", comme 300w.
• Un descripteur de densité de pixels optionnel — un nombre décimal positif suivi directement de "x", comme 2x.

Chaque chaînes de caractères de la liste doit comporter soit un descripteur de largeur, soit un descripteur de densité de pixels pour être valide. Ces deux descripteurs ne doivent pas être utilisés ensemble ; un seul doit être utilisé de façon cohérente dans toute la liste. La valeur de chaque descripteur dans la liste doit être unique. Le navigateur choisit l'image la plus adéquate à afficher à un instant donné en fonction de ces descripteurs. Si les descripteurs ne sont pas spécifiés, la valeur par défaut utilisée est 1x. Si l'attribut sizes est également présent, chaque chaînes de caractères doit inclure un descripteur de largeur. Si le navigateur ne prend pas en charge srcset, alors src sera utilisé pour la source d'image par défaut.

sizes

Définit une liste de tailles de sources qui décrit la largeur finale affichée de l'image. Autorisé si le parent de <source> est <picture>. Interdit si le parent est <audio> ou <video>.

La liste se compose de tailles de sources séparées par des virgules. Chaque taille de source est une paire condition média et longueur. Avant de disposer la page, le navigateur utilise cette information pour déterminer quelle image définie dans srcset afficher. Notez que sizes prendra effet uniquement si des descripteurs de largeur sont fournis avec srcset, et non des descripteurs de densité de pixels (par exemple, il faut utiliser 200w au lieu de 2x).

media

Définit la requête média pour le média visé par la ressource.

height

Définit la hauteur intrinsèque de l'image en pixels. Autorisé si le parent de <source> est un <picture>. Interdit si le parent est <audio> ou <video>.

La valeur de la hauteur doit être un entier sans aucune unité.

width

Définit la largeur intrinsèque de l'image en pixels. Autorisé si le parent de <source> est un <picture>. Interdit si le parent est <audio> ou <video>.

La valeur de la largeur doit être un entier sans aucune unité.

Notes d'utilisation

L'élément <source> est un élément vide, ce qui signifie qu'il n'a pas de contenu et pas de balise fermante. Autrement dit, il ne faut jamais utiliser </source> dans votre HTML.

Le navigateur parcourt la liste des éléments <source> pour trouver un format qu'il prend en charge. Il utilise le premier qu'il peut afficher. Pour chaque élément <source> :

• Si l'attribut type n'est pas défini, le navigateur récupère le type du média depuis le serveur et détermine s'il peut être affiché. Si le média ne peut pas être affiché, le navigateur vérifie la <source> suivante dans la liste.
• Si l'attribut type est défini, le navigateur le compare immédiatement avec les types de média qu'il peut afficher. Si le type n'est pas pris en charge, le navigateur n'interroge pas le serveur et vérifie directement l'élément <source> suivant.

Si aucun des éléments <source> ne fournit une source utilisable :

• Dans le cas d'un élément <picture>, le navigateur utilisera l'image définie dans l'enfant <img> de l'élément <picture>.
• Dans le cas d'un élément <audio> ou <video>, le navigateur affichera le contenu inclus entre les balises ouvrante et fermante de l'élément.

Pour des informations sur les formats d'image pris en charge par les navigateurs web et des conseils pour choisir les formats à utiliser, consultez notre Guide des types et formats de fichiers image. Pour plus de détails sur les types de média vidéo et audio utilisables, consultez le Guide des types et formats média.

Exemples

Utiliser l'attribut type avec <video>

Cet exemple montre comment proposer une vidéo dans différents formats : WebM pour les navigateurs qui le prennent en charge, Ogg pour ceux qui prennent en charge Ogg, et QuickTime pour les navigateurs qui prennent en charge QuickTime. Si l'élément <audio> ou <video> n'est pas pris en charge par le navigateur, un message d'information s'affiche à la place. Si le navigateur prend en charge l'élément mais pas l'un des formats proposés, un évènement error est déclenché sur l'élément <audio> ou <video> et les contrôles média par défaut (s'ils sont activés) indiqueront une erreur. Pour plus de détails sur les formats de fichiers média à utiliser et leur prise en charge par les navigateurs, consultez le Guide des types et formats média.

<video controls>
  <source src="toto.webm" type="video/webm" />
  <source src="toto.ogg" type="video/ogg" />
  <source src="toto.mov" type="video/quicktime" />
  Je suis désolé&nbsp;; votre navigateur ne prend pas en charge l'élément HTML
  de vidéo.
</video>

Utiliser l'attribut media avec <video>

Cet exemple montre comment proposer un fichier source alternatif pour les fenêtres de visualisation dépassant une certaine largeur. Lorsque l'environnement de navigation d'un utilisateur remplit la condition media définie, l'élément <source> associé est choisi. Le contenu de son attribut src est alors demandé et rendu. Si la condition media ne correspond pas, le navigateur passe à la <source> suivante dans la liste. La deuxième option <source> dans le code ci-dessous n'a pas de condition media, elle sera donc sélectionnée pour tous les autres contextes de navigation.

<video controls>
  <source src="toto-large.webm" media="(width >= 800px)" />
  <source src="toto.webm" />
  Je suis désolé&nbsp;; votre navigateur ne prend pas en charge l'élément HTML
  de vidéo.
</video>

Pour plus d'exemples, l'article Vidéo et audio HTML dans la section Apprendre est une excellente ressource.

Utiliser l'attribut media avec <picture>

Dans cet exemple, deux éléments <source> sont inclus dans <picture>, fournissant des versions d'une image à utiliser lorsque l'espace disponible dépasse certaines largeurs. Si la largeur disponible est inférieure à la plus petite de ces largeurs, le navigateur utilisera l'image définie dans l'élément <img>.

<picture>
  <source srcset="mdn-logo-wide.png" media="(width >= 800px)" />
  <source srcset="mdn-logo-medium.png" media="(width >= 600px)" />
  <img src="mdn-logo-narrow.png" alt="MDN Web Docs" />
</picture>

Avec l'élément <picture>, il faut toujours inclure un <img> avec une image de repli. Veillez également à ajouter un attribut alt pour l'accessibilité, sauf si l'image est purement décorative et sans rapport avec le contenu.

Utiliser les attributs height et width avec <picture>

Dans cet exemple, trois éléments <source> avec les attributs height et width sont inclus dans un élément <picture>. Une requête média permet au navigateur de définir l'image à afficher avec les attributs height et width en fonction de la taille de la zone d'affichage.

<picture>
  <source
    srcset="landscape.png"
    media="(width >= 1000px)"
    width="1000"
    height="400" />
  <source
    srcset="square.png"
    media="(width >= 800px)"
    width="800"
    height="800" />
  <source
    srcset="portrait.png"
    media="(width >= 600px)"
    width="600"
    height="800" />
  <img
    src="fallback.png"
    alt="Image utilisée lorsque le navigateur ne prend pas en charge les sources"
    width="500"
    height="400" />
</picture>

Résumé technique

Spécifications

Compatibilité des navigateurs

Voir aussi

• L'élément <audio>
• L'élément <picture>
• L'élément <video>
• Guide des types et formats de fichiers image
• Guide des types et formats média
• Les performances sur le Web