Amélioration de l'accessibilité vidéo avec webvtt

«La puissance du réseau réside dans son universalité. Accessible à tous est crucial, qu'il soit handicapé ou non.» - Tim Berners-Lee

L'accessibilité est cruciale dans le développement de sites Web. À mesure que le contenu vidéo devient de plus en plus populaire, la demande de contenu des sous-titres augmente également. WebVTT est une technologie qui, en tant que format de sous-titre, peut être facilement intégrée dans les API Web existantes, résolvant ainsi le problème du contenu des sous-titres.

Cet article en discutera. Bien sûr, WebVTT est des sous-titres au niveau le plus élémentaire, mais il peut être implémenté de plusieurs façons, ce qui rend la vidéo (et le contenu de sous-titre lui-même) plus facile à accéder aux utilisateurs.

Introduction au format webvtt

Premièrement: WebVTT est un type de fichier qui contient le texte "WebVTT" et une ligne de sous-titre avec un horodatage. Les exemples sont les suivants:

 <code>WEBVTT 00:00:00.000 --> 00:00:03.000 - [鸟鸣声] - 真美好的一天！ 00:00:04.000 --> 00:00:07.000 - [溪流潺潺] - 的确如此！ 00:00:08.000 --> 00:00:10.000 - 你好！</code>

Un peu bizarre, mais ça a du sens, non? Comme vous pouvez le voir, la première ligne est "WebVTT", suivie de la plage de temps de la troisième ligne (0 à 3 secondes dans ce cas). Plage de temps est requis. Sinon, le fichier webvtt ne fonctionnera tout simplement pas, et il n'affichera pas ou ne journalisera pas les erreurs pour vous informer. Enfin, chaque ligne en dessous de la plage de temps représente les sous-titres contenus dans cette plage.

Notez que vous pouvez inclure plusieurs sous-titres dans une seule plage de temps. Un trait d'union peut être utilisé pour indiquer le début d'une ligne, mais ce n'est pas nécessaire, c'est plus un problème de style.

La plage de temps peut être dans l'un des deux formats: HH: MM: SS.TT ou MM: SS.TT. Chaque section suit certaines règles:

• Heures (hh): au moins deux chiffres
• Minutes (mm): entre 00 et 59 (inclus)
• Secondes: entre 00 et 59 (inclusive)
• Millisecondes (TT): entre 000 et 999 (inclus)

Au début, cela semblait assez intimidant. Vous vous demandez peut-être qui peut taper et ajuster tout cela manuellement. Heureusement, il existe des outils qui simplifient ce processus. Par exemple, YouTube peut automatiquement ajouter des sous-titres vidéo à l'aide de la reconnaissance vocale, et vous permet également de télécharger des sous-titres sous forme de fichiers VTT! Mais ce n'est pas tout. WebVTT peut également être utilisé avec YouTube en téléchargeant votre fichier VTT sur votre vidéo YouTube.

Une fois ce fichier créé, nous pouvons l'intégrer dans l'élément vidéo HTML5.

<code><video autoplay="autoplay" controls="controls" height="150" width="300"><track default="" kind="captions" label="English" src="your_caption_file.vtt" srclang="en"></track></video></code>

La balise est un peu comme un script qui "joue" avec la vidéo. Nous pouvons utiliser plusieurs pistes dans le même élément vidéo. La propriété par défaut indique que la piste sera activée automatiquement.

Soit dit en passant, jetons un coup d'œil à toutes les propriétés:

• Srclang indique la langue de la piste.
• Kind représente le type de piste, il existe cinq types:
  • Les sous-titres sont généralement des traductions et des descriptions de différentes parties de la vidéo.
  • Décrit aider les utilisateurs souffrant de troubles visuels de comprendre ce qui se passe dans les vidéos.
  • Les sous-titres fournissent une alternative à l'audio pour les utilisateurs malentendants.
  • Les métadonnées sont une piste utilisée par le script et ne peuvent pas être vues par l'utilisateur.
  • Les chapitres aident à naviguer sur le contenu vidéo.
• Label est le titre de la piste de texte qui apparaît dans la piste du sous-titre
• SRC est le fichier source de la piste. À moins que le croisement ne soit spécifié, il ne peut pas provenir d'origine croisée.

Bien que WebVTT soit conçu pour la vidéo, vous pouvez toujours placer des fichiers audio en les plaçant<video></video> Utilisez-le dans l'élément avec audio.

