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

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

本文將對此進行探討。當然，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字符來指示一行的開始，但這並不是必需的，更多的是風格問題。

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

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

起初這似乎相當令人生畏。你可能想知道，誰能手工輸入和調(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>

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

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

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

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

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

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

• 可選的字節(jié)順序標記(BOM)
• 字符串“WEBVTT”
• WebVTT 右側(cè)的可選文本標題。
  • WebVTT 後面必須至少有一個空格。
  • 你可以使用它向文件添加描述。
  • 你可以在文本標題中使用除換行符或字符串“-->”之外的任何內(nèi)容。
• 空行，相當於兩個連續(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>

提示設置

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

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

以下是我們可以使用的設置。

設置1：行

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

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

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

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

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

 <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此字幕應垂直放置在視頻的左側(cè)。</code>

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

設置2：垂直

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

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

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

設置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 會沿垂直軸移動的原因。

設置4：大小

size 指定字幕的寬度。如果指定了vertical，則它將改為設置字幕的高度。與其他設置一樣，它必須是介於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>

設置5：對齊

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

我們擁有的值是：start、middle、end、left 和right。如果沒有指定vertical，則對齊方式正是它們聽起來的樣子。如果指定了vertical，它們實際上將變?yōu)閠op、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 功能

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

是的，我們可以設置字幕樣式！

實際上，WebVTT 字幕可以設置樣式。例如，要將字幕的背景設置為紅色，請在::cue 偽元素上設置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>

也可以通過其提示標識符訪問元素。請注意，提示標識符使用與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此提示標識符將帶有下劃線！ cue identifier 3 00:00:04.000 --> 00:00:06.000這個不會受到影響，就像第一個一樣！</code>

不同類型的標籤

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

class 標籤

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

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

時間戳標籤

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

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

voice 標籤

voice 標籤很簡潔，因為它們有助於識別誰在說話。

 <code>WEBVTT 00:00:00.000 --> 00:00:03.000鮑勃，你今天過得怎么樣？ 00:00:03.000 --> 00:00:06.000很好，你呢？</code>

ruby 標籤

ruby 標籤是一種在字幕上方顯示小的註釋字符的方法。

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

結(jié)論

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

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