先决条件:	基本的计算机素养，对HTML，CSS和JavaScript的基本了解，了解什么是辅助功能。
目的:	了解多媒体背后的辅助功能问题，以及如何克服这些问题。

多媒体和辅助功能

到目前为止，在这个模块中，我们已经查看了各种内容以及需要做什么以确保其可访问性，从简单的文本内容到数据表，图像，原生控件(如表单元素和按钮)，甚至更复杂的标记结构 (使用 WAI-ARIA 属性)。

这篇文章另一方面看另一个一般类的内容，可以说不容易确保 - 多媒体的可访问性。 图片，视频， JavaScript)。例如，它可以用于绘制图形，制作照片组合，甚至执行动画。您可以(并且应该)在画布块中提供替代内容。该内容将在不支持的旧版浏览器 画布和禁用JavaScript的浏览器"> < canvas> 元素，Flash电影等不容易被屏幕阅读器理解或通过键盘导航， 给他们一个帮手。

但不要绝望 - 这里我们将帮助您浏览可用于使多媒体更容易访问的技术。

简单的图像

我们已在 HTML:良好的无障碍基础文章中介绍了HTML图片的简单文字替代方法，您可以参考此处的完整详细信息。 简而言之，您应该确保在可能的情况下，可视内容具有可供屏幕阅读器拾取和阅读其他用户的替代文字。

例如:

<img src="dinosaur.png"
     >

可访问的音频和视频控制

实现基于Web的音频/视频控制不应该是一个问题，对吧？ 让我们调查。

原生HTML5控件的问题

HTML5视频和音频实例甚至带有一组内置的控件，允许您直接控制媒体直接开箱。 例如(请参阅 native-controls.html ="external">源代码和 live a>):

<audio controls>
  <source src="viper.mp3" type="audio/mp3">
  <source src="viper.ogg" type="audio/ogg">
  <p>Your browser doesn't support HTML5 audio. Here is a <a href="viper.mp3">link to the audio</a> instead.</p>
</audio>

<br>

<video controls>
  <source src="rabbit320.mp4" type="video/mp4">
  <source src="rabbit320.webm" type="video/webm">
  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
</video>

controls属性提供播放/暂停按钮，搜索栏等 - 您希望从媒体播放器的基本控制。 在Firefox和Chrome中看起来像:

alt ="">

alt ="">

但是，这些控件存在问题:

• They are not keyboard accessible, in any browser except for Opera
• Different browsers give the native controls differing styling and functionality, and they aren't stylable, meaning that they can't be easily made to follow a site style guide.

为了解决这个问题，我们可以创建自己的自定义控件。 让我们来看看如何。

创建自定义音频和视频控件

HTML5视频和音频共享一个API - HTML媒体元素 - 它允许您将自定义功能映射到按钮和其他控件 - 两者都是您自己定义的。

让我们从上面的视频示例，并添加自定义控件到他们。

Basic setup

首先，请获取我们的 custom- controls-start.html ， custom -controls.css ， rabbit320.mp4 / a>和 rabbit320.webm 文件 并将它们保存在硬盘驱动器上的新目录中。

创建一个名为main.js的新文件，并将其保存在同一目录中。

首先，让我们看看HTML中的视频播放器的HTML:

<section class="player">
  <video controls>
    <source src="rabbit320.mp4" type="video/mp4">
    <source src="rabbit320.webm" type="video/webm">
    <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
  </video>

  <div class="controls">
    <button class="playpause">Play</button>
    <button class="stop">Stop</button>
    <button class="rwd">Rwd</button>
    <button class="fwd">Fwd</button>
    <div class="time">00:00</div>
  </div>
</section>

JavaScript basic setup

我们在视频下方插入了一些简单的控制按钮。 这些控制当然不会做任何事情默认; 添加功能，我们将使用JavaScript。

我们首先需要存储对每个控件的引用 - 将以下内容添加到JavaScript文件的顶部:

var playPauseBtn = document.querySelector('.playpause');
var stopBtn = document.querySelector('.stop');
var rwdBtn = document.querySelector('.rwd');
var fwdBtn = document.querySelector('.fwd');
var timeLabel = document.querySelector('.time');

接下来，我们需要获取对视频/音频播放器本身的引用 - 在以前的行下面添加此行:

var player = document.querySelector('video');

它保存了对 HTMLVideoElement和HTMLAudioElement元素都继承此接口。"> HTMLMediaElement 对象，它有几个有用的属性和方法可以在其上 用于将功能连接到我们的按钮。

在开始创建我们的按钮功能之前，让我们删除原生控件，以免它们妨碍我们的自定义控件。 再次在JavaScript的底部添加以下内容:

player.removeAttribute('controls');

