Balise HTML <source>

Définition et utilisation

<source> Les balises sont utilisées pour spécifier des éléments média (comme <video>,<audio> et <picture>）Spécifiez plusieurs ressources média.

<source> Les balises permettent de spécifier des fichiers vidéo/audio/image de secours, que le navigateur peut choisir en fonction de la prise en charge ou de la largeur de la vue. Le navigateur choisira le premier qu'il prend en charge. <source>.

Voir également :

Tutoriel HTML :Vidéo HTML

Tutoriel HTML :Audio HTML

Manuel de référence HTML DOM :Objet Source

Exemple

Exemple 1

C'est un lecteur audio avec deux fichiers sources. Le navigateur choisira le premier qu'il prend en charge. <source>:

<audio controls>
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
  Votre navigateur ne prend pas en charge la balise audio.
</audio>

Essayez-le vous-même

Exemple 2

Utiliser dans <video> <source> Lecture de la vidéo :

<video width="640" height="400" controls>
  <source src="shanghai.mp4" type="video/mp4">
  <source src="shanghai.ogg" type="video/ogg">
  Votre navigateur ne prend pas en charge la balise vidéo.
</video>

Essayez-le vous-même

Exemple 3

Dans <picture> utiliser <source> Pour définir différentes images en fonction de la largeur de la vue, utilisez

<picture>
  <source media="(min-width:650px)" srcset="flowers-1.jpg">
  <source media="(min-width:465px)" srcset="flowers-2.jpg">
  <img src="flowers-3.jpg" alt="Fleurs" style="width:auto;">
</picture>

Essayez-le vous-même

Attribut

Attribut Valeur Description
media Requête média Accepte toute requête média valide, généralement définie dans le CSS.
sizes Spécifiez la taille de l'image pour différents mises en page de page.
src URL

Utilisé pour spécifier l'URL du fichier média.

Quand <source> est utilisé pour <audio> et <video>, cette propriété est obligatoire.
srcset URL

Utilisé pour spécifier l'URL de l'image à utiliser dans différentes situations.

Cet attribut est obligatoire lorsque <source> est utilisé avec <picture>.
type Type MIME Définit le type MIME de la ressource.

Attributs globaux

<source> La balise prend également en charge Attributs globaux dans HTML.

Attributs événement

<source> La balise prend également en charge Attributs événement dans HTML.

Paramètres CSS par défaut

Aucun.

Prise en charge du navigateur

Les numéros dans le tableau indiquent la version du navigateur qui prend en charge cette propriété pour la première fois.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.5 4.0 10.5