L'élément HTML <source> définit différentes ressources média pour un élément <picture>, <audio> ou <video>. C'est un élément vide. Il est généralement utilisé pour distribuer le même contenu en utilisant les différents formats pris en charge par les différents navigateurs.

Catégories de contenu Aucune.
Contenu autorisé Aucun, c'est un élément vide.
Omission de balises Cet élément doit avoir une balise ouvrante mais pas de balise fermante.
Parents autorisés
Un élément média —<audio> ou <video>— pour lequel l'élément <source> doit être placé avant tout contenu de flux ou tout élément <track>.
Un élément <picture>, pour lequel l'élément <source> doit être placé avant tout élément <img>.
Rôles ARIA autorisés Aucun.
Interface DOM HTMLSourceElement

Attributs

Cet élément inclut les attributs universels.

media
Une requête média pour sélectionner la source du média. Cet attribut doit uniquement être utilisé pour un élément <picture>.
sizes
Cet attribut est une liste de chaîne de caractères, séparées par des virgules, dont chacune décrit une condition de taille. Cette information est utilisée par le navigateur, avant la disposition de la page, pour déterminer quelle image parmi celles définies via l'attribut srcset. Cet attribut aura un effet uniquement lorsque l'élément <source> est un élément fils direct d'un élément <picture>.
src
Cet attribut est obligatoire pour les éléments <audio> et <video>. Il définit l'adresse de la ressource. La valeur de cet attribut est ignorée lorsque l'élément <source> est à l'intérieur d'un élément<picture>.
srcset
Une liste d'une ou plusieurs chaînes de caractères, séparées par des virgules. Cette liste indique un ensemble d'images qui peuvent être utilisées comme sources par le navigateur. Chaque chaîne de caractères se compose :
  1. D'une URL pointant vers l'image,
  2. D'un descripteur de largeur, c'est un entier positif, directement suivi par 'w'. La valeur par défaut, si ce descripteur est absent, correspond à l'infini positif.
  3. D'un descripteur de densité de pixel, c'est un nombre décimal positif, directement suivi par 'x'. La valeur par défaut, si ce descripteur est absent, est 1x.

Pour être valide, chaque chaîne de caractères doit comporter au moins un descripteur de largeur ou un descripteur de densité de pixel. Dans cette liste, il ne peut y avoir qu'une seule chaîne pour un même couple de descripteurs largeur/pixels. Le navigateur choisira la meilleure image parmi celles fournies dans la liste.
L'attribut srcset n'aura un effet que lorsque l'élément <source> est le fils direct de l'élément <picture>.

type
Le type MIME de la ressource, éventuellement complété d'un paramètre codecs. La RFC 4281 indique comment indiquer des codecs. Si l'attribut type n'est pas défini, le type de média est récupéré depuis le serveur et le navigateur vérifie s'il peut le gérer. Si le fichier ne peut être utilisé, la source suivante est contrôlée et ainsi de suite. Si l'attribut type est indiqué, le navigateur le compare avec la liste des types qu'il prend en charge, si le type n'est pas reconnu, le serveur n'est pas interrogé et le navigateur analyse l'élément <source> qui suit.

Exemples

Dans cet exemple, on voit comment distribuer une vidéo au format Ogg pour les navigateurs qui prennent en charge ce format, la même vidéo au format QuickTime pour d'autres voire au format webm. Si le navigateur ne prend pas en charge <audio> ou <video>, un message sera affiché. Si le navigateur prend en charge l'élément mais aucun des formats proposé, un évènement error sera déclenché et le lecteur média (s'il est activé) indiquera une erreur. Cette page indique les différents formats pris en charge par les navigateurs pour les éléments <audio> et <video>.

HTML

<video controls>
  <source src="toto.webm" type="video/webm">
  <source src="toto.ogg" type="video/ogg"> 
  <source src="toto.mov" type="video/quicktime">
  Votre navigateur ne prend pas en charge audio ou video.
</video>

Pour plus d'exemples, se référer à Manipuler les éléments <audio> et <video> dans Firefox.

Spécifications

Spécification État Commentaires
HTML Living Standard
La définition de '<source>' dans cette spécification.
Standard évolutif  

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
Support simpleChrome Support complet OuiEdge Support complet OuiFirefox Support complet 3.5
Notes
Support complet 3.5
Notes
Notes Until Firefox 15, Firefox picked the first source element that has a type matching the MIME-type of a supported media format; see bug 449363 for details.
IE Support complet 9Opera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 4
Notes
Support complet 4
Notes
Notes Until Firefox 15, Firefox picked the first source element that has a type matching the MIME-type of a supported media format; see bug 449363 for details.
Opera Android ? Safari iOS Support complet OuiSamsung Internet Android Support complet Oui
media
Expérimentale
Chrome Support complet OuiEdge Support complet OuiFirefox Support complet 15IE Support complet 9Opera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 15Opera Android ? Safari iOS Support complet OuiSamsung Internet Android Support complet Oui
sizes
Expérimentale
Chrome Support complet OuiEdge Support complet OuiFirefox Support complet 38
Support complet 38
Support complet 33
Désactivée
Désactivée From version 33: this feature is behind the dom.image.picture.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE ? Opera ? Safari Support complet 9
Support complet 9
Support partiel 7
WebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 38
Support complet 38
Support complet 33
Désactivée
Désactivée From version 33: this feature is behind the dom.image.picture.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android ? Safari iOS Support complet 9.2
Support complet 9.2
Support partiel 8
Samsung Internet Android Support complet Oui
srcChrome Support complet OuiEdge Support complet OuiFirefox Support complet 3.5IE Support complet 9Opera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 4Opera Android ? Safari iOS Support complet OuiSamsung Internet Android Support complet Oui
srcset
Expérimentale
Chrome Support complet OuiEdge Support complet OuiFirefox Support complet 38
Support complet 38
Support complet 33
Désactivée
Désactivée From version 33: this feature is behind the dom.image.picture.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE ? Opera ? Safari Support complet 9
Support complet 9
Support partiel 7
WebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 38
Support complet 38
Support complet 33
Désactivée
Désactivée From version 33: this feature is behind the dom.image.picture.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android ? Safari iOS Support complet 9.2
Support complet 9.2
Support partiel 8
Samsung Internet Android Support complet Oui
typeChrome Support complet OuiEdge Support complet OuiFirefox Support complet 3.5IE Support complet 9Opera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 4Opera Android ? Safari iOS Support complet OuiSamsung Internet Android Support complet Oui

Légende

Support complet  
Support complet
Compatibilité inconnue  
Compatibilité inconnue
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, Hell_Carlito, Goofy, louuis, FredB, tregagnon, mekal
Dernière mise à jour par : SphinxKnight,