音频和视频

正如您在图片单元中所了解到的,借助 HTML,您可以将媒体嵌入到网页中。在本部分中, 我们会研究音频和视频文件,包括如何嵌入它们、用户控件、为视频提供静态图片占位符, 包括使音频和视频文件可供访问。

<audio><video>

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

起始 <video><audio> 标记可以包含几个其他属性,包括 controlsautoplayloopmutepreload 和全局属性。<video> 元素还支持 heightwidthposter 属性。

<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 属性有五个枚举值:subtitlescaptionsdescriptionschapters 和其他 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,它提供了由 HTMLVideoElementHTMLAudioElement,其中 HTMLMediaElement 添加了一些属性, 方法和事件。还有一些其他 Media API, 包括 TextTrack API。您可以使用媒体捕获和流式传输MediaDevices API(用于通过用户麦克风录制音频) 或录制用户的屏幕Web Audio API 支持操纵直播和预先录制的音频,以及流式传输、保存音频或将音频发送到 <audio> 元素。

检查您的理解情况

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

<track> 元素的用途是什么?

存储有关视频时长和文件大小的信息。
请重试。
提供字幕。
正确!
为了针对不同的浏览器或设备存储多个版本的视频。
请重试。

poster 属性控制哪些内容?

在用户浏览器不支持视频时显示的图片。
请重试。
简介视频。
请重试。
视频播放前作为静态画面显示的图片。
正确!