“網(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)容的問題。

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

WebVTT 格式簡介

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

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

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

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

時(shí)間範(fàn)圍可以採用兩種格式之一：hh:mm:ss.tt 或mm:ss.tt。每個(gè)部分都遵循某些規(guī)則：

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

起初這似乎相當(dāng)令人生畏。你可能想知道，誰能手工輸入和調(diào)整所有這些內(nèi)容。幸運(yùn)的是，有一些工具可以簡化此過程。例如，YouTube 可以使用語音識(shí)別自動(dòng)為你添加視頻字幕，還可以讓你將字幕下載為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)籤有點(diǎn)像與視頻一起“播放”的腳本。我們可以在同一個(gè)視頻元素中使用多個(gè)軌道。 default 屬性表示該軌道將自動(dòng)啟用。

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

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

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

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

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

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

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

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

我們絕對(duì)可以在WebVTT 文件中使用一些內(nèi)聯(lián)HTML 格式！這些都是每個(gè)人都熟悉的： 、和。你使用它們的方式與在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è)置是用於控製字幕位置的可選文本字符串。它有點(diǎn)像在CSS 中定位元素，例如能夠?qū)⒆帜环胖迷谝曨l上。

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

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

設(shè)置1：行

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

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

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

隨著值的增加，字幕將出現(xiàn)在視頻邊界下方。隨著值的減?。òㄘ?fù)值），字幕將出現(xiàn)在上方。

很難在沒有示例的情況下想像這一點(diǎn)，對(duì)吧？以下是這如何轉(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è)置指定的方向移動(dòng)。某些語言不是從左到右顯示，而是需要從上到下顯示。

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

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

設(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%此字幕將水平填充整個(gè)屏幕。</code>

設(shè)置5：對(duì)齊

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

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

請(qǐng)注意，align 不會(huì)受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 註釋是僅在讀取文件源文本時(shí)可見的文本字符串，就像我們?cè)贖TML、CSS、JavaScript 和任何其他語言中想到的註釋一樣。註釋可以包含換行符，但不能包含空行（本質(zhì)上是兩行換行符）。

 <code>WEBVTT 00:00:00.000 --> 00:00:03.000 - [鳥鳴聲] - 真美好的一天！ NOTE 這是一個(gè)注釋。觀看字幕的任何人都不會(huì)看到它。 00:00:04.000 --> 00:00:07.000 - [溪流潺潺] - 的確如此！ 00:00:08.000 --> 00:00:10.000 - 你好！</code>

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

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

其他一些有趣的WebVTT 功能

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

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

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

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

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

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

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

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

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

 <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)識(shí)符將帶有下劃線！ cue identifier 3 00:00:04.000 --> 00:00:06.000這個(gè)不會(huì)受到影響，就像第一個(gè)一樣！</code>

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

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

class 標(biāo)籤

我們可以使用class 標(biāo)籤在WebVTT 標(biāo)記中定義類，可以使用CSS 選擇這些類。假設(shè)我們有一個(gè)類.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>

時(shí)間戳標(biāo)籤

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

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

voice 標(biāo)籤

voice 標(biāo)籤很簡潔，因?yàn)樗鼈冇兄蹲R(shí)別誰在說話。

 <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</code>此字幕將有文字顯示在其上方<rt>此文字將顯示在字幕上方。</rt>

結(jié)論

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

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