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+ |
Pratiquez vos connaissances
À quoi sert la balise <source> en HTML?
Correcte!
Incorrecte!