Publié le 20 août 2020
Les sous-titres et les descriptions de lecteurs d'écran sont le seul moyen pour de nombreux utilisateurs pour regarder vos vidéos. Dans certaines juridictions, elles sont même requises la loi ou la réglementation. Le format WebVTT (Web Video Text Tracks) permet de décrire des données textuelles synchronisées, telles que des sous-titres ou des sous-titres, afin de rendre vos vidéos plus accessibles.
Ajouter des tags <track>
Pour ajouter des sous-titres ou des descriptions de lecteur d'écran à une vidéo Web, ajoutez un <track>
dans une balise <video>. En plus des sous-titres et des descriptions pour les lecteurs d'écran, les balises <track> peuvent également être utilisées pour les sous-titres et les titres de chapitre.
La balise <track> est semblable à l'élément <source> en ce sens qu'elle comporte un attribut src qui pointe vers le contenu référencé. Pour une balise <track>, elle pointe vers une
Fichier WebVTT.
L'attribut label définit les conditions d'une piste donnée
identifiés dans l'interface.
Pour proposer des titres dans plusieurs langues, ajoutez une balise <track> distincte pour chacune.
Fichier WebVTT que vous fournissez et indiquez la langue à l'aide du srclang
.
Examinez cet exemple de balise <video> avec deux balises <track>.
Ajoutez un élément <track> en tant qu'enfant de l'élément <video>.
<video controls>
<source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm" type="video/webm" />
<source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.mp4" type="video/mp4" />
<track src="chrome-subtitles-en.vtt" label="English captions" kind="captions" srclang="en" default>
<track src="chrome-subtitles-zh.vtt" label="中文字幕" kind="captions" srclang="zh">
<p>This browser does not support the video element.</p>
</video>
Vous pouvez également consulter un exemple sur Glitch.
Structure de fichier WebVTT
Voici un fichier WebVTT hypothétique pour la démonstration. Il s'agit d'un fichier texte contenant une série d'indices. Chaque signal est un bloc de texte à afficher à l'écran et la période pendant laquelle il est affiché.
WEBVTT
00:00.000 --> 00:04.999
Man sitting on a tree branch, using a laptop.
00:05.000 --> 00:08.000
The branch breaks, and he starts to fall.
...
Chaque élément du fichier de piste est un repère. Chaque signal a une heure de début et
heure de fin, séparée par une flèche, suivie du texte du repère. Les repères peuvent également avoir des ID, tels que railroad et manuscript. Les repères sont séparés par une ligne vide.
WEBVTT
railroad
00:00:10.000 --> 00:00:12.500
Left uninspired by the crust of railroad earth
manuscript
00:00:13.200 --> 00:00:16.900
that touched the lead to the pages of your manuscript.
Les codes temporels sont au format hours:minutes:seconds.milliseconds. L'analyse est stricte.
Cela signifie que les nombres doivent être complétés par zéro si nécessaire: heures, minutes et secondes.
doit avoir deux chiffres (00 pour une valeur nulle) et le nombre de millisecondes doit avoir trois
(000 pour une valeur nulle). Il existe un excellent programme
de validation WebVTT à l'adresse
Live WebVTT Validator, qui recherche les erreurs de mise en forme de l'heure
de temps non séquentiels.
Vous pouvez créer un fichier VTT manuellement, car il existe de nombreux services qui les créer pour vous.
Comme vous pouvez le voir dans nos exemples précédents, le format WebVTT est assez simple. Ajoutez simplement vos données textuelles avec les codes temporels.
Mais que faire si vous souhaitez que vos légendes s'affichent à une autre position
un alignement à gauche ou à droite ? Par exemple, pour aligner les sous-titres sur la position actuelle de l'orateur ou pour ne pas gêner le texte de la caméra. WebVTT définit des paramètres pour ce faire, et plus encore, directement dans le fichier .vtt. Notez la façon dont l'emplacement des sous-titres est défini en ajoutant
après les définitions des intervalles de temps.
WEBVTT
00:00:05.000 --> 00:00:10.000 line:0 position:20% size:60% align:start
The first line of the subtitles.
Une autre fonctionnalité pratique est la possibilité de styliser des repères à l'aide de CSS. Peut-être voulez-vous
d'utiliser un dégradé linéaire gris comme arrière-plan, avec une couleur de premier plan
papayawhip pour tous les sous-titres et le texte en gras peachpuff en couleur.
video::cue {
background-image: linear-gradient(to bottom, dimgray, lightgray);
color: papayawhip;
}
video::cue(b) {
color: peachpuff;
}
Pour en savoir plus sur le style et le taggage de signaux individuels, la spécification WebVTT est une bonne source d'exemples avancés.
Types de pistes de texte
Avez-vous remarqué l'attribut kind de l'élément <track> ? Il permet d'indiquer la relation entre la piste de texte et la vidéo. Les valeurs possibles de l'attribut kind sont les suivantes :
captions: pour les sous-titres issus de transcriptions et éventuellement les traductions de tout contenu audio. Adapté aux personnes malentendantes et lorsque la vidéo est le son coupé.subtitles: pour les sous-titres, c'est-à-dire les traductions de la parole et du texte dans une langue différente de la langue principale de la vidéo.descriptions: pour décrire les éléments visuels du contenu vidéo. Adapté aux personnes malvoyantes.chapters: doit s'afficher lorsque l'utilisateur navigue dans la vidéo.metadata: non visible et peut être utilisé par les scripts.
Maintenant que vous savez comment rendre une vidéo disponible et accessible sur votre page Web, vous vous demandez peut-être comment procéder dans des cas d'utilisation plus complexes. Découvrez les frameworks multimédias et comment ils peuvent vous aider à ajouter des vidéos à votre page Web, tout en offrant des fonctionnalités avancées.