Balise HTML <source>
Exemple
Un lecteur audio avec deux fichiers source. Le navigateur choisira le premier <source> qu'il supporte :
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Plus d'exemples "Essayez-le vous-même" ci-dessous.
Définition et utilisation
La <source>balise est utilisée pour spécifier plusieurs ressources multimédias pour les éléments multimédias, tels que
<video> , <audio> et <picture> .
La <source>balise vous permet de spécifier des fichiers vidéo/audio/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 supporte.
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge l'élément.
| Element | |||||
|---|---|---|---|---|---|
| <source> | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
Les attributs
| Attribute | Value | Description |
|---|---|---|
| media | media_query | Accepts any valid media query that would normally be defined in a CSS |
| sizes | Specifies image sizes for different page layouts | |
| src | URL | Required when <source> is used in <audio> and <video>. Specifies the URL of the media file |
| srcset | URL | Required when <source> is used in <picture>. Specifies the URL of the image to use in different situations |
| type | MIME-type | Specifies the MIME-type of the resource |
Attributs globaux
La <source>balise prend également en charge les attributs globaux en HTML .
Attributs d'événement
La <source>balise 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">
Your browser does not support the video tag.
</video>
Exemple
Utilisez <source> dans <picture> pour définir différentes images en fonction de la largeur de la fenêtre :
<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="Flowers" style="width:auto;">
</picture>
Pages connexes
Tutoriel HTML : Vidéo HTML
Tutoriel HTML : Audio HTML
Référence HTML DOM : Objet source
Paramètres CSS par défaut
Rien.