校园网站建设需要哪些百度网页游戏中心
一位客户最近要求我制作一个可访问的视频播放器，她非常想拥有的功能之一就是音频说明 。 音频描述适用于盲人或视力障碍的人，并提供其他语音信息来描述重要的视觉细节。
传统上，音频描述的视频必须专门制作，音频编码在单个视频文件的单独轨道中。 它需要相当专业的视频编辑设备来对这些音轨进行编码，这使大多数内容制作者的标准超出了实际水平。
我在网络上看到的所有音频描述内容都是这样。 例如， BBC iPlayer可以选择此类内容 ，但视频播放器无法控制相对音量，并且您无法关闭音频说明-您只能观看单独的描述或未描述的版本该程序。
输入HTML5
HTML5视频规范确实提供了audioTracks对象，这将使实现开/关按钮以及分别控制音频和视频音量成为可能。 但是实际上不存在对浏览器的支持-在撰写本文时，仅IE10支持此功能。
无论如何，我的客户想要的是音频描述在一个单独的文件中 ，可以将其添加到视频中而无需创建单独的版本，并且无需专业软件即可轻松制作。 当然，它必须在相当多的浏览器中工作。
因此，我的下一个想法是使用MediaController ，它是HTML5音频和视频的功能，允许您同步多个源。 但是，浏览器对此的支持也很少-在撰写本文时，仅Chrome支持此功能。
但您知道-即使没有这种支持，同时启动两个媒体文件显然也不是问题，只是保持它们同步 。 那么，我们可以使用现有的，广泛使用的功能来使它起作用吗？
影片活动
视频API提供了许多我们可以挂钩的事件，这将使音频播放与视频事件同步成为可能：
-
"play"事件（在播放视频时触发）。 -
"pause"事件（在视频暂停时触发）。 -
"ended"事件（在视频结束时触发）。 -
"timeupdate"事件（在视频播放期间不断触发）。
真正重要的是"timeupdate"事件。 它的发射频率没有指定，实践中也有相当大的变化-但作为一个大致的总体平均值，每秒达到3-5次，这足以满足我们的目的。
我已经看到过尝试相似的方法来同步两个视频文件 ，但这并不是特别成功，因为即使很小的差异也很明显。 但是音频描述通常不需要如此精确地同步-两种方式都可以延迟100ms -播放音频文件对于浏览器来说反而是要少得多的工作。
因此，我们需要做的就是利用我们拥有的视频事件，将音频和视频回放锁定在一起：
- 播放视频时，播放音频。
- 视频暂停时，暂停音频。
- 视频结束后，请同时暂停视频和音频。
- 时间更新时，如果音频时间不同，则将其设置为与视频时间匹配。
经过一些实验，我发现通过比较整秒的时间可以获得最佳结果，如下所示：
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收听，录制和转换这就是我的声音。 但是，我认为它确实证明了这种方法的技术进入门槛低。 我不必编辑视频，而且我可以使用免费软件在一个小时内制作音频。
作为概念验证，我想说它非常成功-我相信我的客户一定会很满意！
From: https://www.sitepoint.com/accessible-audio-descriptions-for-html5-video/