音频和视频

正如您在图片单元中所了解到的，借助 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 属性，可在视频下载时显示图片来源 一直持续到播放完毕如果视频在播放后又暂停，则系统不会重新展示海报。

请务必指定视频的宽高比，因为在加载视频时，尺寸差异 会导致重排和重绘。

始终添加布尔值 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)。 这些文件应与 HTML 文档位于同一网域，除非 crossorigin 属性。

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

添加 subtitles 以及用于对话转录和翻译的 srclang 属性。每个 label 属性的值 显示为选项所选 VTT 选项的内容会显示在视频上。外观 您可以通过定位 ::cue/ ::cue() 来设置字幕样式。

值 kind="caption" 应保留以用于包含音效和其他相关音频信息的转录和翻译。 这不仅适用于耳聋的观看者。或许用户找不到自己的耳机，因此打开了字幕。也可能没有 能听清喜爱的播客中的最后几个谈话要点，所以他们想看看转写文稿以确认自己的理解。 通过其他方式访问音频和视频内容既重要又方便。

kind="description" 用于为无法看到视频的用户提供对视频中可视内容的文字说明，无论他们是 他们使用的是没有屏幕的系统（例如 Google Home 或 Alexa），或者是盲人。

提供字幕 WebVTT 格式可让拥有 听力受损请记住，残疾是个人与其当前环境不匹配造成的。听力受损可能的原因 用户身处嘈杂的环境中、音响设备发生故障或耳机损坏，或者用户听力减退或 又失聪了。确保内容易于访问能够帮助更多人，他们远超你的想象；它可以帮助每个人。

后台视频注意事项

您的营销或设计团队可能希望您的网站包含背景视频。一般来说，这意味着用户希望静音 自动播放且循环播放的视频，没有控件。HTML 可能如下所示：

<video 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，并省略所有后备内容。 若要改善始终静音的视频的性能，请从媒体来源中移除音轨。

如果您的视频播放时长未超过 5 秒，那么无障碍指南不要求设置暂停机制， 具有布尔值 loop 属性的回调会默认无限循环，且会超过这个五秒或任何其他时间限制。健康 用户体验时，一定要提供暂停视频的方法。添加 controls 是最简单的方法。

自定义媒体控件

如需显示自定义视频或音频控件（而不是浏览器内置控件），请添加 controls 属性。然后使用 用于添加自定义媒体控件并删除控件属性的 JavaScript。例如，您可以添加 <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 运行失败，用户也能控制音频（或视频）。 请仅在替换按钮实例化后移除控件属性。

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

在用户无法访问控件时始终添加外部控件，例如对于隐藏了控件的背景视频 隐藏在网站内容之后了解媒体无障碍功能要求的基础知识非常重要，以方便用户使用 不同的环境和感官需求，其中包括数百万听障和视障人士。 我们刚刚接触了 HTMLMediaElement，它提供了由 HTMLVideoElement 和 HTMLAudioElement，其中 HTMLMediaElement 添加了一些属性， 方法和事件。还有一些其他 Media API， 包括 TextTrack API。您可以使用媒体捕获和流式传输 和 MediaDevices API（用于通过用户麦克风录制音频） 或录制用户的屏幕。Web Audio API 支持操纵直播和预先录制的音频，以及流式传输、保存音频或将音频发送到 <audio> 元素。

检查您的理解情况

测试您对音频和视频知识的掌握情况。