HTML 视频和音频

网络上的视频和音频

第一批在线视频和音频是通过专有插件技术实现的，例如 Flash 和 Silverlight。这两者都存在安全和可访问性问题，现在已经过时，取而代之的是原生的 HTML 解决方案 <video> 和 <audio> 元素，以及用于控制它们的 JavaScript API 的可用性。我们在这里不会讨论 JavaScript — 只讨论使用 HTML 可以实现的基本功能。

我们不会教您如何制作音频和视频文件 — 这需要完全不同的技能。我们为您提供了示例音频和视频文件以及示例代码，以供您自行尝试，以防您无法获得自己的文件。

<video> 元素

<video> 元素允许您非常轻松地嵌入视频。一个非常简单的示例如下所示

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

值得注意的功能是

src

与 <img> 元素相同，src (源) 属性包含您要嵌入的视频的路径。它的工作方式完全相同。

controls

用户必须能够控制视频和音频播放（这对于患有癫痫的人来说尤其重要）。您必须使用 controls 属性包含浏览器自己的控制界面，或者使用适当的 JavaScript API 构建您的界面。至少，界面必须包括启动和停止媒体以及调整音量的方式。

<video> 标签内的段落

这称为回退内容 — 如果访问该页面的浏览器不支持 <video> 元素，则会显示此内容，从而允许我们为旧版浏览器提供回退。这可以是您喜欢的任何内容；在这种情况下，我们提供了视频文件的直接链接，因此无论用户使用什么浏览器，他们至少都可以通过某种方式访问它。

嵌入的视频将如下所示

您可以在此处尝试实时示例（另请参阅源代码）。

使用多种源格式提高兼容性

上述示例存在一个问题。视频可能无法为您播放，因为不同的浏览器支持不同的视频（和音频）格式。幸运的是，您可以采取一些措施来防止这成为问题。

媒体文件内容

首先，让我们快速回顾一下术语。OGG、WAV、MP4 和 WebM 等格式称为容器格式。它们定义了一个结构，其中存储了构成媒体的音频和/或视频轨道，以及描述媒体的元数据、用于编码其通道的编解码器等。

包含电影的 WebM 文件，其中有一个主视频轨道和一个备用角度轨道，以及英语和西班牙语的音频，此外还有英语解说轨道的音频，可以概念化为下图所示。还包括包含故事片隐藏字幕的文本轨道、故事片的西班牙语字幕以及解说的英语字幕。

容器中的音频和视频轨道以用于编码该媒体的编解码器的适当格式保存数据。音频轨道和视频轨道使用不同的格式。每个音频轨道使用音频编解码器编码，而视频轨道使用（您可能已经猜到）视频编解码器编码。正如我们之前讨论的，不同的浏览器支持不同的视频和音频格式，以及不同的容器格式（如 OGG、MP4 和 WebM，它们反过来又可以包含不同类型的视频和音频）。

例如

• WebM 容器通常将 Vorbis 或 Opus 音频与 VP8/VP9 视频打包。所有现代浏览器都支持此功能，尽管旧版本可能无法工作。
• MP4 容器通常将 AAC 或 MP3 音频与 H.264 视频打包。所有现代浏览器也都支持此功能。
• Ogg 容器倾向于使用 Vorbis 音频和 Theora 视频。这在 Firefox 和 Chrome 中支持最佳，但基本上已被质量更好的 WebM 格式取代。

也有一些特殊情况。例如，对于某些类型的音频，编解码器的数据通常不带容器存储，或者带简化容器存储。其中一个实例是 FLAC 编解码器，它最常存储在 FLAC 文件中，这些文件只是原始 FLAC 轨道。

另一个例子是广受欢迎的“MP3 文件”。“MP3 文件”是使用 MPEG-1 音频层 III 压缩编码的音频文件。虽然它可以包含元数据，但它没有封装在单独的 MPEG 或 MPEG-2 容器中。它在 <audio> 和 <video> 元素中的广泛支持主要证明了它经久不衰的受欢迎程度。

音频播放器通常会直接播放音频轨道，例如 MP3 或 Ogg 文件。这些文件不需要容器。

浏览器中的媒体文件支持

