视频和音频内容

最早的在线视频和音频的流行得益于专有的基于插件的技术，如 Flash 和 Silverlight。这两种技术存在安全性和无障碍问题，现已过时，取而代之的是原生的 HTML 解决方案，该解决方案包括 <video> 和 <audio> 元素以及用于控制它们的 JavaScript API。在这里，我们不讨论有关 JavaScript 的问题，仅仅讲解有关 HTML 的基础。

我们不会教你如何制作音频和视频，因为那需要完全不同的技术。如果你没有音频和视频的话，也没有关系，我们为你提供了示例音频和视频文件以及示例代码供你实验。

你可以借助 <video> 元素来轻松地嵌入视频。一个简单的例子如下：

<video src="rabbit320.webm" controls>
  <p>
    你的浏览器不支持 HTML 视频。可点击<a href="rabbit320.mp4">此链接</a>观看。
  </p>
</video>

值得注意的特性有：

src

同 <img> 元素的使用方式相同，src（来源）属性指向你想要嵌入到网页中的视频资源，它们的运作方式完全相同。

controls

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

<video> 元素内的段落

这个叫做后备内容，当浏览器不支持 <video> 元素的时候，就会显示这段内容，借此我们能够对旧的浏览器提供回退。你可以添加任何后备内容，在这个例子中我们提供了一个指向这个视频文件的链接，从而使用户至少可以访问到这个文件，而不会局限于浏览器的支持。

已嵌入视频文件的网页样式如下：

你可以尝试实时示例，或者查看源代码。

以上的例子中有一个问题，那就是不同浏览器对视频/音频格式的支持程度不一样，导致你可能无法播放某些视频/音频。幸运的是，你有办法防止这个问题发生。

媒体文件的内容

我们先来快速的了解一下相关术语。像 MP3、MP4 还有 WebM 这些格式叫做容器格式。他们定义了构成媒体文件的音频轨道和视频轨道的储存结构，其中还包含描述这个媒体文件的元数据，以及使用什么编解码器对其通道进行编码等等。

一个包含电影的 WebM 文件，其主要包括一个主视频轨道和一个备用视角轨道，以及相应的英语和西班牙语音轨，还有英语解说音轨，如下图所示。文件还包括用于电影的闭路字幕文本轨道、西班牙语字幕以及解说的英文字幕。

容器中的音频和视频轨道存储着按照相应编解码器格式编码的数据。音频轨道使用不同于视频轨道的格式进行编码。每条音频轨道都采用音频编解码器编码，而视频轨道则使用（你可能已经猜到了）视频编解码器编码。我们之前提到过，不同浏览器支持不同的视频和音频格式，以及不同的容器格式，如 MP3、MP4 和 WebM，这些容器可以包含不同类型的视频和音频。

例如：

• WebM 容器通常包括了 Vorbis 或 Opus 音频和 VP8/VP9 视频。这在所有的现代浏览器中都支持，除了某些老版本浏览器。
• MP4 容器通常包括 AAC 或 MP3 音频和 H.264 视频。这在所有的现代浏览器中都支持。
• Ogg 容器倾向于使用 Vorbis 音频和 Theora 视频。其在 Firefox 和 Chrome 当中受到完美的支持，不过这个容器已经被更强大的 WebM 格式所取代。

有一些特殊情况。例如，对于某些类型的音频，通常编解码器的数据存储没有容器或简化容器。其中一个例子就是 FLAC 编解码器，它通常存储在 FLAC 文件中，FLAC 文件只是 FLAC 的原始轨迹。

另一种情况是一直流行的 MP3 文件。“MP3 文件”实际上是存储在 MPEG 或 MPEG-2 容器中的 MPEG-1 音频层 III（MPEG-1 Audio Layer III，MP3）音频轨道。这一点特别有趣，因为尽管大多数浏览器不支持在 <video> 和 <audio> 元素中使用 MPEG 媒体，但由于 MP3 的流行，它们可能仍然支持 MP3。

音频播放器倾向于直接播放音轨，例如 MP3 和 Ogg 文件。它们不需要容器。

浏览器所支持的媒体文件

刚刚所说的编解码器主要用于将音频和视频压缩成可管理的文件（原始的音频和视频文件非常大）。浏览器支持多种编解码器，如 Vorbis 和 H.264，它们用于已压缩的音视频与二进制数据的相互转换。不同的编解码器和不同的容器都有各自的优缺点，这会影响你做出选择。

由于每种浏览器支持的容器文件格式和编解码器都有所不同，情况变得更加复杂。为了尽可能确保你的网站或应用能在用户的浏览器上正常工作，你可能需要提供多种格式的媒体文件。如果你的网站没有提供任何用户的浏览器支持的格式，那么你的媒体内容将无法播放。