Explorez profondément la structure des fichiers webvtt

MDN fournit une excellente documentation et décrit la structure corporelle d'un fichier WebVTT, qui contient jusqu'à six composants. Voici une ventilation de MDN:

• Marquage de commande d'octets en option (BOM)
• String "webvtt"
• Titre de texte facultatif à droite de WebVTT.
  • WebVTT doit avoir au moins un espace après.
  • Vous pouvez l'utiliser pour ajouter des descriptions au fichier.
  • Vous pouvez utiliser autre chose qu'une nouvelle ligne ou une chaîne "->" dans le titre de texte.
• Une ligne vierge équivaut à deux caractères Newline consécutifs.
• Zéro ou plus d'invites ou de commentaires.
• Zéro ou plus de lignes vierges.

Remarque: BOM est un caractère Unicode qui indique le codage Unicode du fichier texte.

Audacieux, italique et souligné - oh mon Dieu!

Nous pouvons certainement utiliser un format HTML en ligne dans des fichiers WebVTT! Ceux-ci sont tous familiers à tout le monde: et . Vous les utilisez exactement de la même manière que vous êtes en HTML.

 <code>WEBVTT 00:00:00.000 --> 00:00:03.000 align:start这是<b>粗体文本</b>00:00:03.000 --> 00:00:06.000 align:middle这是<i>斜体文本</i>00:00:06.000 --> 00:00:09.000 vertical:rl align:middle这是<u>下划线文本</u></code>

Paramètres de l'invite

Les paramètres de l'invite sont des chaînes de texte facultatives utilisées pour contrôler l'emplacement des sous-titres. C'est un peu comme positionner des éléments dans CSS, comme être capable de placer des sous-titres en vidéo.

Par exemple, nous pouvons placer les sous-titres à droite de l'heure rapide, contrôler si les sous-titres sont affichés horizontalement ou verticalement, et définir comment les sous-titres sont alignés et verticalement.

Voici les paramètres que nous pouvons utiliser.

Réglage 1: ligne

La ligne contrôle la position des sous-titres sur l'axe y. Si la verticale est spécifiée (nous en discuterons plus tard), la ligne indiquera plutôt où les sous-titres seront affichés sur l'axe X.

Les entiers et les pourcentages sont des unités entièrement acceptables lors de la spécification des valeurs de ligne. En cas d'utilisation des entiers, la distance de chaque ligne sera égale à la hauteur de la première ligne (d'un point de vue horizontal). Par conséquent, par exemple, supposons que la hauteur de la première ligne du sous-titre est égale à 50px, la valeur de ligne spécifiée est 2 et la direction du sous-titre est horizontale. Cela signifie que les sous-titres seront positionnés en haut de 100px (50px fois 2), égalant au plus les coordonnées de la limite vidéo. Si nous utilisons un entier négatif, il se déplacera du bas à mesure que la valeur diminue (ou, si Vertical: LR est spécifié, nous nous déplacerons de droite à gauche et vice versa). Soyez prudent ici, car les sous-titres peuvent être placés hors écran et sont incohérents dans différents navigateurs. Plus la capacité est grande, plus la responsabilité est grande!

