Niveau Niveau débutant

Le sous-titrage vidéo avec WebVTT

Articleaccessibilité

Publié par le (5326 lectures)

accessibilité vidéo webvtt

Le WebVTT (Web Video Text Tracks) est un format de sous-titrage pour les vidéos en ligne. Il permet aux internautes de lire des sous-titres sur des vidéos diffusées sur le web, que ce soit sur un ordinateur, une tablette ou un smartphone. Cette spécification W3C a atteint le statut de recommandation en 2019 mais la fonctionnalité a commencé à être implémentée à partir de 2012-2014 dans tous les navigateurs, il n'y a donc plus aucune raison de ne pas s'en servir.

Le fonctionnement de WebVTT est assez simple : les sous-titres sont enregistrés dans un fichier texte qui est associé à la vidéo. Ce fichier contient les lignes de dialogue ou d'audio-description, ainsi que des informations sur le moment où elles doivent être affichées à l'écran. Lorsque la vidéo est lue, les sous-titres sont affichés en temps réel en fonction des informations contenues dans le fichier WebVTT.

Les lecteurs intégrés aux plateformes tout-en-un telles que YouTube embarquent leurs propres solutions puisqu'ils ne reposent pas sur une unique balise <video> mais un composant associant barre de contrôles sur-mesure, lecteur avec streaming, transmission de statistiques, etc.

Il existe plusieurs programmes et applications web qui permettent de générer le format WebVTT, ou de l'exporter à partir d'autres assez similaires dont il s'inspire comme le SRT. Cependant contrairement au SRT, le format WebVTT utilise un point à la place de la virgule pour séparer les secondes et les millisecondes et dispose de bien plus de capacités pour la mise en forme.

Exemple de source WebVTT :

WEBVTT

00:00:00.000 --> 00:00:05.000
Alors vous deux, vous déterrez les dinosaures ?

00:00:05.000 --> 00:00:10.000
On essaie.

00:00:10.000 --> 00:00:15.000
Le kiwi rencontre un écureuil qui lui donne des noix.

00:00:15.000 --> 00:00:20.000
Il faudra vous habituer au professeur Malcolm. Il souffre d'un déplorable excès de personnalité. Surtout pour un mathématicien.

Dans cet exemple, chaque ligne commence par un intervalle de temps au format "HH:MM:SS.mmm" (heures, minutes, secondes et millisecondes) indiquant quand le texte associé doit commencer à être affiché et lorsqu'il doit disparaître.

Il est important de noter que WebVTT est uniquement un format de texte. Cela signifie qu'il est juste prévu pour afficher des sous-titres en surimpression sur une vidéo existante.

Pour utiliser WebVTT, vous devez d'abord enregistrer les sous-titres dans un fichier texte, encodé en UTF-8, avec l'extension .vtt. Vous pouvez créer ce fichier vous-même en utilisant un éditeur de texte.

Une fois le fichier WebVTT prêt, vous devez l'associer à la vidéo à l'aide de la balise HTML track, enfant direct de <video>, aux côtés d'une ou plusieurs sources selon les formats utilisés.

<video>
  <source src="video.mp4" type="video/mp4">
  <track src="sous-titres.vtt" kind="subtitles" srclang="fr" label="Français">
</video>

Dans l'exemple précédent, la balise source indique l'url vers le fichier vidéo, et la balise track indique l'url vers le fichier WebVTT contenant les sous-titres. Le navigateur s'occupe du reste.

Rendu dans le navigateur

☝ Les visuels suivants sont des captures d'écran et non des lecteurs vidéo, ne tentez pas de lancer la lecture en cliquant dessus ;)

L'ajout d'une balise track valide fait apparaître l'option de sous-titrage dans le menu contextuel.

WebVTT Exemple de menu contextuel dans le lecteur vidéo

La balise "track" indique au navigateur web que les sous-titres doivent être affichés pendant la lecture de la vidéo et précise par des attributs sa nature : kind doit comporter la valeur subtitles, tandis que srclang contiendra le code langue et label la langue exprimée de façon lisible pour les humains. Vous pouvez ainsi utiliser l'élément track pour ajouter des sous-titres dans d'autres langues.

Sous Chromium :

WebVTT Menu langue qui apparait dans Chromium

Sous Firefox :

WebVTT Menu langue qui apparait dans Mozilla Firefox

Styles et métadonnées

On peut aussi styler les sous-titres grâce à CSS, soit dans le document parent avec le sélecteur video::cue...

<style>
video::cue {
  background: black;
  color: white;
}
video::cue(b) {
  color: tomato;
}
</style>

...soit en embarquant des déclarations de styles dans le fichier WebVTT lui même (ils devront figurer en amont du texte).

WEBVTT

STYLE
::cue {
  background: black;
  color: white;
}

00:31:30.000 --> 00:31:35.000
Je veux me libérer !

WebVTT en action : un sous titre s'affiche sur une vidéo

On peut également ajouter des notions de chapitrage, des métadonnées, des commentaires avec NOTE, fournir des indications de positionnement avec region puis d'alignement avec align notamment lorsqu'il s'agit de dialogues où il faut identifier la personne qui parle.

WebVTT est donc une solution simple et très personnalisable pour intégrer des sous-titres et améliorer l'accessibilité de vos vidéos.

WebVTT Image de popcorn

Commentaires

Super,

voilà l'article que j'attendais. Je m'étais penché dessus, mais les articles trouvées ne m'avaient pas convaincu. Ici, tout est clair.

Merci.

Il faut remplir à la main, avec le minutage, le texte qui correspond à peu près à la vidéo en lecture.

Je me permets de signaler https://my.checksub.com/users/sign_in

qui permet d'automatiser ce remplissage de texte. J'avoue que je n'ai effectué qu'une recherche, je n'ai pas du tout testé cette application.

Commenter

Vous devez être inscrit et identifié pour utiliser cette fonction.

Connectez-vous (déjà inscrit)

Oubli de mot de passe ? Pas de panique, on va le retrouver

Pas encore inscrit ? C'est très simple et gratuit.