“網(wǎng)絡(luò)的力量在于其普遍性。無論殘疾與否，人人皆可訪問是至關(guān)重要的方面?！?– Tim Berners-Lee

網(wǎng)站開發(fā)中，無障礙訪問至關(guān)重要。隨著視頻內(nèi)容日益普及，字幕內(nèi)容的需求也日益增長。WebVTT 是一種技術(shù)，它作為一種字幕格式，可以輕松集成到現(xiàn)有的 Web API 中，從而解決了字幕內(nèi)容的問題。

本文將對此進行探討。當(dāng)然，WebVTT 在最基本層面上就是字幕，但可以通過多種方式來實現(xiàn)它，從而使視頻（以及字幕內(nèi)容本身）對用戶更易于訪問。

WebVTT 格式簡介

首先：WebVTT 是一種包含文本“WebVTT”和帶有時間戳的字幕行的文件類型。示例如下：

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

有點奇怪，但很有道理，對吧？正如你所看到的，第一行是“WEBVTT”，后面跟著第三行的時間范圍（在本例中為 0 到 3 秒）。時間范圍是必需的。否則，WebVTT 文件根本無法工作，甚至不會顯示或記錄錯誤以告知你。最后，時間范圍下方的每一行都代表包含在該范圍內(nèi)的字幕。

請注意，你可以在單個時間范圍內(nèi)包含多個字幕?？梢允褂眠B字符來指示一行的開始，但這并不是必需的，更多的是風(fēng)格問題。

時間范圍可以采用兩種格式之一：hh:mm:ss.tt 或 mm:ss.tt。每個部分都遵循某些規(guī)則：

• 小時 (hh)：至少兩位數(shù)
• 分鐘 (mm)：介于 00 和 59 之間（含）
• 秒 (ss)：介于 00 和 59 之間（含）
• 毫秒 (tt)：介于 000 和 999 之間（含）

起初這似乎相當(dāng)令人生畏。你可能想知道，誰能手工輸入和調(diào)整所有這些內(nèi)容。幸運的是，有一些工具可以簡化此過程。例如，YouTube 可以使用語音識別自動為你添加視頻字幕，還可以讓你將字幕下載為 VTT 文件！但這還不是全部。WebVTT 也可以與 YouTube 一起使用，方法是將你的 VTT 文件上傳到你的 YouTube 視頻中。

創(chuàng)建此文件后，我們就可以將其嵌入到 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>

該標(biāo)簽有點像與視頻一起“播放”的腳本。我們可以在同一個視頻元素中使用多個軌道。default 屬性表示該軌道將自動啟用。

順便說一下，讓我們來了解一下所有屬性：

• srclang 指示軌道的語言。
• kind 表示軌道的類型，共有五種：
  • 字幕通常是視頻不同部分的翻譯和描述。
  • 描述幫助視力障礙用戶理解視頻中發(fā)生的事情。
  • 字幕為聽力障礙用戶提供音頻的替代方案。
  • 元數(shù)據(jù)是由腳本使用的軌道，用戶看不到。
  • 章節(jié)有助于導(dǎo)航視頻內(nèi)容。
• label 是出現(xiàn)在字幕軌道中的文本軌道的標(biāo)題
• src 是軌道的源文件。除非指定了 crossorigin，否則它不能來自跨源。

雖然 WebVTT 專為視頻設(shè)計，但你仍然可以通過將音頻文件放在 <video></video> 元素中來將其與音頻一起使用。

深入探討 WebVTT 文件的結(jié)構(gòu)

MDN 提供了出色的文檔，并概述了 WebVTT 文件的主體結(jié)構(gòu)，該結(jié)構(gòu)最多包含六個組件。以下是 MDN 的分解：

• 可選的字節(jié)順序標(biāo)記 (BOM)
• 字符串“WEBVTT”
• WebVTT 右側(cè)的可選文本標(biāo)題。
  • WebVTT 后面必須至少有一個空格。
  • 你可以使用它向文件添加描述。
  • 你可以在文本標(biāo)題中使用除換行符或字符串“-->”之外的任何內(nèi)容。
• 空行，相當(dāng)于兩個連續(xù)的換行符。
• 零個或多個提示或注釋。
• 零個或多個空行。

注意：BOM 是一個 unicode 字符，它指示文本文件的 unicode 編碼。

粗體、斜體和下劃線——哦，我的天！

