HTML5視頻的可訪問音頻說明

要點總結

• 傳統的視障人士輔助音頻描述需要專業的視頻編輯設備進行編碼，將其嵌入視頻文件的單獨音軌中。對大多數內容創作者來說，這個過程通常不切實際。
• HTML5 視頻規範提供了 audioTracks 對象，理論上允許為音頻描述實現開關按鈕，並分別控制音頻和視頻音量。但是，目前瀏覽器對該功能的支持有限。
• 另一種解決方案是使用 MediaController，這是 HTML5 音頻和視頻的一項功能，允許同步多個來源。此功能目前在瀏覽器支持方面也受到限制，但可以使用現有的、廣泛實現的功能同時啟動兩個媒體文件並保持同步。
• 視頻 API 提供了諸如“播放”、“暫停”、“結束”和“timeupdate”之類的事件，可用於將音頻播放與視頻事件同步。 “timeupdate”事件對於此目的尤為重要，平均每秒觸發 3-5 次。這種方法允許創建可訪問的音頻描述，而無需專門的軟件或視頻的單獨版本。

最近一位客戶要求我製作一個無障礙視頻播放器，她非常希望其中一個功能是音頻描述。音頻描述面向盲人或視力障礙者，提供額外的語音信息來描述重要的視覺細節。傳統上，帶有音頻描述的視頻必須專門製作，音頻編碼在單個視頻文件的單獨音軌中。這需要相當專業的視頻編輯設備來編碼這些音頻軌道，這使得大多數內容創作者難以實現。我在網上看到的所有帶有音頻描述的內容都是這樣的。例如，BBC iPlayer 提供了一些此類內容，但視頻播放器無法控制相對音量，也無法關閉音頻描述——您只能觀看節目的單獨描述版本或非描述版本。 HTML5 的登場

HTML5 視頻規範確實提供了 audioTracks 對象，這使得實現開關按鈕並分別控制音頻和視頻音量成為可能。但它的瀏覽器支持幾乎不存在——在撰寫本文時，只有 IE10 支持此功能。無論如何，我的客戶想要的是一個單獨文件中的音頻描述，可以將其添加到視頻中，而無需創建單獨的版本，並且無需使用專用軟件即可輕鬆製作。當然，它必須在相當多的瀏覽器中運行。所以我的下一個想法是使用 MediaController，這是 HTML5 音頻和視頻的一項功能，允許您同步多個來源。但是，對它的瀏覽器支持同樣很少——在撰寫本文時，只有 Chrome 支持此功能。但是您知道——即使沒有這種支持，同時啟動兩個媒體文件顯然也不是問題，只是需要保持同步。那麼，我們能否使用現有的、廣泛實現的功能來實現這一點呢？視頻事件

視頻 API 提供了許多我們可以掛鉤的事件，這些事件應該可以使音頻播放與視頻事件同步：

• “播放”事件（視頻播放時觸發）。
• “暫停”事件（視頻暫停時觸發）。
• “結束”事件（視頻結束時觸發）。
• “timeupdate”事件（視頻播放時持續觸發）。

“timeupdate”事件非常關鍵。它觸發的頻率沒有指定，實際上差異很大——但作為一個粗略的整體平均值，它相當於每秒 3-5 次，這足以滿足我們的目的。我見過類似的方法來嘗試同步兩個視頻文件，但這並不特別成功，因為即使是很小的差異也很明顯。但是音頻描述通常不需要如此精確地同步——無論哪種方式，100 毫秒的延遲都是可以接受的——而且播放音頻文件對瀏覽器的負擔要小得多。因此，我們只需要使用現有的視頻事件來將音頻和視頻播放鎖定在一起：

• 視頻播放時，播放音頻。
• 視頻暫停時，暫停音頻。
• 視頻結束時，同時暫停視頻和音頻。
• 時間更新時，如果音頻時間與視頻時間不同，則將音頻時間設置為與視頻時間匹配。