由于确保你的应用程序中的媒体内容能在你想要覆盖的每一种浏览器、平台和设备上都正常显示有些复杂，因此选择最合适的编解码器和容器组合可能会是一项挑战。为了选择最适合你需求的容器文件格式，请参考选择正确的容器；要为你的内容和目标受众选择合适的媒体编解码器，请参考选择视频编解码器以及选择音频编解码器。

当然，这里有一点需要注意：移动浏览器和桌面浏览器对格式的支持可能不一样。此外，桌面和移动浏览器都可能外包媒体播放处理（可能是全部媒体也可能是仅仅是那些它无法内部处理的特定类型）。因此，媒体支持在一定程度上依赖于用户安装了哪些软件。

我们该怎么做呢？请请看如下更新后的例子（也可以在这里体验）：

<video controls>
  <source src="rabbit320.mp4" type="video/mp4" />
  <source src="rabbit320.webm" type="video/webm" />
  <p>你的浏览器不支持此视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p>
</video>

在这里我们将 src 属性从 <video> 元素中移除，转而将它放在几个单独的 <source> 元素当中，这些元素分别指向各自的资源。在本例当中，浏览器会检查 <source> 元素，并且播放第一个与其自身 codec 相匹配的媒体。WebM 和 MP4 这两种格式在目前已经足够，只要视频支持这两种格式，那么其在大多数平台和浏览器上都能正确播放。

每个 <source> 元素都含有 type 属性，这个属性是可选的，但是建议你添加这个属性——它包含了 <source> 指定的 MIME 类型，同时浏览器也会通过检查这个属性来迅速的跳过那些不支持的格式。如果你没有添加 type 属性，浏览器会尝试加载每一个文件，直到找到一个能正确播放的格式，但是这样会消耗掉大量的时间和资源。

请参考我们的媒体类型和格式指南，以选择最适合你的需求的容器和编解码器，同时查找合适的 MIME 类型以指定每种媒体类型。

有许多你可以用在 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>你的浏览器不支持此视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p>
</video>

这串代码将会给我们呈现出如下用户界面：

特性包括：

width 和 height

你可以用属性控制视频的尺寸，也可以用 CSS 来控制视频尺寸。无论使用哪种方式，视频都会保持它原始的长宽比——也叫做纵横比。如果你设置的尺寸没有保持视频原始长宽比，那么视频边框将会拉伸，而未被视频内容填充的部分，将会显示默认的背景颜色。

autoplay

这个属性会使音频和视频内容立即播放，即使页面的其他部分还没有加载完全。建议不要在你的网站上自动播放视频（或音频），因为用户可能会反感。

loop

这个属性可以让视频（或者音频）文件在结束时再次开始播放。这个也可能很恼人，同样不建议使用，除非有必要。

muted

这个属性会导致媒体播放时，默认关闭声音。

poster

这个属性指向了一个图像的 URL，这个图像会在视频播放前显示。通常用于粗略的预览或者广告。

preload

这个属性被用来缓冲较大的文件，有三个值可选：

• "none"：不缓冲文件
• "auto"：页面加载后缓存媒体文件
• "metadata"：仅缓冲文件的元数据

你可以在 GitHub 体验以上的例子，也可以查看源代码。注意我们在体验的版本中并没有使用 autoplay 属性——如果页面一加载就开始播放视频的话，就不会看到封面（poster）了。

<audio> 元素与 <video> 元素的使用方式几乎完全相同，只有一些细微的差别，比如下面的边框不同，一个典型的例子如下：

<audio controls>
  <source src="viper.mp3" type="audio/mp3" />
  <source src="viper.ogg" type="audio/ogg" />
  <p>你的浏览器不支持该音频，可点击<a href="viper.mp3">此链接</a>收听。</p>
</audio>

这串代码将会产生如下的效果：

因为音频播放器没有视觉部件，它所占用的空间比视频播放器要小（你只需要显示出能控制音频播放的控件）。其他一些 HTML <audio> 与 <video> 的差异如下：

• <audio> 元素不支持 width/heigth 属性——由于其并没有视觉部件，也就没有内容要设置 width/height。
• 它同时也不支持 poster 属性——同样，因为没有视觉部件。

除此之外，<audio> 元素支持所有 <video> 元素的特性——你可以回顾上面的章节来了解更多的有关信息。

现在，我们将讨论一个略微先进的概念，这个概念将会十分的有用。许多人不想（或者不能）听到 Web 上的音频/视频内容，至少在某些情况下是这样的，比如：

