HTML Academy · Leçon

Sous-titres avec `track` et WebVTT

Ajoutez des légendes et des sous-titres aux vidéos avec `track` et des fichiers `.vtt`.

Leçon 4 sur 414 étapes

Sous-titres avec `track` et WebVTT est une leçon HTML Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage HTML Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours HTML Academy comprend 4 leçons au total.

Sous-titres et sous-titrage pour sourds et malentendants

L’accessibilité vidéo exige des alternatives textuelles au contenu audio :

Sous-titres — transcription des dialogues, en supposant que le spectateur peut entendre les sons
Sous-titrage pour sourds et malentendants — dialogues et descriptions des sons (pour les personnes sourdes)
Descriptions audio — description du contenu visuel pour les personnes aveugles

L’élément track

L’élément <track> associe un fichier de sous-titres ou de sous-titrage à une vidéo :

<video controls>
  <source src="tutorial.mp4" type="video/mp4">
  <track
    src="tutorial-en.vtt"
    kind="subtitles"
    srclang="en"
    label="English"
    default
  >
  <track
    src="tutorial-es.vtt"
    kind="subtitles"
    srclang="es"
    label="Spanish"
  >
</video>

Attributs de track

Attributs de l’élément track :

src — chemin vers le fichier VTT
kind — type de piste (sous-titres, sous-titrage pour sourds et malentendants, descriptions, chapitres, métadonnées)
srclang — code de langue BCP 47 (en, es, fr...)
label — nom compréhensible affiché dans le menu CC
default — booléen ; cette piste est affichée par défaut

Format WebVTT

WebVTT (pistes de texte vidéo du Web) est le format de fichier de sous-titres :

WEBVTT

00:00:01.000 --> 00:00:04.000
Hello and welcome to the HTML5 tutorial.

00:00:04.500 --> 00:00:08.000
In this lesson, we'll cover the video element
and how to add subtitles.

00:00:09.000 --> 00:00:12.000
[Keyboard click sounds]
Let's look at a code example...

Identifiants des repères VTT

Les repères VTT peuvent avoir des identifiants facultatifs :

WEBVTT

intro-1
00:00:01.000 --> 00:00:04.000
Welcome to the tutorial.

intro-2
00:00:04.500 --> 00:00:08.000
We'll cover HTML5 video today.

00:00:09.000 --> 00:00:12.000
No identifier on this cue — that is fine.

Paramètres des repères VTT

Les repères VTT prennent en charge les paramètres de positionnement :

WEBVTT

00:00:01.000 --> 00:00:04.000 position:10% align:left
This text is positioned at the left.

00:00:05.000 --> 00:00:08.000 line:10%
This text appears near the top.

00:00:09.000 --> 00:00:12.000 size:50% position:75%
A smaller caption on the right.

Styliser les repères WebVTT avec CSS

Stylisez les encadrés des repères avec le pseudo-élément ::cue :

/* Style all cues: */
::cue {
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  font-size: 1.2rem;
  font-family: 'Arial', sans-serif;
  padding: 0.2em 0.5em;
  border-radius: 4px;
}

/* Style specific voice tags: */
::cue(v[voice="Teacher"]) {
  color: #60a5fa;
}

Valeurs de l’attribut kind de track

L’attribut kind précise la fonction de la piste textuelle :

subtitles — traduction ou transcription des dialogues
captions — dialogues et descriptions des sons pour les personnes sourdes
descriptions — description audio du contenu visuel pour les personnes aveugles
chapters — titres des chapitres pour la navigation
metadata — données lisibles par une machine pour JavaScript

Piste de chapitres

Utilisez kind=chapters pour permettre la navigation entre les chapitres de la vidéo :

<track
  kind="chapters"
  src="chapters.vtt"
  srclang="en"
  label="Chapters"
>

<!-- chapters.vtt: -->
<!--
WEBVTT

00:00:00.000 --> 00:01:30.000
Introduction

00:01:30.000 --> 00:05:00.000
HTML Document Structure

00:05:00.000 --> 00:10:00.000
Forms and Input
-->

API TextTrack de JavaScript

Accédez aux données de la piste avec l’API TextTrack :

const video = document.getElementById('tutorial');
const tracks = video.textTracks;

// Enable a track:
tracks[0].mode = 'showing';  // 'hidden', 'showing', or 'disabled'

// Listen for active cue changes:
tracks[0].addEventListener('cuechange', function() {
  const cue = this.activeCues[0];
  if (cue) console.log('Current cue:', cue.text);
});

Piste de métadonnées pour une vidéo interactive

Utilisez des pistes de métadonnées pour déclencher des événements JavaScript à des moments précis :

<track kind="metadata" src="interactive.vtt" id="meta-track">

<script>
video.textTracks[0].mode = 'hidden';
video.textTracks[0].addEventListener('cuechange', function() {
  const cue = this.activeCues[0];
  if (cue) {
    const data = JSON.parse(cue.text);
    // Trigger quiz, show annotation, etc.
    showAnnotation(data);
  }
});
</script>

Exigences d’accessibilité

WCAG exige des sous-titres pour les vidéos préenregistrées :

Niveau A — sous-titres pour toute vidéo préenregistrée avec du son
Niveau AA — descriptions audio pour toute vidéo préenregistrée
Les sous-titres générés automatiquement (YouTube) sont insuffisants sans vérification
Les sous-titres doivent être exacts, synchronisés et complets

Vérification rapide

Quelle est la différence entre les types de pistes subtitles et captions ?

Réponds-y dans la leçon interactive

Récapitulatif : track et WebVTT

Éléments essentiels des sous-titres et du sous-titrage :

<track src kind srclang label default> dans video
kind : subtitles, captions, descriptions, chapters, metadata
Format de fichier WebVTT : WEBVTT + horodatage --> horodatage + texte
Stylisez les repères avec le pseudo-élément CSS ::cue
WCAG exige des sous-titres pour les vidéos préenregistrées

Gratuit pour commencer

Apprends HTML avec un tuteur IA — gratuit

Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.

Cours: 40
Leçons: 159

Commencer gratuitement Voir le cours complet

Questions Fréquemment Posées

La leçon « Sous-titres avec `track` et WebVTT » est-elle gratuite ?

Oui — le texte complet de « Sous-titres avec `track` et WebVTT » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours HTML Academy, passe à CoddyKit PRO. Le cours HTML Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Sous-titres avec `track` et WebVTT » ?

Ajoutez des légendes et des sous-titres aux vidéos avec `track` et des fichiers `.vtt`. Tu pratiques HTML Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer HTML Academy ?

Aucune expérience préalable n'est requise. HTML Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.

Combien de temps prend la leçon « Sous-titres avec `track` et WebVTT » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon HTML Academy ?

Oui. Chaque leçon HTML Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

L’élément `audio` : `src`, commandes, boucle et lecture automatique
L’élément `video` et le rapport d’aspect
L’élément `source` pour plusieurs formats
Sous-titres avec `track` et WebVTT

← Retour à HTML Academy