Tag HTML <source>

Le tag <source> définit plusieurs fichiers multimédias dans différents formats, tels que <video> et <audio>. Ceci est nécessaire pour assurer la compatibilité entre les navigateurs : le navigateur peut choisir parmi les options disponibles le format, qu'il prend en charge, et sans aucun problème lire un fichier audio ou vidéo.

Le tag <source> est également utilisé pour ajouter des images au conteneur <picture>.

Dans un document, l'élément <source> peut être utilisé plusieurs fois pour spécifier d'autres fichiers audio/vidéo et désigner plusieurs formats.

Si le tag <source> est inclus dans les tags <audio> ou <video>, l’élément <source> doit être placé devant le fichier <track> et après les fichier media. Dans l’élément il doit être mis devant le tag <img>.

Syntaxe

Le tag fermant </source> n’est pas requis.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
  </head>
  <body>
    <picture>
      <source media="(min-width: 650px)" alt="img_1" srcset="/uploads/media/news_gallery/0001/01/thumb_348_news_gallery_list.jpeg">
      <source media="(min-width: 430px)" alt="img_2" srcset="/uploads/media/news_gallery/0001/01/thumb_316_news_gallery_list.jpeg">
      <img src="/uploads/media/news_gallery/0001/01/thumb_366_news_gallery_list.jpeg" alt="img" style="width:auto;">
    </picture>
    <p>Lorem Ipsum est simplement un texte factice de l'industrie de l'impression et de la composition. Lorem Ipsum est le texte factice standard de l'industrie depuis les années 1500, quand un imprimeur inconnu a pris une galère de type et l'a brouillé pour en faire un cahier de caractères. Il a survécu non seulement à cinq siècles, mais aussi au saut dans la composition électronique.</p>
  </body>
</html>

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du 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="/build/videos/arcnet.io(7-sec).mp4" type=video/mp4>
    </video>
    <p>Quelque information sur le vidéo</p>
  </body>
</html>

Attributs

Attribut Valeur Description
media media_query Indique que le fichier est adapté à certains types de périphériques.
sizes Indique les disponibles tailles relatives de source.
Ajouté à HTML5.
src URL Indique l’URL adresse de média-fichier.
srcset URL Indique les images, qui sont utilisés dans les cas différents (pour les écrans de comprimés, pour les écrans de rétine, etc.).
Ajouté à HTML5.
type Valeur pour video: video/ogg video/mp4 video/webm
Valeur pour audio: audio/ogg audio/mpeg
Indique le type MIME de la source de média.

Le tag <source> supporte également les Attributs globaux et les Attributs d'événements.


Support de Navigateurs

4+ 3.5+ 4+ 10.5+


Trouvez-vous cela utile?

Articles Associées