• 许多人患有听觉障碍（通常来说是很难听清声音的人，或者聋人），他们不能听见音频中的声音。
• 还有一些人无法听音频，因为他们在一个非常嘈杂的环境当中（比如在拥挤的酒吧内恰好赶上了球赛）。
• 在某些环境下播放音频会分散注意力或造成干扰（比如在图书馆或伴侣正在休息时），这种情况下，拥有字幕就显得非常实用了。
• 有一些人他们不会说视频当中的语言，因此他们需要文字记录或者是翻译来帮助他们理解媒体内容。

为这些人提供音频/视频中话语的文字记录，将会对他们有很大的帮助。幸运的是，借助 HTML 视频，我们可以做到这一点。我们只需使用 WebVTT 文件格式和 <track> 元素即可。

WebVTT 是一个格式，用来编写文本文件，这个文本文件包含了众多的字符串，这些字符串会带有一些元数据，它们可以用来描述这个字符串将会在视频中显示的时间，甚至可以用来描述这些字符串的样式以及定位信息（尽管有限制）。这些字符串叫做 cue ，你可以根据不同的需求来显示不同类型的 cue，最常见的如下：

subtitles

外语材料的翻译字幕，来帮助那些听不懂音频中说的什么的人理解音频当中的内容。

captions

同步翻译对白，或是描述一些有重要信息的声音，来帮助那些不能听音频的人理解音频中的内容。

定时描述

由媒体播放器朗读的文本，其向盲人或其他视力受损用户描述重要的视觉内容。

一个典型的 WebVTT 文件如下：

WEBVTT

1
00:00:22.230 --> 00:00:24.606
第一段字幕

2
00:00:30.739 --> 00:00:34.074
第二段

…

要让其与 HTML 媒体一起显示，你需要做如下工作：

1. 将其保存为 .vtt 文件，放在服务器可以提供服务的地方（见下文），例如和 HTML 文件放在同一文件夹。
2. 用 <track> 标签链接 .vtt 文件，<track> 标签需放在 <audio> 或 <video> 标签当中，同时需要放在所有 <source> 标签之后。使用 kind 属性来指明是 subtitles、captions 还是 descriptions。然后，使用 srclang 来告诉浏览器你是用什么语言来编写的 subtitles。最后，添加 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 视频添加标题和字幕。在 Github 上可以找到与本文相关的样例，它们由 Ian Devlin 编写（或者查看源代码）。这个样例使用了 JavaScript 代码，用户借此可以选择不同的字幕。注意，若想要显示字幕，你需要点击“CC”按钮，并且选择某个选项（English、Deutsch 或 Español）。

在这个实践学习当中，我们希望你能够走出去，并且记录一些你自己的视频和音频——如今，大多数手机都能够非常方便的记录视频和音频，并且如果你可以将它上传到你的电脑上面，你可以使用它。你可能需要做一些格式转换，如果是视频的话，你需要将它们转化为 WebM 或者 MP4，如果是音频的话，你需要将它们转化为 MP3 或者 Ogg。不过你并不需要担心，有许多的程序都能够帮你轻松解决这些问题，例如 Miro 视频转换器和 Audacity。我们非常希望你能够亲自动手。

如果你无法取得任何的音频或者视频，你可以使用我们为你提供的示例音频和视频文件 来练习。同时你也可以使用我们的代码来作为参考。

我们希望你能够：

1. 将你的音频和视频文件保存在你电脑上的一个新目录中。
2. 在相同的路径下，创建一个新的 HTML 文件，命名为 index.html。
3. 在页面上添加 <audio> 和 <video> 元素；让它们显示浏览器默认的控件。
4. 在当中添加 <source> 标签，并添加 type 属性，以便于浏览器能够找到其能够支持的格式并加载它。
5. 在 <video> 元素中添加 poster 属性，这会在视频播放之前显示。尽情创作属于自己的海报图形吧。

另外，你可以尝试研究一下文本音轨，试着为你的视频添加一些字幕。

你已经完成了这篇教程的学习，但你是否还记得教程里最重要的内容呢？在继续之前，你可以通过一些测试来验证你是否已经掌握了这些内容，请参见技能测试：内嵌多媒体。需要注意，这个测试中的第三个问题可能会需要一些之后讲到的技术，所以我们建议你尝试之前阅读一下下一篇教程。

我们祝愿你可以沉浸在 Web 网站的音频和视频当中，下一篇文章，我们将会学习到另外一种在 web 页面中嵌入内容的方法，比如使用 <iframe> 或者 <object>。

• HTML 媒体元素：<audio>、<video>、<source> 和 <track>
• 向视频添加字幕和标题
• 音频和视频传送：使用 HTML 和 JavaScript 在网页上放置音频和视频的详细信息。
• 音频和视频操作：使用 JavaScript 对音频和视频进行详细操作的指南（例如添加滤镜）。
• Web 媒体技术
• web 上的媒体类型和格式指南
• 事件参考 > 媒体

• 上一页
• 概述：多媒体与嵌入
• 下一页