这样做这种方式，而不仅仅是不包括controls属性在第一位有优点，如果我们的JavaScript失败，任何原因，用户仍然有一些控件可用。

Wiring up our buttons

首先，让我们设置播放/暂停按钮。 我们可以得到这个在一个简单的条件函数之间切换播放和暂停，如下所示。 将它添加到您的代码，在底部:

playPauseBtn.onclick = function() {
  if(player.paused) {
    player.play();
    playPauseBtn.textContent = 'Pause';
  } else {
    player.pause();
    playPauseBtn.textContent = 'Play';
  }
};

接下来，将此代码添加到底部，它控制停止按钮:

stopBtn.onclick = function() {
  player.pause();
  player.currentTime = 0;
  playPauseBtn.textContent = 'Play';
};

stop()函数HTMLMediaElement接口添加 HTMLElement支持与音频和视频通用的基本媒体相关功能所需的属性和方法。HTMLVideoElement和HTMLAudioElement元素均继承此接口"> HTMLMediaElement ， 我们 pause()，并同时将 currentTime 设置为0。

接下来，我们的快退和快进按钮 - 添加以下块到代码的底部:

rwdBtn.onclick = function() {
  player.currentTime -= 3;
};

fwdBtn.onclick = function() {
  player.currentTime += 3;
  if(player.currentTime >= player.duration || player.paused) {
    player.pause();
    player.currentTime = 0;
    playPauseBtn.textContent = 'Play';
  }
};

这些都很简单，只需在每次点击 currentTime 时添加或减少3秒即可。 在真正的视频播放器中，您可能需要一个更精细的查找栏或类似的。

注意，当按下Fwd按钮时，我们还检查 currentTime 是否大于总媒体 duration ，或者媒体是否正在播放。 如果任一条件为真，我们只需停止视频，避免用户界面出现错误，如果他们尝试在视频未播放时快进，或快进超过视频结尾。

最后，将以下代码添加到代码的末尾，以控制显示的时间:

player.ontimeupdate = function() {
  var minutes = Math.floor(player.currentTime / 60);
  var seconds = Math.floor(player.currentTime - minutes * 60);
  var minuteValue;
  var secondValue;

  if (minutes<10) {
    minuteValue = "0" + minutes;
  } else {
    minuteValue = minutes;
  }

  if (seconds<10) {
    secondValue = "0" + seconds;
  } else {
    secondValue = seconds;
  }

  mediaTime = minuteValue + ":" + secondValue;
  timeLabel.textContent = mediaTime;
};

每次时间更新(每秒一次)，我们启动此功能。 它从给定的currentTime值(以秒为单位)计算分钟数和秒数，如果分钟数或秒数小于10，则添加前导0，然后创建显示读数并将其添加到时间标签。

Further reading

这为您提供了如何向视频/音频播放器实例添加自定义播放器功能的基本概念。 有关如何向视频/音频播放器添加更复杂的功能(包括旧版浏览器的Flash后备功能)的详情，请参阅:

• Audio and video delivery
• Video player styling basics
• Creating a cross-browser video player

我们还创建了一个高级示例，演示如何创建面向对象的系统，该系统可以找到页面上的每个视频和音频播放器(无论有多少)，并向其中添加自定义控件。 请参见自定义控件oojs (也 href ="https://github.com/mdn/learning-area/tree/master/accessibility/multimedia/custom-controls-OOJS"class ="external">查看源代码)。

音频成绩单

为了向聋人提供音频内容的访问，你真的需要创建文本记录。 这些可以以某种方式包含在与音频相同的页面上，或包含在单独的页面上并链接到。

在实际创建抄本方面，您的选择是:

• Commercial services — You could pay a professional to do the transcription, see for example companies like Scribie, Casting Words, or Rev. Look around and ask advice to make sure you find a reputable company that you'll be able to work with effectively.
• Community/grass roots/self transcription — If you are part of an active community or team in your workplace, then you could ask them for help with doing the translations. You could even have a go at doing them yourself.
• Automated services — There are automated services available, for example when you upload a video to YouTube you can choose to generate automated captions/transcripts. Depending on how clear the spoken audio is, the resulting transcript quality will vary greatly.

与生活中的大多数事情一样，你倾向于得到你付出的东西; 不同的服务在准确性和生产誊本所需的时间上会有所不同。 如果你付信誉良好的公司做转录，你可能会迅速完成，并达到高品质。 如果你不想为它付费，你可能会以较低的质量和/或慢慢完成它。

发布音频资源，但是承诺稍后发布文本是不行的 - 这样的承诺通常不会保留，这将损害您和您的用户之间的信任。 如果您所呈现的音频类似于面对面的会议或现场演唱，可以在演奏期间记录笔记，与音频一起完整发布，然后寻求帮助清理笔记。

脚本示例

