<source>

La balise <source> est utilisée en complément des balises <audio>, <video>, et <picture> pour définir des fichiers multimédias alternatifs.

Elle permet d'offrir plusieurs formats ou résolutions afin de garantir la compatibilité avec divers navigateurs et appareils.

Elle ne peut être utilisée seule et doit être imbriquée dans une balise parent appropriée obligatoirement. 😉

Structure et syntaxe de la balise <source>

Structure

Prenons l'exemple d'une bande son que nous souhaiterions ajouter sur notre page HTML.

Voici le code que nous aurions en utilisant la balise <source> :

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  Votre navigateur ne supporte pas l'élément audio.
</audio>

Quelques petites explications :

• src : Définit le chemin vers le fichier multimédia ;
• type : Indique le type MIME du fichier (par exemple audio/mpeg ou même video/mp4) ;
• "Votre navigateur..." : Il s'agit du texte qui sera affiché pour gérer les cas où le navigateur ne prend pas en charge la balise parent ou ses sources.

Exemples d'utilisation

Exemple pour <video>

Voici ce que nous aurions si nous combinions la balise <source> avec la balise <video> :

<video controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.ogg" type="video/ogg">
  Votre navigateur ne supporte pas l'élément vidéo.
</video>

Comme vous pouvez le voir, rien n'est vraiment étrange comparé à ce que nous avons vu juste au-dessus avec la balise <audio>.

Exemple pour <picture>

Avec la balise <picture>, voici ce que nous aurions :

<picture>
  <source srcset="image-large.jpg" media="(min-width: 800px)">
  <source srcset="image-small.jpg" media="(max-width: 799px)">
  <img src="fallback.jpg" alt="Description de l'image">
</picture>

Attributs

Attributs spécifiques à <source>

Quelques attributs sont spécifiques à la balise <source> :

Attributs généraux

La balise <source> accepte également les attributs classiques, tels que id, class, style, etc.

Recommandations

Plusieurs choses sont à considérer quand vous utilisez la balise <source> : voici nos recommandations !

Définissez toujours le type MIME

Le type MIME aide les navigateurs à sélectionner le fichier multimédia qui leur convient le mieux. Oublier de le préciser revient à naviguer à l'aveugle pour le navigateur de votre utilisateur : il verra donc parfois votre texte de fallback (le texte à afficher quand aucun format n'est compatible avec son navigateur).

Ce serait dommage non ? 😋

Utilisez des formats universels

Privilégiez toujours les formats universels comme :

• mp4 ;
• mp3 ;
• jpeg ;
• png.

Ajoutez un texte de fallback

Comme nous l'avons vu, le texte de fallback est un texte qui est affiché quand aucun des formats n'est compatible avec le navigateur de l'utilisateur.

Si vous n'en ajoutez pas, votre utilisateur verra tout simplement du vide.

Compatibilité des navigateurs

La balise <source> est compatible avec tous les navigateurs.