音频和视频

使用集合保持井然有序 根据您的偏好保存内容并进行分类。

正如您在图片模块中学到的那样，HTML 支持将媒体嵌入到网页中。在本节中，我们将了解音频和视频文件，包括如何嵌入它们、用户控件、为视频提供静态图像占位符以及最佳实践，包括使音频和视频文件具有无障碍功能。

<audio> 和 <video>

<video> 和 <audio> 元素可用于直接使用 src 属性嵌入媒体播放器，也可以用作一系列 <source> 元素的容器元素，每个元素都提供 src 文件建议。虽然 <video> 可用于嵌入音频文件，但 <audio> 元素更适合嵌入声音文件。

打开 <video> 和 <audio> 标记可以包含多个其他属性，包括 controls、autoplay、loop、mute、preload 和全局属性。<video> 元素还支持 height、width 和 poster 属性。

<video src="videos/machines.webm" poster="images/machine.jpg" controls>
  <p>Watch <a href="https://youtube.com/link">video on Youtube</a></p>
</video>

此 <video> 示例具有单个源，其中 src 属性链接到视频源。poster 属性提供在视频加载时显示的图像。最后，controls 属性提供用户视频控件。

后备内容包含在开始和结束标记之间。如果用户代理不支持 <video>（或 <audio>），则会显示此内容。即使两个标记之间没有内容（但应该始终有后备内容，对吗？），也需要结束标记 </video>。

如果在打开 <video> 或 <audio> 标记时未包含 src 属性，请包含一个或多个 <source> 元素，每个元素都具有指向媒体文件的 src 属性。以下示例包括三个媒体文件选项、后备内容以及开始和结束标记之间的英语和法语字幕。

<video controls poster="images/machine.jpg">
  <source src="videos/machines.webm" type="video/webm">
  <source src="videos/machines.mp4" type="video/mp4">
  <source src="videos/machines.ogv" type="video/ogg">
  <track label="English" kind="subtitles" srclang="en" src="vtt/subtitles-en.vtt" default />
  <track label="Francais" kind="subtitles" srclang="fr" src="vtt/subtitles-fr.vtt" />
  <p>Watch <a href="https://youtube.com/link">video on Youtube</a></p>
</video>

每个 <source> 子元素都包含一个指向资源的 src 属性，并且 type 属性会告知浏览器链接文件的媒体类型。这可以防止浏览器获取无法解码的媒体文件。

在 type 属性中，您可以包含一个 codecs 参数，该参数精确指定资源的编码方式。编解码器为您提供了一种包含尚未在所有浏览器中支持的媒体优化的方法。编解码器与媒体类型之间用分号分隔。例如，编解码器可以使用直观的语法编写，例如 <source src="videos/machines.webm" type="video/webm;codecs=vp8,vorbis">，这表示 WebM 文件包含 VP8 视频和 vorbis 音频。编解码器也可能更难以理解，例如 <source src="videos/machines.mp4" type="video/mp4; codecs=avc1.4d002a">，这表示 MP4 编码是高级视频编码 Main Profile Level 4.2。解释此语法超出了本课程的范围。Jake Archibald 发表了一篇文章，解释了如何确定 AV1 视频的编解码器参数，如果您想了解更多信息。

默认情况下，当显示视频时，视频的第一帧会在可用时显示为静止画面。这是可以控制的。poster 属性使图像源能够在视频下载时以及播放前显示。如果视频播放然后暂停，则不会重新显示海报图像。

请务必定义视频的宽高比，因为当视频加载时，海报图像和视频之间的尺寸差异会导致重排和重绘。

始终包含布尔值 controls 属性。这会使用户控件可见，从而使用户能够控制音频级别、完全静音音频以及将视频扩展到全屏。省略 controls 会产生糟糕的用户体验，尤其是在包含布尔值 autoplay 属性的情况下。请注意，如果省略布尔值 muted 属性，则某些浏览器将不会理会 autoplay 属性指令，因为自动播放媒体文件通常是一种糟糕的用户体验，即使已静音并且具有可见控件也是如此。

音轨

在音频和视频的开始和必需的结束标记之间，包含一个或多个 <track> 元素以指定定时文本轨道。以下示例包括两个 <track> 文件，提供英语和法语的定时文本字幕。

<track label="English" kind="subtitles" srclang="en" src="vtt/subtitles-en.vtt" default />
<track label="Français" kind="subtitles" srclang="fr" lang="fr-fr" src="vtt/subtitles-fr.vtt" />

在 src 属性中指定的轨道文件应为 WebVTT 格式 (.vtt)。除非包含 crossorigin 属性，否则这些文件应与 HTML 文档位于同一域中。