如果您使用自动服务，则可能需要使用该工具提供的用户界面。 例如，请查看音频录音示例1 ，然后选择更多> 脚本。

如果您正在创建自己的用户界面来呈现您的音频和相关的成绩单，您可以随意做，但将它包含在可显示/可隐藏的面板中可能是有意义的; 请参阅我们的 audio-transcript-ui 示例(也 请参阅源代码)。

音频描述

如果您的音频伴有视觉效果，您需要提供某种类型的音频描述来描述额外的内容。

在许多情况下，这只会采用视频的形式，在这种情况下，您可以使用本文下一节中所述的技术实现字幕。

但是，有一些边缘情况。 例如，您可能有一个会议的录音，指的是附带的资源，例如电子表格或图表。 在这种情况下，您应确保资源与音频+脚本一起提供，并在脚本中引用它们的位置具体链接到这些资源。 这当然会帮助所有的用户，而不是那些聋人。

视频文本轨道

为了让聋人，盲人或其他群组的用户(例如低带宽用户或不了解视频录制语言的用户)访问视频，您需要在视频内容中添加文字轨道。

这不是一个新的概念 - 电视服务已经有相当长的时间可用的字幕:

alt ="">

然而，许多国家提供以他们自己的母语编写的字幕的英语电影，并且不同的语言字幕通常在DVD上可用，例如

alt ="">

有不同类型的文本轨道具有不同的目的。 你会遇到的主要是:

• Captions — There for the benefit of deaf users who can't hear the audio track, including the words being spoken, and contextual information such as who spoke the words, if the people were angry or sad, and what mood the music is currently creating.
• Subtitles — Include translations of the audio dialog, for users that don't understand the language being spoken.
• Descriptions — These include descriptions for blind people who can't see the video, for example what the scene looks like.
• Chapter titles — Chapter markers intended to help the user navigate the media resource

实施HTML5视频文本轨道

用于使用HTML5视频显示的文本轨迹需要用WebVTT编写，该文本格式包含多个文本字符串以及元数据，例如视频中您希望每个文本字符串显示的时间，甚至有限的样式/定位信息。 这些文本字符串称为线索。

典型的WebVTT文件将如下所示:

WEBVTT

1
00:00:22.230 --> 00:00:24.606
This is the first subtitle.

2
00:00:30.739 --> 00:00:34.074
This is the second.

  ...

要使这个显示与HTML媒体播放一起，您需要:

• Save it as a .vtt file in a sensible place.
• Link to the .vtt file with the <track> element. <track> should be placed within <audio> or <video>, but after all <source> elements. Use the kind attribute to specify whether the cues are subtitles, captions, or descriptions. Furthermore, use srclang to tell the browser what language you have written the subtitles in.

这里有一个例子:

<video controls>
    <source src="example.mp4" type="video/mp4">
    <source src="example.webm" type="video/webm">
    <track kind="subtitles" src="subtitles_en.vtt" srclang="en">
</video>

这将导致显示字幕的视频，如下所示:

>

有关详情，请参阅为HTML5视频添加字幕和翻译字幕。 您可以在Github上找到与本文相关的示例， 由Ian Devlin撰写(请参阅源代码 。)这个例子使用一些JavaScript来让用户在不同的字幕之间进行选择。 请注意，要打开字幕，您需要按"CC"按钮并选择一个选项 - English，Deutsch或Español。

其他多媒体内容

以上部分不包括您可能想要放在网页上的所有类型的多媒体内容。 您可能还需要处理游戏，动画，幻灯片，嵌入式视频和使用其他可用技术创建的内容，例如:

• HTML5 canvas
• Flash
• Silverlight

对于此类内容，您需要根据具体情况处理辅助功能问题。 在某些情况下，它不是那么糟，例如:

• If you are embedding audio content using a plugin technology like Flash or Silverlight, you can probably just provide an audio transcript in the same manner as we already showed above in the Transcript examples section.
• If you are embedding video content using a plugin technology like Flash or Silverlight, you can take advantage of captioning/subtitling techniques available to those technologies. For example, see Flash captions, Using the Flash-Only Player API for Closed Captioning, or Playing Subtitles with Videos in Silverlight.

然而，其他多媒体并不容易访问。 例如，如果你正在处理一个身临其境的3D游戏或虚拟现实应用程序，真的很难提供文本替代这种体验，你可能会认为盲人用户并不真正在这样的应用程序的目标观众包括。

然而，你可以确保这样的应用程序具有足够好的颜色对比度和清晰的表现，所以它是可感知的那些低视力/色盲，并使它键盘可访问。 记住，无障碍是关于尽可能多的做，而不是努力100％的可访问性，所有的时间，这通常是不可能的。

概要

本章提供了多媒体内容的辅助功能问题的摘要，以及一些实用的解决方案。