音频和视频

正如您在图片模块中所学，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 编码是 Advanced Video Coding Main Profile Level 4.2。解释此语法远远超出了本课程的范围。如需了解详情，请参阅 Jake Archibald 关于如何确定 AV1 视频的编解码器参数的博文。

显示视频时，默认情况下，当视频的第一帧可用时，系统会将其显示为静止画面。 这是可以控制的。poster 属性可让图片来源在视频下载期间以及播放之前显示。如果视频播放后又暂停，则不会重新显示海报。

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

始终添加 boolean 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> 

无法访问背景视频。不应通过背景视频传达内容，而不为用户提供对播放的完全控制权以及对所有字幕的访问权限。由于此视频纯粹是装饰性视频，因此它包含 none 的 ARIA 角色，并省略了任何后备内容。如需提升始终静音的视频的效果，请从媒体来源中移除音轨。

如果视频播放时长不超过 5 秒，无障碍功能指南不会要求提供暂停机制，但任何具有布尔值 loop 属性的内容默认情况下都会无限循环播放，从而超出 5 秒或任何其他时间限制。为了提供良好的用户体验，请务必提供暂停视频的方法。最简单的方法是添加 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> 元素。

检验您的掌握情况

测试您对音频和视频的了解程度。