Balise HTML <source>Tag


Exemples

Un lecteur audio avec deux fichiers source. Le navigateur doit sélectionner le fichier source qu'il prend en charge (s'il prend en charge les deux, il peut choisir l'un ou l'autre) :

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

Essayez-le vous-même »

Prise en charge des navigateurs

Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge la balise.

Balise
<source> 4.0 9.0 3.5 4.0 10.5

Définition et utilisation

La balise <source> définit des ressources multimédias pour les éléments multimédias (tels que <video> et <audio>).

La balise <source> vous permet de spécifier deux fichiers vidéo/audio parmi lesquels le navigateur peut choisir en fonction de sa prise en charge des types de médias ou des codecs.


Différences entre HTML 4.01 et HTML5

La balise <source> est nouvelle en HTML5.


Attributes

Nouveau: Nouvel attribut dans HTML5.

Attribut Valeur Description
mediaNouveau media_query Spécifie le type de ressource multimédia, pour que le navigateur décide s'il doit la télécharger.
srcNouveau URL Spécifie l'URL du fichier multimédia.
type MIME_type Spécifie le type MIME de la ressource multimédia.
sizes   Définir différentes tailles d'image pour différentes mises en page.
srcset URL Lorsque <source> est appliqué à la balise <picture>, il est nécessaire. Il spécifie l'URL de l'image à utiliser dans différentes conditions.

Plus d’exemples

Exemples

Utilisez <source> dans la balise <video> pour configurer la vidéo :

<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Votre navigateur ne prend pas en charge la balise video. </video>

Essayez-le vous-même »

Exemples

Utilisez <source> dans la balise <picture> pour définir des images pour différents écrans :

<picture> <source media="(min-width:650px)" srcset="/static.jyshare.com/images/example-logo.png"> <source media="(min-width:465px)" srcset="/static.jyshare.com/images/code-icon-script.png"> <img src="/static.jyshare.com/images/mix/hjkg_icon.png" style="width:auto;"> </picture>

Essayez-le vous-même »

Attributs globaux

La balise <source> prend en chargeles attributs globaux HTML。


Attributs d'événement

La balise <source> prend en chargeles attributs d'événements HTML。

Autres extensions