8.1 Élément <source>
Les éléments <source>
et <track>
jouent un rôle important en HTML5, en fournissant un support pour différents formats multimédias et en améliorant l'accessibilité du contenu. Examinons-les de plus près.
L'élément <source>
est utilisé à l'intérieur des éléments <audio>
, <video>
, et <picture>
pour spécifier différentes sources de contenu multimédia. Cela permet aux navigateurs de choisir le format le plus adapté à la lecture, assurant une compatibilité inter-navigateurs et le support de différents appareils.
Syntaxe
<source src="URL" type="MIME-type">
Attributs
src
: indique le chemin vers le fichier multimédiatype
: indique le type de fichier et son MIME-type. Cela aide le navigateur à déterminer s'il prend en charge ce format.
Exemples d'utilisation :
Exemple 1: À l'intérieur d'un élément <video>
Dans cet exemple, le navigateur essaiera de lire le premier format pris en charge.
<video controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
<source src="movie.ogv" type="video/ogg">
Votre navigateur ne supporte pas la lecture de la vidéo.
</video>
Exemple 2: À l'intérieur d'un élément <audio>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
Votre navigateur ne supporte pas la lecture de l'audio.
</audio>
Exemple 3: À l'intérieur d'un élément <picture>
<picture>
<source srcset="image-320w.jpg" media="(max-width: 320px)">
<source srcset="image-640w.jpg" media="(max-width: 640px)">
<source srcset="image-1280w.jpg" media="(max-width: 1280px)">
<img src="image-1280w.jpg" alt="Exemple d'image">
<picture>
Avantages de l'utilisation de <source>
- Compatibilité inter-navigateurs: permet d'indiquer plusieurs formats, garantissant la lecture dans différents navigateurs.
- Optimisation pour les appareils: possibilité de spécifier différents fichiers pour différents appareils et conditions.
8.2 Élément <track>
L'élément <track>
est utilisé pour ajouter des pistes de texte au contenu multimédia, telles que des sous-titres, des sous-titres pour les sourds et malentendants, des descriptions, des chapitres et des métadonnées. Il est placé à l'intérieur des éléments <audio>
ou <video>
.
Syntaxe
<track src="URL" kind="type" srclang="language" label="label">
Attributs
src
: indique le chemin vers le fichier de piste de texte.-
kind
: définit le type de piste de texte. Les valeurs possibles sont :subtitles
: sous-titres pour la traduction des dialoguescaptions
: sous-titres pour les sourds ou malentendants, incluant les descriptions sonoresdescriptions
: descriptions audio pour les malvoyantschapters
: chapitres pour naviguer dans le contenu multimédiametadata
: métadonnées pouvant être utilisées par JavaScript
srclang
: définit la langue de la piste de texte (par exemple, en pour anglais, es pour espagnol).label
: nom descriptif de la piste de texte, qui s'affiche dans le menu de sélection des pistes.default
: indique que cette piste doit être activée par défaut.
Exemples d'utilisation :
Exemple 1: Sous-titres pour une vidéo
Dans cet exemple, la vidéo a deux pistes de sous-titres : en anglais et en espagnol. L'utilisateur peut choisir la piste souhaitée dans le menu.
<video controls>
<source src="movie.mp4" type="video/mp4">
<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
<track src="subtitles_es.vtt" kind="subtitles" srclang="es" label="Español">
Votre navigateur ne supporte pas la lecture de la vidéo.
</video>
Exemple 2: Sous-titres pour les sourds ou malentendants
Cette configuration ajoute une piste de sous-titres pour les sourds ou malentendants en anglais.
<video controls>
<source src="movie.mp4" type="video/mp4">
<track src="subtitles_en.vtt" kind="captions" srclang="en" label="subtitles">
Votre navigateur ne supporte pas la lecture de la vidéo.
</video>
Avantages de l'utilisation de <track>
- Amélioration de l'accessibilité: les sous-titres et descriptions rendent le contenu accessible aux sourds, malentendants et malvoyants.
- Support multilingue: possibilité d'ajouter des sous-titres dans différentes langues.
- Informations supplémentaires: les chapitres et métadonnées permettent d'organiser et de structurer le contenu multimédia.
8.3 Format de fichiers pour les pistes de texte
Les pistes de texte sont généralement enregistrées au format WebVTT (Web Video Text Tracks). Ce format est pris en charge par la plupart des navigateurs modernes et est facilement lisible à la fois par les machines et les humains.
Exemple de fichier WebVTT (subtitles_en.vtt)
WEBVTT
1
00:00:00.000 --> 00:00:05.000
Welcome to our video presentation.
2
00:00:05.000 --> 00:00:10.000
We hope you find this informative and enjoyable.
Exemples d'utilisation combinée des éléments <source> et <track>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vidéo avec plusieurs sources et pistes de texte</title>
</head>
<body>
<h1>Exemple de vidéo avec plusieurs sources et pistes de texte</h1>
<video controls width="600" poster="posterimage.jpg">
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English" default>
<track src="subtitles_es.vtt" kind="subtitles" srclang="es" label="Spanish">
<track src="captions_en.vtt" kind="captions" srclang="en" label="English Captions">
<track src="descriptions_en.vtt" kind="descriptions" srclang="en" label="English Descriptions">
Your browser does not support the video element.
</video>
</body>
</html>
GO TO FULL VERSION