目录
最近一位客户要求我制作一个无障碍视频播放器,她非常希望其中一个功能是音频描述。音频描述面向盲人或视力障碍者,提供额外的语音信息来描述重要的视觉细节。传统上,带有音频描述的视频必须专门制作,音频编码在单个视频文件的单独音轨中。这需要相当专业的视频编辑设备来编码这些音频轨道,这使得大多数内容创作者难以实现。我在网上看到的所有带有音频描述的内容都是这样的。例如,BBC iPlayer 提供了一些此类内容,但视频播放器无法控制相对音量,也无法关闭音频描述——您只能观看节目的单独描述版本或非描述版本。HTML5 的登场
HTML5 视频规范确实提供了 audioTracks 对象,这使得实现开关按钮并分别控制音频和视频音量成为可能。但它的浏览器支持几乎不存在——在撰写本文时,只有 IE10 支持此功能。无论如何,我的客户想要的是一个单独文件中的音频描述,可以将其添加到视频中,而无需创建单独的版本,并且无需使用专用软件即可轻松制作。当然,它必须在相当多的浏览器中运行。所以我的下一个想法是使用 MediaController,这是 HTML5 音频和视频的一项功能,允许您同步多个来源。但是,对它的浏览器支持同样很少——在撰写本文时,只有 Chrome 支持此功能。但是您知道——即使没有这种支持,同时启动两个媒体文件显然也不是问题,只是需要保持同步。那么,我们能否使用现有的、广泛实现的功能来实现这一点呢?视频事件
当然,这只是一个简单的概念验证演示——没有初始功能检测,它只具有本机“controls”属性提供的基本控件。对于正确的实现,它需要自定义控件,以提供(除其他外)一个开关音频的按钮和单独的音量滑块。界面也应该可以通过键盘访问,这在某些浏览器的本机控件中并非如此。它还需要正确处理缓冲——实际上,如果您搜索到视频已预加载的点之后,音频将继续自由播放,直到视频加载足够多以将其重新同步为止。我还想提一下,描述本身几乎达不到专业标准!那是您可以听到我的声音,使用 Audacity 录制和转换。但就是这样,我认为它有效地演示了这种方法的技术门槛有多低。我不必编辑视频,而且我用免费软件在一小时内制作了音频。作为一个概念证明,我认为它非常成功——我相信我的客户会非常满意!关于 HTML5 视频的可访问音频描述的常见问题解答 (FAQ)
HTML5 视频中可访问音频描述的重要性是什么?
如何在我的 HTML5 视频中添加音频描述?
为什么我的 HTML5 视频无法播放?
HTML5 视频支持哪些常用格式?
如何修复“找不到 HTML5 视频文件”错误?
如何使我的 HTML5 视频具有响应性?
我可以向我的 HTML5 视频添加字幕或旁白吗?
如何控制我的 HTML5 视频的播放?
我可以在我的网站上嵌入 HTML5 视频吗?
使用 HTML5 进行视频播放的好处是什么?
首页 web前端 js教程 HTML5视频的可访问音频说明

HTML5视频的可访问音频说明

Feb 23, 2025 am 08:48 AM

Accessible Audio Descriptions for HTML5 Video

要点总结

  • 传统的视障人士辅助音频描述需要专业的视频编辑设备进行编码,将其嵌入视频文件的单独音轨中。对大多数内容创作者来说,这个过程通常不切实际。
  • 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中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

<🎜>:泡泡胶模拟器无穷大 - 如何获取和使用皇家钥匙
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系统,解释
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora:巫婆树的耳语 - 如何解锁抓钩
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

热门话题

Java教程
1666
14
CakePHP 教程
1426
52
Laravel 教程
1328
25
PHP教程
1273
29
C# 教程
1255
24
JavaScript引擎:比较实施 JavaScript引擎:比较实施 Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和执行JavaScript代码时,效果会有所不同,因为每个引擎的实现原理和优化策略各有差异。1.词法分析:将源码转换为词法单元。2.语法分析:生成抽象语法树。3.优化和编译:通过JIT编译器生成机器码。4.执行:运行机器码。V8引擎通过即时编译和隐藏类优化,SpiderMonkey使用类型推断系统,导致在相同代码上的性能表现不同。

Python vs. JavaScript:学习曲线和易用性 Python vs. JavaScript:学习曲线和易用性 Apr 16, 2025 am 12:12 AM

Python更适合初学者,学习曲线平缓,语法简洁;JavaScript适合前端开发,学习曲线较陡,语法灵活。1.Python语法直观,适用于数据科学和后端开发。2.JavaScript灵活,广泛用于前端和服务器端编程。

从C/C到JavaScript:所有工作方式 从C/C到JavaScript:所有工作方式 Apr 14, 2025 am 12:05 AM

从C/C 转向JavaScript需要适应动态类型、垃圾回收和异步编程等特点。1)C/C 是静态类型语言,需手动管理内存,而JavaScript是动态类型,垃圾回收自动处理。2)C/C 需编译成机器码,JavaScript则为解释型语言。3)JavaScript引入闭包、原型链和Promise等概念,增强了灵活性和异步编程能力。

JavaScript和Web:核心功能和用例 JavaScript和Web:核心功能和用例 Apr 18, 2025 am 12:19 AM

JavaScript在Web开发中的主要用途包括客户端交互、表单验证和异步通信。1)通过DOM操作实现动态内容更新和用户交互;2)在用户提交数据前进行客户端验证,提高用户体验;3)通过AJAX技术实现与服务器的无刷新通信。

JavaScript在行动中:现实世界中的示例和项目 JavaScript在行动中:现实世界中的示例和项目 Apr 19, 2025 am 12:13 AM

JavaScript在现实世界中的应用包括前端和后端开发。1)通过构建TODO列表应用展示前端应用,涉及DOM操作和事件处理。2)通过Node.js和Express构建RESTfulAPI展示后端应用。

了解JavaScript引擎:实施详细信息 了解JavaScript引擎:实施详细信息 Apr 17, 2025 am 12:05 AM

理解JavaScript引擎内部工作原理对开发者重要,因为它能帮助编写更高效的代码并理解性能瓶颈和优化策略。1)引擎的工作流程包括解析、编译和执行三个阶段;2)执行过程中,引擎会进行动态优化,如内联缓存和隐藏类;3)最佳实践包括避免全局变量、优化循环、使用const和let,以及避免过度使用闭包。

Python vs. JavaScript:社区,图书馆和资源 Python vs. JavaScript:社区,图书馆和资源 Apr 15, 2025 am 12:16 AM

Python和JavaScript在社区、库和资源方面的对比各有优劣。1)Python社区友好,适合初学者,但前端开发资源不如JavaScript丰富。2)Python在数据科学和机器学习库方面强大,JavaScript则在前端开发库和框架上更胜一筹。3)两者的学习资源都丰富,但Python适合从官方文档开始,JavaScript则以MDNWebDocs为佳。选择应基于项目需求和个人兴趣。

Python vs. JavaScript:开发环境和工具 Python vs. JavaScript:开发环境和工具 Apr 26, 2025 am 12:09 AM

Python和JavaScript在开发环境上的选择都很重要。1)Python的开发环境包括PyCharm、JupyterNotebook和Anaconda,适合数据科学和快速原型开发。2)JavaScript的开发环境包括Node.js、VSCode和Webpack,适用于前端和后端开发。根据项目需求选择合适的工具可以提高开发效率和项目成功率。

See all articles