Balise HTML <source>
La balise <source> est un élément vide. Cela signifie qu'elle ne contient aucun contenu, ni de balise de fermeture.
La balise <source> fait partie des éléments HTML5. Elle est utilisée pour définir plusieurs ressources multimédias dans différents formats : vidéo, audio ou image. Cela est nécessaire pour obtenir la meilleure compatibilité multi-navigateurs possible. Parmi les options disponibles, le navigateur peut choisir le format qu'il prend en charge et lire les fichiers audio et vidéo sans aucune difficulté.
L'élément <source> peut être utilisé plusieurs fois dans un même document pour indiquer des fichiers audio/vidéo alternatifs et des images dans de nombreux formats.
DANGER
Si la balise <source> est incluse dans les balises <audio> ou <video>, elle doit être placée avant la balise <track> et après les fichiers multimédias. Elle doit être placée avant <img> si elle se trouve à l'intérieur d'une balise <picture>.
Syntaxe
La balise <source> est vide, ce qui signifie que la balise de fermeture n'est pas requise. Cependant, dans XHTML, la balise <source> doit être fermée (<source/>).
Exemple de la balise HTML <source> :
Exemple de la balise HTML <source>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<picture>
<source media="(min-width: 650px)" alt="img_1" srcset="https://fr.w3docs.com/uploads/media/news_gallery/0001/01/thumb_348_news_gallery_list.jpeg" />
<source media="(min-width: 430px)" alt="img_2" srcset="https://fr.w3docs.com/uploads/media/news_gallery/0001/01/thumb_316_news_gallery_list.jpeg" />
<img src="https://fr.w3docs.com/uploads/media/news_gallery/0001/01/thumb_366_news_gallery_list.jpeg" alt="img" style="width:auto;" />
</picture>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</body>
</html>Exemple de la balise HTML <source> avec les attributs src et type :
Source de la vidéo|Exemple|W3Docs.
<!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="http://techslides.com/demos/sample-videos/small.ogv" type=video/ogg />
<source src="https://fr.w3docs.com/build/videos/arcnet.io(7-sec).mp4" type=video/mp4 />
</video>
<p>Some information about video</p>
</body>
</html>Attributs
| Attributs | Valeur | Description |
|---|---|---|
| media | media_query | Indique que le fichier est adapté à un certain type d'appareils. |
| sizes | Indique la taille relative acceptable de la source. Ajouté en HTML5. | |
| src | URL | Indique l'adresse URL du fichier multimédia. |
| srcset | URL | Indique les images utilisées dans différentes situations (écrans iPad, écrans Retina, etc.). Ajouté en HTML5. |
| type | Valeur pour vidéo : video/oggvideo/mp4video/webm Valeur pour audio : audio/ogg audio/mpeg | Indique le type MIME de la source multimédia. |
La balise <source> prend également en charge les Attributs globaux et les Attributs d'événement.
Pratique
Parmi les options suivantes, laquelle représente correctement l'utilisation de la balise HTML <source> ?