轨道 kind 属性有五个枚举值：subtitles、captions、descriptions、chapters 和其他 metadata。

将 subtitles 与 srclang 属性一起包含，用于对话转录和翻译。每个 label 属性的值都将显示为用户的选项。所选 VTT 选项的内容将显示在视频上方。可以通过定位 ::cue/ ::cue() 来设置字幕的外观样式。

值 kind="caption" 应保留用于转录和翻译，其中包含声音效果和其他相关的音频信息。这不仅适用于听力障碍的观众。也许用户找不到他们的耳机，所以他们打开了字幕。或者，也许他们没有完全听清他们最喜欢的播客的最后几个要点，所以他们想阅读文字记录以确认他们的理解。拥有访问音频和视频内容的替代方式既重要又方便。

kind="description" 用于视频中视觉内容的文本描述，供无法观看视频的用户使用，无论他们使用的是没有屏幕的系统（如 Google Home 或 Alexa）还是盲人。

使用 WebVTT 格式提供字幕使听力障碍人士可以访问视频。请记住，残疾是人与其当前环境之间的不匹配。听力障碍可能是由于用户处于嘈杂的环境中、扬声器故障或耳机损坏，或者因为用户有听力损失或失聪。确保您的内容具有无障碍功能可以帮助比您想象的更多的人；它可以帮助所有人。

背景视频注意事项

您的营销或设计团队可能希望您的网站包含背景视频。通常，这意味着他们想要一个静音、自动播放、循环播放且没有控件的视频。HTML 可能如下所示

<video playsinline autoplay loop muted poster="images/machine.jpg" role="none">
  <source src="videos/machines.webm" type="video/webm">
  <source src="videos/machines.mp4" type="video/mp4">
  <source src="videos/machines.ogv" type="video/ogg">
</video>

背景视频不具有无障碍功能。内容不应通过背景视频传达，而应让用户完全控制播放并访问所有字幕。由于此视频纯粹是装饰性的，因此它包含 ARIA 角色 none 并省略了任何后备内容。为了提高始终静音的视频的性能，请从媒体源中删除音轨。

如果您的视频播放时间为五秒或更短，则无障碍功能指南不要求提供暂停机制，但是任何带有布尔值 loop 属性的内容都将默认永久循环播放，超出此五秒或任何其他时间限制。为了获得良好的用户体验，请始终包含暂停视频的方法。最简单的方法是包含 controls。

自定义媒体控件

要显示自定义视频或音频控件，而不是浏览器内置控件，请包含 controls 属性。然后使用 JavaScript 添加自定义媒体控件并删除 controls 属性。例如，您可以添加一个 <button> 来切换音频文件的播放状态。

<button id="playPause" aria-controls="idOfAudio"
  data-pause-text="Pause audio"
  data-play-text="Play audio">Pause audio</button>

此示例包含一个带有 dataset 属性的按钮，其中包含在访问者在播放和暂停状态之间切换时将更新的文本。aria-controls 属性与按钮控制的元素的 id 一起包含；在本例中，为音频。控制音频的每个按钮都有一个事件处理程序。

要创建自定义控件，请使用 HTMLMediaElement.play() 和 HTMLMediaElement.pause()。切换播放状态时，还要切换按钮的文本

const pauseButton = document.getElementById('playPause');

pauseButton.addEventListener("click", pauseAndPlay, false);

function pauseAndPlay() {
  console.log(this);
  const media = document.getElementById(this.getAttribute('aria-controls'));

  if (media.paused) {
    media.play();
    this.innerText = this.dataset.pauseText;
  } else {
    media.pause();
    this.innerText = this.dataset.playText;
  }
}

通过包含 controls 属性，即使 JavaScript 失败，用户也可以控制音频（或视频）。仅在实例化替换按钮后才删除 controls 属性。

document.querySelector('[aria-controls]').removeAttribute('controls');

当用户无法访问控件时（例如，控件隐藏在站点内容后面的背景视频），请始终包含外部控件。了解媒体无障碍功能要求的基础知识非常重要，以便适应具有不同环境和感官需求的用户，包括数百万听力损失和视力障碍人士。我们刚刚介绍了 HTMLMediaElement，它提供了 HTMLVideoElement 和 HTMLAudioElement 都继承的多个属性、方法和事件，其中 HTMLMediaElement 添加了自己的一些属性、方法和事件。还有其他几个 媒体 API，包括 TextTrack API。您可以使用 Media Capture and Streams 和 MediaDevices API 来录制用户麦克风的音频或录制用户屏幕。Web Audio API 支持处理实时和预先录制的音频，并将音频流式传输、保存或发送到 <audio> 元素。

检查您的理解情况

测试您对音频和视频的知识。