?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!