經過一番試驗，我發現通過比較以秒為單位的時間可以獲得最佳效果，如下所示：

<code class="language-javascript">if(Math.ceil(audio.currentTime) != Math.ceil(video.currentTime)) {
  audio.currentTime = video.currentTime;
}</code>

這看起來違反直覺，起初我以為我們需要盡可能精確的數據，但事實似乎並非如此。通過使用視頻音軌的文字音頻副本（即音頻和視頻都產生相同的聲音）進行測試，很容易聽到同步效果好壞。根據這個基礎進行實驗，我發現四捨五入數字比不四捨五入得到更好的同步效果。因此，這是最終腳本。如果瀏覽器支持 MediaController，我們只需使用它，否則我們將實現手動同步，如下所述：

<code class="language-javascript">var video = document.getElementById('video');
var audio = document.getElementById('audio');

if(typeof(window.MediaController) === 'function') {
  var controller = new MediaController();
  video.controller = controller;
  audio.controller = controller;
} else {
  controller = null;
}

video.volume = 0.8;
audio.volume = 1;

video.addEventListener('play', function() {
  if(!controller && audio.paused) {
    audio.play();
  }
}, false);

video.addEventListener('pause', function() {
  if(!controller && !audio.paused) {
    audio.pause();
  }
}, false);

video.addEventListener('ended', function() {
  if(controller) {
    controller.pause();
  } else {
    video.pause();
    audio.pause();
  }
}, false);

video.addEventListener('timeupdate', function() {
  if(!controller && audio.readyState >= 4) {
    if(Math.ceil(audio.currentTime) != Math.ceil(video.currentTime)) {
      audio.currentTime = video.currentTime;
    }
  }
}, false);</code>

請注意，MediaController 本身僅通過腳本定義，而可以使用靜態“mediagroup”屬性定義控制器：

<code class="language-html"><video mediagroup="foo"></video> ... <audio mediagroup="foo"> ... </audio></code>

如果我們這樣做，那麼它將在 Chrome 中無需 JavaScript 即可工作。它將同步媒體源，但用戶無法控制音頻（包括無法將其關閉），因為瀏覽器不知道音頻代表什麼。在這種情況下，最好將音頻編碼到視頻中，因為然後它可以出現在 audioTracks 對像中，瀏覽器可以識別它並能夠提供本機控件。但是由於我們沒有 audioTracks 數據，所以這是一個無關緊要的問題！因此，如果腳本不可用，音頻將根本無法播放。這是最終演示，它可以在任何最新版本的 Opera、Firefox、Chrome、Safari 或 IE9 或更高版本中運行：- 音頻描述演示

當然，這只是一個簡單的概念驗證演示——沒有初始功能檢測，它只具有本機“controls”屬性提供的基本控件。對於正確的實現，它需要自定義控件，以提供（除其他外）一個開關音頻的按鈕和單獨的音量滑塊。界面也應該可以通過鍵盤訪問，這在某些瀏覽器的本機控件中並非如此。它還需要正確處理緩衝——實際上，如果您搜索到視頻已預加載的點之後，音頻將繼續自由播放，直到視頻加載足夠多以將其重新同步為止。我還想提一下，描述本身幾乎達不到專業標準！那是您可以聽到我的聲音，使用 Audacity 錄製和轉換。但就是這樣，我認為它有效地演示了這種方法的技術門檻有多低。我不必編輯視頻，而且我用免費軟件在一小時內製作了音頻。作為一個概念證明，我認為它非常成功——我相信我的客戶會非常滿意！關於 HTML5 視頻的可訪問音頻描述的常見問題解答 (FAQ)

HTML5 視頻中可訪問音頻描述的重要性是什麼？

