通過Webvtt改善視頻可訪問性

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

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

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

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 文件根本無法工作，甚至不會顯示或記錄錯誤以告知你。最後，時間範圍下方的每一行都代表包含在該範圍內的字幕。

請注意，你可以在單個時間範圍內包含多個字幕。可以使用連字符來指示一行的開始，但這並不是必需的，更多的是風格問題。

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

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

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

創建此文件後，我們就可以將其嵌入到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 表示軌道的類型，共有五種：
  • 字幕通常是視頻不同部分的翻譯和描述。
  • 描述幫助視力障礙用戶理解視頻中發生的事情。
  • 字幕為聽力障礙用戶提供音頻的替代方案。
  • 元數據是由腳本使用的軌道，用戶看不到。
  • 章節有助於導航視頻內容。
• label 是出現在字幕軌道中的文本軌道的標題
• src 是軌道的源文件。除非指定了crossorigin，否則它不能來自跨源。

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

深入探討WebVTT 文件的結構

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

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

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

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

我們絕對可以在WebVTT 文件中使用一些內聯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 中定位元素，例如能夠將字幕放置在視頻上。

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

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

設置1：行

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

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

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

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

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

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

設置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% 之間的整數（含）。

 <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% 之間的整數（含）。

 <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 指定文本將在水平方向上出現的位置。如果指定了vertical，則它將改為控制垂直對齊。

我們擁有的值是：start、middle、end、left 和right。如果沒有指定vertical，則對齊方式正是它們聽起來的樣子。如果指定了vertical，它們實際上將變為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此字幕将出现在屏幕左侧。 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>

WebVTT 註釋

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

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

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

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

其他一些有趣的WebVTT 功能

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

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

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

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

還記得我們可以在WebVTT 文件中使用一些內聯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 相同的轉義機制。

 <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，它使文本變為黃色。我們可以在字幕中使用該標籤。我們可以通過這種方式控制許多樣式，例如字體、字體顏色和背景顏色。

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

時間戳標籤

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

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

結論

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

以上是通過Webvtt改善視頻可訪問性的詳細內容。更多資訊請關注PHP中文網其他相關文章！