En cas de pourcentage, la valeur doit être comprise entre 0 et 100% (inclusive) (désolé, il n'y a pas de valeur géante de 200% ici). Une valeur plus élevée déplacera les sous-titres de haut en bas, sauf si vertical: LR ou vertical: RL est spécifié, auquel cas les sous-titres se déplaceront sur l'axe x en conséquence.

À mesure que la valeur augmente, les sous-titres apparaîtront sous la limite vidéo. À mesure que la valeur diminue (y compris les valeurs négatives), les sous-titres apparaîtront ci-dessus.

Il est difficile d'imaginer cela sans exemple, non? Voici comment cela est converti en code:

 <code>00:00:00.000 --> 00:00:03.000 line:50%此字幕应水平放置在屏幕的大致中心。</code>

 <code>00:00:03.000 --> 00:00:06.000 vertical:lr line:50%此字幕应垂直放置在屏幕的大致中心。</code>

 <code>00:00:06.000 --> 00:00:09.000 vertical:rl line:-1此字幕应垂直放置在视频的左侧。</code>

 <code>00:00:09.000 --> 00:00:12.000 line:0字幕应水平放置在屏幕顶部。</code>

Réglage 2: vertical

La verticale indique que les sous-titres seront affichés verticalement et déplacés dans la direction spécifiée par les paramètres de ligne. Certaines langues ne s'affichent pas de gauche à droite, mais doivent s'afficher de haut en bas.

<code> 00:00:00.000 --> 00:00:03.000 vertical:rl此字幕应垂直显示。</code>

 <code>00:00:00.000 --> 00:00:03.000 vertical:lr此字幕应垂直显示。</code>

Réglage 3: position

La position spécifie la position où les sous-titres seront affichés sur l'axe X. Si la verticale est spécifiée, la position spécifiera plutôt la position où les sous-titres seront affichés sur l'axe des y. Ce doit être un entier entre 0% et 100% (inclus).

 <code>00:00:00.000 --> 00:00:03.000 vertical:rl position:100%此字幕将垂直显示并在底部。 00:00:03.000 --> 00:00:06.000 vertical:rl position:0%此字幕将垂直显示并在顶部。</code>

À ce stade, vous remarquerez peut-être que la ligne et la position sont similaires aux propriétés CSS Flexbox alignent les éléments et justifier-contenu, tandis que la verticale est très similaire à la direction flexible. Une astuce pour se souvenir de la direction WebVTT est que la ligne spécifie une position perpendiculaire au flux de texte, et la position spécifie une position parallèle au flux de texte. C'est pourquoi si nous spécifions vertical, la ligne se déplacera soudainement le long de l'axe horizontal et la position se déplacera le long de l'axe vertical.

Réglage 4: taille

La taille spécifie la largeur du sous-titre. Si la verticale est spécifiée, il définira plutôt la hauteur des sous-titres. Comme d'autres paramètres, il doit être un entier entre 0% et 100% (inclus).

 <code>00:00:00.000 --> 00:00:03.000 vertical:rl size:50%此字幕将垂直填充屏幕的一半。</code>

 <code>00:00:03.000 --> 00:00:06.000 position:0%此字幕将水平填充整个屏幕。</code>

Réglage 5: Aligner

ALIGN Spécifie où le texte apparaîtra dans la direction horizontale. Si la verticale est spécifiée, il contrôlera plutôt l'alignement vertical.

Les valeurs dont nous avons sont: Démarrer, milieu, fin, gauche et droite. Si aucune verticale n'est spécifiée, l'alignement est exactement à quoi ils ressemblent. Si la verticale est spécifiée, ils deviendront réellement supérieurs, moyens (verticaux) et en bas. L'utilisation de démarrage et de fin au lieu de gauche et de droite est un moyen plus flexible de permettre l'alignement des valeurs de texte brut basées sur les attributs CSS Unicode-BiDI.

Notez que l'aligne n'est pas affecté par la verticale: LR ou vertical: RL.

 <code>WEBVTT 00:00:00.000 --> 00:00:03.000 align:start此字幕将出现在屏幕左侧。 00:00:03.000 --> 00:00:06.000 align:middle此字幕将水平位于屏幕中央。 00:00:06.000 --> 00:00:09.000 vertical:rl align:middle此字幕将垂直位于屏幕中央。 00:00:09.000 --> 00:00:12.000 vertical:rl align:end此字幕将垂直位于屏幕的右下角，而不管vertical:lr 或vertical:rl 的方向如何。 00:00:12.000 --> 00:00:15.000 vertical:lr align:end此字幕将垂直位于屏幕底部，而不管vertical:lr 或vertical:rl 的方向如何。 00:00:12.000 --> 00:00:15.000 align:left此字幕将出现在屏幕左侧。 00:00:12.000 --> 00:00:15.000 align:right此字幕将出现在屏幕右侧。</code>

Commentaires WebVTT

Les commentaires WebVTT sont des chaînes de texte qui ne sont visibles que lors de la lecture du texte de la source de fichier, tout comme les commentaires auxquels nous pensons dans HTML, CSS, JavaScript et toute autre langue. Les commentaires peuvent contenir des ruptures de ligne, mais pas des lignes vides (essentiellement des nouvelles lignes à deux lignes).

 <code>WEBVTT 00:00:00.000 --> 00:00:03.000 - [鸟鸣声] - 真美好的一天！ NOTE 这是一个注释。观看字幕的任何人都不会看到它。 00:00:04.000 --> 00:00:07.000 - [溪流潺潺] - 的确如此！ 00:00:08.000 --> 00:00:10.000 - 你好！</code>

Lors de l'analyse et du rendu du fichier de sous-titres, les lignes en surbrillance ci-dessus seront complètement cachées devant l'utilisateur. Les commentaires peuvent également être multi-lignes.

Il y a trois caractères / chaînes très importants à noter et ils ne peuvent pas être utilisés pour les commentaires:. Comme alternative, vous pouvez utiliser des caractères d'évasion.

Quelques autres fonctionnalités WebVTT intéressantes

Nous verrons rapidement des moyens très intelligents de personnaliser et de contrôler les sous-titres, mais au moins au moment de la rédaction, ces méthodes manquent de support de navigateur cohérent.

Oui, nous pouvons coiffer les sous-titres!

En fait, les sous-titres WebVTT peuvent être stylisés. Par exemple, pour définir l'arrière-plan du sous-titre en rouge, définissez la propriété d'arrière-plan sur le pseudo-élément :: cue:

 <code>video::cue { background: red; }</code>

N'oubliez pas que nous pouvons utiliser un format HTML en ligne dans des fichiers WebVTT? Eh bien, nous pouvons aussi les choisir. Par exemple, sélectionnez l' élément italique ():

 <code>video::cue(i) { color: yellow; }</code>

Il s'avère que les fichiers WebVTT prennent en charge les blocs de style, qui est très similaire aux fichiers HTML:

 <code>WEBVTT STYLE ::cue { color: blue; font-family: "Source Sans Pro", sans-serif; }</code>

Les éléments sont également accessibles via leur identifiant rapide. Notez que les identifiants invites utilisent le même mécanisme d'échappement que HTML.

 <code>WEBVTT STYLE ::cue(#middle\ cue\ identifier) { text-decoration: underline; } ::cue(#cue\ identifier\ \33) { font-weight: bold; color: red; } first cue identifier 00:00:00.000 --> 00:00:02.000你好，世界！ middle cue identifier 00:00:02.000 --> 00:00:04.000此提示标识符将带有下划线！ cue identifier 3 00:00:04.000 --> 00:00:06.000这个不会受到影响，就像第一个一样！</code>

Différents types de balises

De nombreuses balises peuvent être utilisées pour formater les sous-titres. Il y a un avertissement. Ces balises ne peuvent pas être utilisées dans des éléments avec des chapitres d'attribut aimables. Voici quelques balises formatées que vous pouvez utiliser.

Tags de classe

Nous pouvons utiliser la balise de classe pour définir des classes dans des balises WebVTT, et nous pouvons utiliser CSS pour sélectionner ces classes. Supposons que nous ayons une classe. Nous pouvons utiliser cette balise en sous-titres. Nous pouvons contrôler de nombreux styles de cette manière, tels que les polices, les couleurs de police et les couleurs d'arrière-plan.

 <code>/* 我们的CSS 文件*/ .yellowish { color: yellow; } .redcolor { color: red; }</code>

 <code>WEBVTT 00:00:00.000 --> 00:00:03.000此文本应为黄色。此文本将为默认颜色。 00:00:03.000 --> 00:00:06.000此文本应为红色。此文本将为默认颜色。</code>

Tag horodatage

Si vous souhaitez faire apparaître des sous-titres à un moment précis, vous devez utiliser une balise horodato. Ils sont comme des sous-titres affinés pour les points exacts dans le temps. L'heure de la balise doit se situer dans une plage de temps donnée des sous-titres, et chaque balise d'horodatage doit être plus tard que la précédente.

 <code>WEBVTT 00:00:00.000 --> 00:00:07.000此文本将显示超过6 秒。</code>

tag vocal

Les balises vocales sont concises car elles aident à identifier qui parle.

 <code>WEBVTT 00:00:00.000 --> 00:00:03.000鲍勃，你今天过得怎么样？ 00:00:03.000 --> 00:00:06.000很好，你呢？</code>

Tags de rubis

Les balises Ruby sont un moyen d'afficher de petits caractères de commentaire au-dessus des sous-titres.

 <code>WEBVTT 00:00:00.000 --> 00:00:05.000</code> Ce sous-titre aura un texte affiché au-dessus<rt> Ce texte sera affiché au-dessus des sous-titres.</rt>

en conclusion

C’est tout sur webvtt! Il s'agit d'une technologie très utile qui offre l'occasion d'améliorer considérablement l'accessibilité de votre site Web, surtout si vous utilisez des vidéos. Essayez d'écrire vous-même des sous-titres pour en avoir une meilleure idée!

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!