HTML <source> Tag
Exemple
Un lecteur audio avec deux fichiers source. Le navigateur choisira le premier <source> qu'il prend en charge :
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Votre navigateur ne prend pas en charge l'élément audio.
</audio> Plus d'exemples "Essayez-le vous-même" ci-dessous.
Définition et Utilisation
La balise <source> est utilisée pour spécifier plusieurs ressources multimédias pour des éléments tels que <video> , <audio> et <picture> .
La balise <source> vous permet de spécifier des fichiers vidéo, audio ou image alternatifs parmi lesquels le navigateur peut choisir, en fonction de la prise en charge du navigateur ou de la largeur de la fenêtre d'affichage. Le navigateur choisira le premier <source> qu'il prend en charge.
Prise en Charge des Navigateurs
Les chiffres dans le tableau spécifient la première version du navigateur qui prend entièrement en charge l'élément.
| Élément | |||||
|---|---|---|---|---|---|
| <source> | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
Attributs
| Attribut | Valeur | Description |
|---|---|---|
| media | media_query | Accepte toute requête média valide qui serait normalement définie dans un CSS. |
| sizes | Spécifie les tailles d'image pour différentes mises en page. | |
| src | URL | Requis lorsque <source> est utilisé dans <audio> et <video>. Spécifie l'URL du fichier multimédia. |
| srcset | URL | Requis lorsque <source> est utilisé dans <picture>. Spécifie l'URL de l'image à utiliser dans différentes situations. |
| type | MIME-type | Spécifie le type MIME de la ressource. |
Attributs Globaux
La balise <source> prend également en charge les Attributs Globaux en HTML .
Attributs d'Événement
La balise <source> prend également en charge les Attributs d'Événement en HTML .
Plus d'Exemples
Exemple
Utilisez <source> dans <video> pour lire une vidéo :
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Votre navigateur ne prend pas en charge la balise vidéo.
</video> Exemple
Utilisez <source> dans <picture> pour définir différentes images en fonction de la largeur de la fenêtre d'affichage :
<picture>
<source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width:465px)" srcset="img_white_flower.jpg">
<img src="img_orange_flowers.jpg" alt="Fleurs" style="width:auto;">
</picture> Pages Associées
Tutoriel HTML : Vidéo HTML
Tutoriel HTML : Audio HTML
Référence DOM HTML : Objet Source
Paramètres CSS par Défaut
Aucun.