我們絕對可以在 WebVTT 文件中使用一些內(nèi)聯(lián) HTML 格式！這些都是每個人都熟悉的：、 和 。你使用它們的方式與在 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>

提示設(shè)置

提示設(shè)置 是用于控制字幕位置的可選文本字符串。它有點像在 CSS 中定位元素，例如能夠?qū)⒆帜环胖迷谝曨l上。

例如，我們可以將字幕放置在提示時間的右側(cè)，控制字幕是水平顯示還是垂直顯示，并定義字幕的對齊方式和垂直位置。

以下是我們可以使用的設(shè)置。

設(shè)置 1：行

line 控制字幕在 y 軸上的位置。如果指定了 vertical（我們將在后面討論），則 line 將改為指示字幕將在 x 軸上顯示的位置。

在指定 line 值時，整數(shù)和百分比都是完全可以接受的單位。在使用整數(shù)的情況下，每行的距離將等于第一行的高度（從水平角度來看）。因此，例如，假設(shè)字幕第一行的高度等于 50px，指定的 line 值為 2，字幕的方向為水平。這意味著字幕將從頂部向下定位 100px（50px 乘以 2），最多等于視頻邊界的坐標(biāo)。如果我們使用負(fù)整數(shù)，它將隨著值的減小而從底部向上移動（或者，如果指定了 vertical:lr，我們將從右到左移動，反之亦然）。在這里要小心，因為字幕可能會被放置在屏幕外，并且在不同瀏覽器中的定位不一致。能力越大，責(zé)任越大！

在百分比的情況下，值必須介于 0-100% 之間（含）（對不起，這里沒有 200% 的巨型值）。較高的值將使字幕從上到下移動，除非指定了 vertical:lr 或 vertical:rl，在這種情況下，字幕將相應(yīng)地在 x 軸上移動。

隨著值的增加，字幕將出現(xiàn)在視頻邊界下方。隨著值的減小（包括負(fù)值），字幕將出現(xiàn)在上方。

很難在沒有示例的情況下想象這一點，對吧？以下是這如何轉(zhuǎn)換為代碼：

<code>00:00:00.000 --> 00:00:03.000 line:50%
此字幕應(yīng)水平放置在屏幕的大致中心。</code>

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

<code>00:00:06.000 --> 00:00:09.000 vertical:rl line:-1
此字幕應(yīng)垂直放置在視頻的左側(cè)。</code>

<code>00:00:09.000 --> 00:00:12.000 line:0
字幕應(yīng)水平放置在屏幕頂部。</code>

設(shè)置 2：垂直

vertical 指示字幕將垂直顯示并沿 line 設(shè)置指定的方向移動。某些語言不是從左到右顯示，而是需要從上到下顯示。

<code>  00:00:00.000 --> 00:00:03.000 vertical:rl
此字幕應(yīng)垂直顯示。</code>

<code>00:00:00.000 --> 00:00:03.000 vertical:lr
此字幕應(yīng)垂直顯示。</code>

設(shè)置 3：位置

position 指定字幕將在 x 軸上顯示的位置。如果指定了 vertical，則 position 將改為指定字幕將在 y 軸上顯示的位置。它必須是介于 0% 和 100% 之間的整數(shù)（含）。

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

此時，你可能會注意到 line 和 position 與 CSS flexbox 屬性 align-items 和 justify-content 類似，而 vertical 與 flex-direction 非常相似。記住 WebVTT 方向的一個技巧是，line 指定與文本流垂直的位置，而 position 指定與文本流平行的位置。這就是為什么如果我們指定 vertical，line 會突然沿水平軸移動，而 position 會沿垂直軸移動的原因。

設(shè)置 4：大小

size 指定字幕的寬度。如果指定了 vertical，則它將改為設(shè)置字幕的高度。與其他設(shè)置一樣，它必須是介于 0% 和 100% 之間的整數(shù)（含）。

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

設(shè)置 5：對齊

align 指定文本將在水平方向上出現(xiàn)的位置。如果指定了 vertical，則它將改為控制垂直對齊。

我們擁有的值是：start、middle、end、left 和 right。如果沒有指定 vertical，則對齊方式正是它們聽起來的樣子。如果指定了 vertical，它們實際上將變?yōu)?top、middle（垂直）和 bottom。使用 start 和 end 而不是 left 和 right 分別是一種更靈活的方式，允許對齊基于 unicode-bidi CSS 屬性的純文本值。

請注意，align 不會受 vertical:lr 或 vertical:rl 的影響。

