<source>

Description

L’élément <source> est void et définit une source de contenu alternative pour <picture>, <video> ou <audio>. Le navigateur évalue les sources dans l’ordre et sélectionne la première compatible avec ses capacités. Le parent <img> ou <video>/<audio> sert de repli final.

Syntaxe

Dans <picture> :

<picture>
  <source srcset="image.avif" type="image/avif">
  <img src="image.jpg" alt="…">
</picture>

Dans <video> :

<video controls>
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
</video>

Exemples

Vidéo multi-formats :

<video controls width="640" height="360">
  <source src="presentation.av1.mp4" type="video/mp4; codecs=av01">
  <source src="presentation.webm" type="video/webm">
  <source src="presentation.mp4" type="video/mp4">
  <p>Votre navigateur ne supporte pas la vidéo HTML.</p>
</video>

Attributs spécifiques

Attribut	Type	Description
src	URL	URL de la ressource (pour <video> et <audio>). Non utilisé dans <picture>.
srcset	string	Liste d’images (pour <picture>). Non utilisé dans <video>/<audio>.
type	MIME	Type MIME de la ressource (ex. video/webm, image/avif). Permet au navigateur d’éviter de télécharger les sources incompatibles.
media	string	Media query CSS définissant les conditions d’application (principalement pour <picture>).
sizes	string	Tailles d’affichage (pour <picture> avec srcset en largeur w).
width	integer	Largeur intrinsèque (pour <picture>).
height	integer	Hauteur intrinsèque (pour <picture>).