要點(diǎn)總結(jié)

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

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

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

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

• “播放”事件（視頻播放時觸發(fā)）。
• “暫?！笔录ㄒ曨l暫停時觸發(fā)）。
• “結(jié)束”事件（視頻結(jié)束時觸發(fā)）。
• “timeupdate”事件（視頻播放時持續(xù)觸發(fā)）。

“timeupdate”事件非常關(guān)鍵。它觸發(fā)的頻率沒有指定，實(shí)際上差異很大——但作為一個粗略的整體平均值，它相當(dāng)於每秒 3-5 次，這足以滿足我們的目的。我見過類似的方法來嘗試同步兩個視頻文件，但這並不特別成功，因?yàn)榧词故呛苄〉牟町愐埠苊黠@。但是音頻描述通常不需要如此精確地同步——無論哪種方式，100 毫秒的延遲都是可以接受的——而且播放音頻文件對瀏覽器的負(fù)擔(dān)要小得多。因此，我們只需要使用現(xiàn)有的視頻事件來將音頻和視頻播放鎖定在一起：

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

經(jīng)過一番試驗(yàn)，我發(fā)現(xiàn)通過比較以秒為單位的時間可以獲得最佳效果，如下所示：

if(Math.ceil(audio.currentTime) != Math.ceil(video.currentTime)) {
  audio.currentTime = video.currentTime;
}

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

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

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

<video mediagroup="foo"></video> ... <audio mediagroup="foo"> ... </audio>

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

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

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

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

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

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

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

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

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

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

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

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

如何使我的 HTML5 視頻具有響應(yīng)性？

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

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

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

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

HTML5 提供了幾種內(nèi)置的視頻播放控件，包括播放、暫停、音量和全屏?？梢酝ㄟ^向 <video></video> 元素添加 controls 屬性來啟用這些控件。此外，您可以使用 JavaScript 創(chuàng)建自定義控件和交互。

我可以在我的網(wǎng)站上嵌入 HTML5 視頻嗎？

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

使用 HTML5 進(jìn)行視頻播放的好處是什麼？

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

以上是HTML5視頻的可訪問音頻說明的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！