<code>WEBVTT

00:00:00.000 --> 00:00:03.000 align:start
此字幕將出現(xiàn)在屏幕左側(cè)。

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
此字幕將出現(xiàn)在屏幕左側(cè)。

00:00:12.000 --> 00:00:15.000 align:right
此字幕將出現(xiàn)在屏幕右側(cè)。</code>

WebVTT 注釋

WebVTT 注釋是僅在讀取文件源文本時可見的文本字符串，就像我們在 HTML、CSS、JavaScript 和任何其他語言中想到的注釋一樣。注釋可以包含換行符，但不能包含空行（本質(zhì)上是兩行換行符）。

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

解析和呈現(xiàn)字幕文件時，上面突出顯示的行將完全隱藏在用戶面前。注釋也可以是多行的。

有三個非常重要的字符/字符串需要注意，它們不能用于注釋：。作為替代，你可以使用轉(zhuǎn)義字符。

其他一些有趣的 WebVTT 功能

我們將快速了解一些非常巧妙的自定義和控制字幕的方法，但至少在撰寫本文時，這些方法缺乏一致的瀏覽器支持。

是的，我們可以設(shè)置字幕樣式！

實際上，WebVTT 字幕可以設(shè)置樣式。例如，要將字幕的背景設(shè)置為紅色，請在 ::cue 偽元素上設(shè)置 background 屬性：

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

還記得我們可以在 WebVTT 文件中使用一些內(nèi)聯(lián) HTML 格式嗎？好吧，我們也可以選擇它們。例如，選擇斜體 () 元素：

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

事實證明，WebVTT 文件支持樣式塊，這與 HTML 文件的方式非常相似：

<code>WEBVTT

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

也可以通過其提示標(biāo)識符訪問元素。請注意，提示標(biāo)識符使用與 HTML 相同的轉(zhuǎn)義機制。

<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
此提示標(biāo)識符將帶有下劃線！

cue identifier 3
00:00:04.000 --> 00:00:06.000
這個不會受到影響，就像第一個一樣！</code>

不同類型的標(biāo)簽

許多標(biāo)簽可用于設(shè)置字幕格式。有一個警告。這些標(biāo)簽不能用于 kind 屬性為 chapters 的元素中。以下是一些你可以使用的格式化標(biāo)簽。

class 標(biāo)簽

我們可以使用 class 標(biāo)簽在 WebVTT 標(biāo)記中定義類，可以使用 CSS 選擇這些類。假設(shè)我們有一個類 .yellowish，它使文本變?yōu)辄S色。我們可以在字幕中使用該標(biāo)簽。我們可以通過這種方式控制許多樣式，例如字體、字體顏色和背景顏色。

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

<code>WEBVTT

00:00:00.000 --> 00:00:03.000
此文本應(yīng)為黃色。此文本將為默認(rèn)顏色。

00:00:03.000 --> 00:00:06.000
此文本應(yīng)為紅色。此文本將為默認(rèn)顏色。</code>

時間戳標(biāo)簽

如果要使字幕出現(xiàn)在特定時間，則需要使用時間戳標(biāo)簽。它們就像將字幕微調(diào)到精確的時間點一樣。標(biāo)簽的時間必須在字幕的給定時間范圍內(nèi)，并且每個時間戳標(biāo)簽都必須晚于前一個。

<code>WEBVTT

00:00:00.000 --> 00:00:07.000
此文本將顯示超過 6 秒。</code>

voice 標(biāo)簽

voice 標(biāo)簽很簡潔，因為它們有助于識別誰在說話。

<code>WEBVTT

00:00:00.000 --> 00:00:03.000
鮑勃，你今天過得怎么樣？

00:00:03.000 --> 00:00:06.000
很好，你呢？</code>

ruby 標(biāo)簽

ruby 標(biāo)簽是一種在字幕上方顯示小的注釋字符的方法。

<code>WEBVTT

00:00:00.000 --> 00:00:05.000
<ruby>此字幕將有文字顯示在其上方<rt>此文字將顯示在字幕上方。</rt></ruby></code>

結(jié)論

關(guān)于 WebVTT 就介紹到這里！這是一種非常有用的技術(shù)，它為極大地提高網(wǎng)站的可訪問性提供了機會，特別是如果你正在使用視頻。嘗試自己編寫一些字幕，以便更好地了解它！

以上是通過Webvtt改善視頻可訪問性的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！