上一节中描述的编解码器用于将视频和音频压缩成可管理的文件，因为原始音频和视频都非常大。每个网络浏览器都支持各种编解码器，例如 Vorbis 或 H.264，用于将压缩的音频和视频转换为二进制数据并进行反向转换。每个编解码器都有其自身的优缺点，每个容器也可能提供其自身的积极和消极特性，影响您选择使用哪种。

事情变得稍微复杂，因为每个浏览器不仅支持一组不同的容器文件格式，而且它们各自支持不同的编解码器选择。为了最大限度地提高您的网站或应用程序在用户浏览器上工作的可能性，您可能需要以多种格式提供您使用的每个媒体文件。如果您的站点和用户的浏览器没有共同的媒体格式，您的媒体将无法播放。

由于确保您的应用程序的媒体在您希望覆盖的所有浏览器、平台和设备组合中可见的复杂性，选择编解码器和容器的最佳组合可能是一项复杂的任务。有关选择最适合您需求的容器文件格式的帮助，请参阅选择正确的容器；同样，有关选择用于您的内容和目标受众的第一个媒体编解码器的帮助，请参阅选择视频编解码器和选择音频编解码器。

需要记住的另一件事是：移动浏览器可能支持其桌面对应项不支持的额外格式，就像它们可能不支持桌面版本支持的所有相同格式一样。最重要的是，桌面和移动浏览器都可能被设计为卸载媒体播放的处理（无论是针对所有媒体还是仅针对其内部无法处理的特定类型）。这意味着媒体支持部分取决于用户安装了什么软件。

那么我们该怎么做呢？看看下面的更新示例（也在这里实时尝试）

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

在这里，我们已经将 src 属性从实际的 <video> 标签中取出，而是包含了单独的 <source> 元素，这些元素指向它们自己的源。在这种情况下，浏览器将遍历 <source> 元素并播放它具有支持编解码器的第一个。包含 WebM 和 MP4 源应该足以在当今大多数平台和浏览器上播放您的视频。

每个 <source> 元素还有一个 type 属性。这是可选的，但建议您包含它。type 属性包含 MIME 类型由 <source> 指定的文件，浏览器可以使用 type 立即跳过它们不理解的视频。如果未包含 type，浏览器将加载并尝试播放每个文件，直到找到一个有效的文件，这显然需要时间并是不必要的资源使用。

请参阅我们的媒体类型和格式指南，以获取选择最适合您需求的容器和编解码器方面的帮助，并查找每个文件应指定的正确 MIME 类型。

其他 <video> 功能

在显示 HTML 视频时，您可以包含许多其他功能。请看我们的下一个示例

<video
  controls
  width="400"
  height="400"
  autoplay
  loop
  muted
  preload="auto"
  poster="poster.png">
  <source src="rabbit320.mp4" type="video/mp4" />
  <source src="rabbit320.webm" type="video/webm" />
  <p>
    Your browser doesn't support this video. Here is a
    <a href="rabbit320.mp4">link to the video</a> instead.
  </p>
</video>

结果 UI 看起来像这样

功能包括

width 和 height

您可以使用这些属性或 CSS 来控制视频大小。在这两种情况下，视频都会保持其原始的宽高比 — 称为纵横比。如果宽高比未通过您设置的大小保持，视频将水平增长以填充空间，未填充的空间将默认以纯色背景色填充。

autoplay

使音频或视频在页面其余部分加载时立即开始播放。建议您不要在您的网站上使用自动播放视频（或音频），因为用户可能会觉得它非常烦人。

loop

使视频（或音频）在完成时再次开始播放。这可能也很烦人，所以只有在真正必要时才使用。

muted

导致媒体默认关闭声音播放。

poster

在视频播放前显示的图像的 URL。它旨在用于启动画面或广告画面。

preload

用于缓冲大文件；它可以取三个值之一

• "none" 不缓冲文件
• "auto" 缓冲媒体文件
• "metadata" 仅缓冲文件的元数据

您可以在 GitHub 上实时播放（另请参阅源代码）上述示例。请注意，我们没有在实时版本中包含 autoplay 属性 — 如果视频在页面加载后立即开始播放，您就看不到海报了！

<audio> 元素