可訪問音頻描述在使 HTML5 視頻更具包容性和用戶友好性方面發揮著至關重要的作用。它們提供了視覺信息的聽覺等效項，這對視力障礙用戶尤其有益。這些描述敘述了主要音軌無法理解的重要視覺細節。通過加入可訪問的音頻描述，內容創作者可以確保他們的視頻能夠被更廣泛的受眾訪問，從而促進數字包容性。

如何在我的 HTML5 視頻中添加音頻描述？

將音頻描述添加到 HTML5 視頻包括幾個步驟。首先，您需要創建一個單獨的音頻軌道來描述視頻的視覺元素。這可以使用各種音頻編輯軟件來完成。一旦音頻描述軌道準備就緒，您可以使用帶有設置為“descriptions”的 kind 屬性的 元素將其添加到您的 HTML5 視頻中。這將確保音頻描述軌道被識別並與視頻一起播放。

為什麼我的 HTML5 視頻無法播放？

您的 HTML5 視頻無法播放可能有幾個原因。這可能是由於視頻文件本身的問題，例如未正確編碼。這也可能是由於 Web 瀏覽器或視頻播放器不支持視頻格式的問題。要進行故障排除，請嘗試在不同的瀏覽器或不同的設備上播放視頻。如果問題仍然存在，您可能需要檢查視頻文件並確保其格式受 HTML5 支持。

HTML5 視頻支持哪些常用格式？

HTML5 視頻支持幾種常見的視頻格式，包括 MP4、WebM 和 Ogg。 MP4 格式在所有主要瀏覽器和設備中都得到廣泛支持，使其成為網絡視頻的熱門選擇。 WebM 和 Ogg 是開源格式，也得到廣泛支持，儘管它們可能並非在所有瀏覽器中都能正常工作。

如何修復“找不到 HTML5 視頻文件”錯誤？

“找不到 HTML5 視頻文件”錯誤通常發生在瀏覽器找不到 <video></video> 元素的 source 屬性中指定的視頻文件時。要修復此錯誤，請確保 source 屬性中的文件路徑正確，並且視頻文件位於指定的路徑中。如果文件路徑正確，請檢查視頻文件是否採用 HTML5 和瀏覽器支持的格式。

如何使我的 HTML5 視頻具有響應性？

要使您的 HTML5 視頻具有響應性，您可以使用 CSS 將視頻的寬度設置為 100%，高度設置為 auto。這將確保視頻按比例放大或縮小以適應其容器的寬度，使其能夠響應不同的屏幕尺寸。

我可以向我的 HTML5 視頻添加字幕或旁白嗎？

是的，您可以使用帶有設置為“captions”或“subtitles”的 kind 屬性的 元素向您的 HTML5 視頻添加字幕或旁白。您需要創建一個包含字幕或旁白的 WebVTT 文件，然後在 元素的 src 屬性中引用此文件。

如何控制我的 HTML5 視頻的播放？

HTML5 提供了幾種內置的視頻播放控件，包括播放、暫停、音量和全屏。可以通過向 <video></video> 元素添加 controls 屬性來啟用這些控件。此外，您可以使用 JavaScript 創建自定義控件和交互。

我可以在我的網站上嵌入 HTML5 視頻嗎？

是的，您可以使用 <video></video> 元素在您的網站上嵌入 HTML5 視頻。您需要使用 src 屬性指定視頻文件的來源，還可以添加可選屬性（如 controls、autoplay 和 loop）來自定義視頻播放。

使用 HTML5 進行視頻播放的好處是什麼？

HTML5 為視頻播放提供了許多好處。它支持多種視頻格式，提供內置的視頻播放控件，並允許添加諸如字幕和音頻描述之類的輔助功能。此外，HTML5 視頻可以具有響應性，確保它們在所有設備和屏幕尺寸上看起來都很好。最後，由於 HTML5 是 Web 標準，因此所有現代 Web 瀏覽器都支持它，無需額外的插件或軟件。

以上是HTML5視頻的可訪問音頻說明的詳細內容。更多資訊請關注PHP中文網其他相關文章！