lment HTML <source> : l'lment de source d'image et mdia

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" />
  Tlchargez la vido
  <a href="/shared-assets/videos/flower.webm">WEBM</a>
  ou
  <a href="/shared-assets/videos/flower.mp4">MP4</a>.
</video>

Attributs

Cet lment inclut les attributs universels.

type

Dfinit le type MIME de l'image ou autre type de mdia, incluant ventuellement un paramtre codecs.

src

Dfinit l'URL de la ressource mdia. Obligatoire si le parent de <source> est <audio> ou <video>. Interdit si le parent est <picture>.

srcset

Dfinit une liste, spare 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 chanes de caractres spares par des virgules, indiquant un ensemble d'images possibles utiliser par le navigateur. Chaque chane de caractres 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 dcimal positif suivi directement de "x", comme 2x.

Chaque chanes de caractres 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 utiliss ensemble ; un seul doit tre utilis de faon cohrente dans toute la liste. La valeur de chaque descripteur dans la liste doit tre unique. Le navigateur choisit l'image la plus adquate afficher un instant donn en fonction de ces descripteurs. Si les descripteurs ne sont pas dfinis, la valeur par dfaut utilise est 1x. Si l'attribut sizes est galement prsent, chaque chanes de caractres doit inclure un descripteur de largeur. Si le navigateur ne prend pas en charge srcset, alors src est utilis pour la source d'image par dfaut.

sizes

Dfinit une liste de tailles de sources qui dcrit la largeur finale affiche 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 spares par des virgules. Chaque taille de source est une paire condition mdia et longueur. Avant de disposer la page, le navigateur utilise cette information pour dterminer quelle image dfinie dans srcset afficher. Notez que sizes prend 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

Dfinit la requte mdia pour le mdia vis par la ressource.

height

Dfinit la hauteur intrinsque 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

Dfinit la largeur intrinsque 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'lment <source> est un lment 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 lments <source> pour trouver un format qu'il prend en charge. Il utilise le premier qu'il peut afficher. Pour chaque lment <source> :

• Si l'attribut type n'est pas dfini, le navigateur rcupre le type du mdia depuis le serveur et dtermine s'il peut tre affich. Si le mdia ne peut pas tre affich, le navigateur vrifie la <source> suivante dans la liste.
• Si l'attribut type est dfini, le navigateur le compare immdiatement avec les types de mdia qu'il peut afficher. Si le type n'est pas pris en charge, le navigateur n'interroge pas le serveur et vrifie directement l'lment <source> suivant.

Si aucun des lments <source> ne fournit une source utilisable :

• Dans le cas d'un lment <picture>, le navigateur utilise l'image dfinie dans l'enfant <img> de l'lment <picture>.
• Dans le cas d'un lment <audio> ou <video>, le navigateur affiche le contenu inclus entre les balises ouvrante et fermante de l'lment.

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 dtails sur les types de mdia vido et audio utilisables, consultez le Guide des types et formats mdia.

Exemples

Utiliser l'attribut type avec <video>

Cet exemple montre comment proposer une vido dans diffrents 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'lment <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'lment mais pas l'un des formats proposs, un vnement error est dclench sur l'lment <audio> ou <video> et les contrles mdia par dfaut (s'ils sont activs) indiquent une erreur. Pour plus de dtails sur les formats de fichiers mdia utiliser et leur prise en charge par les navigateurs, consultez le Guide des types et formats mdia.

<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 dsol&nbsp;; votre navigateur ne prend pas en charge l'lment HTML
  de vido.
</video>

Utiliser l'attribut media avec <video>

Cet exemple montre comment proposer un fichier source alternatif pour les fentres de visualisation dpassant une certaine largeur. Lorsque l'environnement de navigation d'une utilisateurice remplit la condition media dfinie, l'lment <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 deuxime option <source> dans le code ci-dessous n'a pas de condition media, elle est donc slectionne pour tous les autres contextes de navigation.

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

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

Utiliser l'attribut media avec <picture>

Dans cet exemple, deux lments <source> sont inclus dans <picture>, fournissant des versions d'une image utiliser lorsque l'espace disponible dpasse certaines largeurs. Si la largeur disponible est infrieure la plus petite de ces largeurs, le navigateur utilise l'image dfinie dans l'lment <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'lment <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 dcorative et sans rapport avec le contenu.

Utiliser les attributs height et width avec <picture>

Dans cet exemple, trois lments <source> avec les attributs height et width sont inclus dans un lment <picture>. Une requte mdia permet au navigateur de dfinir 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 utilise lorsque le navigateur ne prend pas en charge les sources"
    width="500"
    height="400" />
</picture>

Rsum technique

Spcifications

Compatibilit des navigateurs

Voir aussi

• L'lment <audio>
• L'lment <picture>
• L'lment <video>
• Guide des types et formats de fichiers image
• Guide des types et formats mdia
• Les performances sur le Web