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

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

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

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

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

• “播放”事件（視頻播放時(shí)觸發(fā)）。
• “暫停”事件（視頻暫停時(shí)觸發(fā)）。
• “結(jié)束”事件（視頻結(jié)束時(shí)觸發(fā)）。
• “timeupdate”事件（視頻播放時(shí)持續(xù)觸發(fā)）。

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

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

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

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

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

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

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

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

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

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

HTML5 視頻中可訪問(wèn)音頻描述的重要性是什麼？

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

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

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

為什麼我的 HTML5 視頻無(wú)法播放？

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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