Balise HTML <source>
Utilisez la balise <source> pour définir plusieurs ressources multimédias dans différents formats : vidéo, audio ou image, avec exemples.
La balise HTML <source> spécifie l'une des multiples ressources médias alternatives pour un élément <picture>, <audio> ou <video>. C'est un élément vide (void) : il n'a pas de contenu et pas de balise de fermeture.
Cette page explique pourquoi utiliser <source> plutôt qu'un simple attribut src, où il est autorisé, et comment le navigateur décide quelle source charger.
Pourquoi utiliser <source> plutôt qu'un src simple ?
Un seul attribut src pointe vers un seul fichier. L'élément <source> vous permet d'offrir au navigateur une liste de candidats afin qu'il puisse choisir le meilleur qu'il prend réellement en charge. Le navigateur lit les enfants <source> dans l'ordre et utilise le premier qu'il peut lire ou afficher — les autres sont ignorés.
Cela résout deux problèmes concrets :
- Formats de secours pour
<video>et<audio>. Aucun format vidéo ou audio n'est pris en charge par tous les navigateurs. En listant plusieurs encodages (par exemple WebM et MP4), chaque navigateur lit le premier format qu'il comprend. - Images adaptatives et à recadrage artistique pour
<picture>. En utilisant les attributsmediaetsrcset, vous pouvez servir une image différente — ou recadrée différemment — en fonction de la taille du viewport ou de la résolution d'affichage.
L'élément <source> est l'un des éléments HTML5 et peut apparaître plusieurs fois à l'intérieur d'un même parent pour lister les alternatives disponibles.
Syntaxe
La balise <source> est vide, ce qui signifie que la balise de fermeture n'est pas requise. Mais en XHTML, la balise (<source>) doit être fermée (<source/>).
Exemple de <source> dans un élément <picture>
Notez que <source> ne prend pas d'attribut alt. Le texte alternatif appartient toujours à l'élément <img> de secours, qui est aussi ce qu'affichent les navigateurs plus anciens.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<picture>
<source media="(min-width: 650px)" srcset="https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" />
<source media="(min-width: 430px)" srcset="https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" />
<img src="https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" alt="W3Docs logo" style="width:auto;" />
</picture>
<p>The browser loads the first <source> whose media query matches. If none match, it falls back to the <img> element.</p>
</body>
</html>Exemple de <source> dans un élément <video>
Ici, le navigateur essaie d'abord le fichier WebM ; s'il ne peut pas lire le WebM, il se rabat sur le fichier MP4. L'attribut type permet au navigateur de sauter un format qu'il ne prend pas en charge sans le télécharger.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
video {
width: 300px;
height: 220px;
border: 1px solid #666;
}
</style>
</head>
<body>
<video controls>
<source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" type="video/webm" />
<source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
<p>Some information about the video.</p>
</body>
</html>Exemple de <source> dans un élément <audio>
La même logique de format de secours s'applique à l'audio. Le navigateur lit le premier encodage qu'il prend en charge ; le texte après les sources n'est affiché que si <audio> n'est pas du tout pris en charge.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<audio controls>
<source src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.ogg" type="audio/ogg" />
<source src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
<p>Some information about the audio.</p>
</body>
</html>Attributs
| Attribut | Valeur | Description |
|---|---|---|
media | Requête média CSS, ex. (min-width: 768px) | Uniquement pour <picture>. Le navigateur utilise cette source lorsque la requête média correspond. |
sizes | Une ou plusieurs tailles, ex. (max-width: 600px) 480px, 800px | Uniquement pour <picture>. Décrit la largeur d'affichage de l'image afin que le navigateur puisse choisir le bon candidat dans srcset. |
src | URL | L'adresse du fichier média. Utilisé dans <audio> et <video>. |
srcset | URL ou liste d'URL séparées par des virgules avec descripteurs de largeur/densité | Uniquement pour <picture>. Liste les images candidates pour différentes résolutions ou tailles d'écran. |
type | Un type MIME, ex. video/webm, video/mp4, audio/ogg, audio/mpeg, image/webp | Le type MIME de la ressource. Permet au navigateur de sauter les formats qu'il ne peut pas gérer. |
La balise <source> prend également en charge les attributs globaux et les attributs d'événements.