<audio> 元素的工作方式与 <video> 元素相同，但有一些细微差别，如下所述。一个典型的示例如下所示

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

这在浏览器中会产生以下内容

这比视频播放器占用更少的空间，因为没有视觉组件 — 您只需要显示控件来播放音频。与 HTML 视频的其他区别如下

• <audio> 元素不支持 width/height 属性 — 再次强调，没有视觉组件，因此没有要指定宽度或高度的内容。
• 它也不支持 poster 属性 — 同样，没有视觉组件。

除此之外，<audio> 支持 <video> 的所有相同功能 — 请查阅以上部分以获取更多信息。

显示视频文本轨道

现在我们将讨论一个稍微高级但非常有用且值得了解的概念。许多人不能或不想听他们在网络上找到的音频/视频内容，至少在某些时候是这样。例如

• 许多人有听力障碍（例如听力受损或耳聋），因此根本听不清音频。
• 其他人可能听不到音频，因为他们身处嘈杂的环境中（例如在拥挤的酒吧里播放体育比赛时）。
• 同样，在播放音频会分散注意力或造成干扰的环境中（例如在图书馆或伴侣试图睡觉时），拥有字幕会非常有用。
• 不讲视频语言的人可能需要文字转录甚至翻译来帮助他们理解媒体内容。

能够为这些人提供音频/视频中说话内容的文本转录，难道不是很好吗？嗯，多亏了 HTML 视频，您可以做到。为此，我们使用 WebVTT 文件格式和 <track> 元素。

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 媒体播放一起显示，您需要

1. 将其保存为 .vtt 文件，放在服务器可以提供的位置（见下文），例如与 HTML 文件相同的目录中。
2. 使用 <track> 元素链接到 .vtt 文件。<track> 应该放置在 <audio> 或 <video> 中，但要在所有 <source> 元素之后。使用 kind 属性指定提示是 subtitles、captions 还是 descriptions。此外，使用 srclang 告诉浏览器您用什么语言编写的字幕。最后，添加 label 以帮助读者识别他们正在寻找的语言。

这是一个例子

<video controls>
  <source src="example.mp4" type="video/mp4" />
  <source src="example.webm" type="video/webm" />
  <track kind="subtitles" src="subtitles_es.vtt" srclang="es" label="Spanish" />
</video>

为了尝试这个，您需要将文件托管在本地 HTTP 服务器上。在浏览器输出中，您会看到一个带有字幕的视频。要获得完整的应用程序及其源代码，请参阅向 HTML 视频添加字幕和副标题。此示例使用 JavaScript 允许用户在不同的字幕之间进行选择。请注意，要打开字幕，您需要按“CC”按钮并选择一个选项 — English、Deutsch 或 Español。

嵌入您自己的音频和视频

为了完成这项任务，何不走出去，录制一些您自己的视频和音频呢？如果您有手机，请用它录制音频和视频，传输到您的电脑，然后试一试。您可能需要进行一些转换才能获得 WebM 和 MP4 格式的视频，以及 MP3 和 Ogg 格式的音频，但是有足够的程序和工具可以帮助您轻松完成此操作，例如 CloudConvert（在线）和 Audacity（桌面应用程序）。我们希望您能尝试一下！

我们希望您

1. 将您的音频和视频文件保存到您电脑上的一个新目录中。
2. 在同一目录中创建一个新的 HTML 文件，名为 index.html，基于我们的入门模板。
3. 向页面添加 <audio> 和 <video> 元素；让它们显示默认的浏览器控件。
4. 为它们都提供 <source> 元素，以便浏览器找到它们最支持的音频格式并加载它。这些应包含 type 属性。
5. 在标签内为它们都提供一个回退 <p> 元素，为不支持的浏览器提供媒体的直接链接。
6. 为 <video> 元素指定一个海报，该海报将在视频开始播放之前显示。尽情创建您自己的海报图片吧。

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

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

总结

就这样 — 我们希望您在网页上玩视频和音频玩得开心！接下来，我们将为您提供一些测试，您可以用来检查您对我们提供的 HTML 视频和音频信息的理解和掌握程度。

• 上一页
• 概述：使用 HTML 构造内容
• 下一页