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 毫秒的延迟都是可以接受的——而且播放音频文件对浏览器的负担要小得多。因此，我们只需要使用现有的视频事件来将音频和视频播放锁定在一起：

• 视频播放时，播放音频。
• 视频暂停时，暂停音频。
• 视频结束时，同时暂停视频和音频。
• 时间更新时，如果音频时间与视频时间不同，则将音频时间设置为与视频时间匹配。

经过一番试验，我发现通过比较以秒为单位的时间可以获得最佳效果，如下所示：

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

这看起来违反直觉，起初我以为我们需要尽可能精确的数据，但事实似乎并非如此。通过使用视频音轨的文字音频副本（即音频和视频都产生相同的声音）进行测试，很容易听到同步效果好坏。根据这个基础进行实验，我发现四舍五入数字比不四舍五入得到更好的同步效果。因此，这是最终脚本。如果浏览器支持 MediaController，我们只需使用它，否则我们将实现手动同步，如下所述：

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 本身仅通过脚本定义，而可以使用静态“mediagroup”属性定义控制器：

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

如果我们这样做，那么它将在 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中文网其他相关文章！