视频和音频内容

¥Video and audio on the web

在线视频和音频的首次涌入是通过基于插件的专有技术（例如 闪光 和 银光）实现的。这两者都存在安全性和可访问性问题，现在已过时，有利于原生 HTML 解决方案 <video> 和 <audio> 元素以及用于控制它们的 JavaScript APIs 的可用性。我们不会在这里讨论 JavaScript — 只是可以使用 HTML 实现的基本基础。

¥The first influx of online videos and audio were made possible by proprietary plugin-based technologies like Flash and Silverlight. Both of these had security and accessibility issues, and are now obsolete, in favor of native HTML solutions <video> and <audio> elements and the availability of JavaScript APIs for controlling them. We'll not be looking at JavaScript here — just the basic foundations that can be achieved with HTML.

我们不会教你如何制作音频和视频文件 - 这需要完全不同的技能。我们为你提供了 示例音频和视频文件以及示例代码 供你自己进行实验，以防你无法掌握自己的实验。

¥We won't be teaching you how to produce audio and video files — that requires a completely different skill set. We have provided you with sample audio and video files and example code for your own experimentation, in case you are unable to get hold of your own.

注意：在开始之前，你还应该知道有相当多的 OVP（在线视频提供商），例如 YouTube、每日运动 和 Vimeo，以及在线音频提供商，例如 声云。这些公司提供了一种方便、简单的方式来托管和使用视频，因此你不必担心巨大的带宽消耗。OVP 通常甚至提供现成的代码，用于在网页中嵌入视频/音频；如果你使用该路线，则可以避免我们在本文中讨论的一些困难。我们将在下一篇文章中详细讨论这种服务。

¥Note: Before you begin here, you should also know that there are quite a few OVPs (online video providers) like YouTube, Dailymotion, and Vimeo, and online audio providers like Soundcloud. Such companies offer a convenient, easy way to host and consume videos, so you don't have to worry about the enormous bandwidth consumption. OVPs even usually offer ready-made code for embedding video/audio in your webpages; if you use that route, you can avoid some of the difficulties we discuss in this article. We'll be discussing this kind of service a bit more in the next article.

¥The <video> element

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

¥The <video> element allows you to embed a video very easily. A really simple example looks like this:

<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>

需要注意的特性有：

¥The features to note are:

src

与 <img> 元素相同，src（源）属性包含要嵌入的视频的路径。它的工作原理完全相同。

controls

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

<video> 标签内的段落

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

嵌入的视频将如下所示：

¥The embedded video will look something like this:

你可以在此处 尝试现场示例（另请参阅 源代码。）

¥You can try the example live here (see also the source code.)

¥Using multiple source formats to improve compatibility

上面的例子有问题。该视频可能无法播放，因为不同的浏览器支持不同的视频（和音频）格式。幸运的是，你可以采取一些措施来帮助防止出现这种问题。

¥There's a problem with the above example. It is possible that the video might not play for you, because different browsers support different video (and audio) formats. Fortunately, there are things you can do to help prevent this from being an issue.

媒体文件的内容

¥Contents of a media file

首先，让我们快速浏览一下术语。MP3、MP4 和 WebM 等格式称为 容器格式。它们定义了一种结构，其中存储构成媒体的音频和/或视频轨道，以及描述媒体的元数据、使用什么编解码器对其通道进行编码等等。

¥First, let's go through the terminology quickly. Formats like MP3, MP4 and WebM are called container formats. They define a structure in which the audio and/or video tracks that make up the media are stored, along with metadata describing the media, what codecs are used to encode its channels, and so forth.

一个 WebM 文件包含一部电影，该电影具有一个主视频轨道和一个备用角度轨道，加上英语和西班牙语的音频，以及英语解说轨道的音频，可以如下图所示进行概念化。还包括包含故事片隐藏式字幕、电影西班牙语字幕和评论英语字幕的文本轨道。

¥A WebM file containing a movie which has a main video track and one alternate angle track, plus audio for both English and Spanish, in addition to audio for an English commentary track can be conceptualized as shown in the diagram below. Also included are text tracks containing closed captions for the feature film, Spanish subtitles for the film, and English captions for the commentary.

容器内的音频和视频轨道以用于编码该媒体的编解码器的适当格式保存数据。音频轨道与视频轨道使用不同的格式。每个音频轨道都使用 音频编解码器 进行编码，而视频轨道则使用（正如你可能已经猜到的）视频编解码器 进行编码。正如我们之前谈到的，不同的浏览器支持不同的视频和音频格式，以及不同的容器格式（例如 MP3、MP4 和 WebM，它们又可以包含不同类型的视频和音频）。

¥The audio and video tracks within the container hold data in the appropriate format for the codec used to encode that media. Different formats are used for audio tracks versus video tracks. Each audio track is encoded using an audio codec, while video tracks are encoded using (as you probably have guessed) a video codec. As we talked about before, different browsers support different video and audio formats, and different container formats (like MP3, MP4, and WebM, which in turn can contain different types of video and audio).

例如：

¥For example:

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

有一些特殊情况。例如，对于某些类型的音频，编解码器的数据通常在没有容器的情况下存储，或者使用简化的容器存储。FLAC 编解码器就是这样的一个实例，它最常存储在 FLAC 文件中，而这些文件只是原始 FLAC 曲目。

¥There are some special cases. For example, for some types of audio, a codec's data is often stored without a container, or with a simplified container. One such instance is the FLAC codec, which is stored most commonly in FLAC files, which are just raw FLAC tracks.

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

¥Another such situation is the always-popular MP3 file. An "MP3 file" is actually an MPEG-1 Audio Layer III (MP3) audio track stored within an MPEG or MPEG-2 container. This is especially interesting since while most browsers don't support using MPEG media in the <video> and <audio> elements, they may still support MP3 due to its popularity.

音频播放器倾向于直接播放音轨，例如 MP3 或 Ogg 文件。这些不需要容器。

¥An audio player will tend to play an audio track directly, e.g. an MP3 or Ogg file. These don't need containers.

浏览器中的媒体文件支持

¥Media file support in browsers

注意：几种流行的格式，例如 MP3 和 MP4/H.264，虽然很优秀，但受到专利的阻碍；也就是说，专利涵盖了它们所基于的部分或全部技术。在美国，MP3 的专利保护到 2017 年，而 H.264 的专利保护至少到 2027 年。

¥Note: Several popular formats, such as MP3 and MP4/H.264, are excellent but are encumbered by patents; that is, there are patents covering some or all of the technology that they're based upon. In the United States, patents covered MP3 until 2017, and H.264 is encumbered by patents through at least 2027.

由于这些专利，希望实现对这些编解码器支持的浏览器通常必须支付巨额许可费。此外，有些人更喜欢避免使用受限制的软件，而更喜欢仅使用开放格式。由于这些法律和优惠原因，网络开发者发现自己必须支持多种格式才能吸引所有受众。

¥Because of those patents, browsers that wish to implement support for those codecs must pay typically enormous license fees. In addition, some people prefer to avoid restricted software and prefer to use only open formats. Due to these legal and preferential reasons, web developers find themselves having to support multiple formats to capture their entire audience.

上一节中描述的编解码器用于将视频和音频压缩为可管理的文件，因为原始音频和视频都非常大。每个 Web 浏览器都支持各种 codecs，例如 Vorbis 或 H.264，它们用于将压缩的音频和视频转换为二进制数据并返回。每个编解码器都有自己的优点和缺点，每个容器也可能提供自己的积极和消极特性，影响你对使用哪个编解码器的决定。

¥The codecs described in the previous section exist to compress video and audio into manageable files, since raw audio and video are both exceedingly large. Each web browser supports an assortment of codecs, like Vorbis or H.264, which are used to convert the compressed audio and video into binary data and back. Each codec offers its own advantages and drawbacks, and each container may also offer its own positive and negative features affecting your decisions about which to use.

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

¥Things become slightly more complicated because not only does each browser support a different set of container file formats, they also each support a different selection of codecs. In order to maximize the likelihood that your website or app will work on a user's browser, you may need to provide each media file you use in multiple formats. If your site and the user's browser don't share a media format in common, your media won't play.

由于确保应用的媒体在你希望访问的每种浏览器、平台和设备组合上都可见是一项复杂的工作，因此选择编解码器和容器的最佳组合可能是一项复杂的任务。请参阅 选择合适的容器 以帮助选择最适合你需求的容器文件格式；同样，请参阅 选择视频编解码器 和 选择音频编解码器 以帮助选择用于你的内容和目标受众的第一个媒体编解码器。

¥Due to the intricacies of ensuring your app's media is viewable across every combination of browsers, platforms, and devices you wish to reach, choosing the best combination of codecs and container can be a complicated task. See Choosing the right container for help selecting the container file format best suited for your needs; similarly, see Choosing a video codec and Choosing an audio codec for help selecting the first media codecs to use for your content and your target audience.

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

¥One additional thing to keep in mind: mobile browsers may support additional formats not supported by their desktop equivalents, just like they may not support all the same formats the desktop version does. On top of that, both desktop and mobile browsers may be designed to offload handling of media playback (either for all media or only for specific types it can't handle internally). This means media support is partly dependent on what software the user has installed.

那么我们该怎么做呢？看看下面的 更新的例子（还有 在这里尝试一下）：

¥So how do we do this? Take a look at the following updated example (try it live here, also):

<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>

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

¥Here we've taken the src attribute out of the actual <video> tag, and instead included separate <source> elements that point to their own sources. In this case the browser will go through the <source> elements and play the first one that it has the codec to support. Including WebM and MP4 sources should be enough to play your video on most platforms and browsers these days.

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

¥Each <source> element also has a type attribute. This is optional, but it is advised that you include it. The type attribute contains the MIME type of the file specified by the <source>, and browsers can use the type to immediately skip videos they don't understand. If type isn't included, browsers will load and try to play each file until they find one that works, which obviously takes time and is an unnecessary use of resources.

请参阅我们的 媒体类型和格式指南，帮助你选择最适合你需求的容器和编解码器，以及查找为每个容器和编解码器指定的正确 MIME 类型。

¥Refer to our guide to media types and formats for help selecting the best containers and codecs for your needs, as well as to look up the right MIME types to specify for each.

¥Other <video> features

显示 HTML 视频时还可以包含许多其他功能。看看我们的下一个例子：

¥There are a number of other features you can include when displaying an HTML video. Take a look at our next example:

<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 看起来像这样：

¥The resulting UI looks something like this:

特点包括：

¥Features include:

width 和 height

你可以使用这些属性或使用 CSS 来控制视频大小。在这两种情况下，视频都会保持其原始的宽高比，即长宽比。如果你设置的尺寸未保持宽高比，则视频将增长以填充水平空间，并且默认情况下，未填充的空间将被赋予纯色背景色。

autoplay

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

loop

使视频（或音频）在结束时再次开始播放。这也可能很烦人，因此仅在确实必要时才使用。

muted

使媒体在默认情况下关闭声音的情况下播放。

poster

播放视频之前显示的图片的 URL。它旨在用于启动屏幕或广告屏幕。

preload

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

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

你可以找到适用于 在 GitHub 上直播（也适用于 查看源代码）的上述示例。请注意，我们没有在实时版本中包含 autoplay 属性 - 如果页面加载后视频就开始播放，你将看不到 海报！

¥You can find the above example available to play live on GitHub (also see the source code.) Note that we haven't included the autoplay attribute in the live version — if the video starts to play as soon as the page loads, you don't get to see the poster!

¥The <audio> element

<audio> 元素的工作原理与 <video> 元素类似，但有一些细微差别，如下所述。一个典型的例子可能如下所示：

¥The <audio> element works just like the <video> element, with a few small differences as outlined below. A typical example might look like so:

<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>

这会在浏览器中生成类似以下内容的内容：

¥This produces something like the following in a browser:

注意：你可以在 GitHub 上查看 现场运行音频演示（另请参阅 音频播放器源代码。）

¥Note: You can run the audio demo live on GitHub (also see the audio player source code.)

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

¥This takes up less space than a video player, as there is no visual component — you just need to display controls to play the audio. Other differences from HTML video are as follows:

• <audio> 元素不支持 width/height 属性 - 同样，没有可视组件，因此没有任何可分配宽度或高度的内容。
• 它也不支持 poster 属性 - 同样，没有可视组件。

除此之外，<audio> 支持与 <video> 相同的所有功能 - 请查看上面的部分以获取有关它们的更多信息。

¥Other than this, <audio> supports all the same features as <video> — review the above sections for more information about them.

¥Displaying video text tracks

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

¥Now we'll discuss a slightly more advanced concept that is really useful to know about. Many people can't or don't want to hear the audio/video content they find on the Web, at least at certain times. For example:

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

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

¥Wouldn't it be nice to be able to provide these people with a transcript of the words being spoken in the audio/video? Well, thanks to HTML video, you can. To do so we use the WebVTT file format and the <track> element.

注意："录制" 表示 "将口语写成文本。" 结果文本是 "成绩单。"

¥Note: "Transcribe" means "to write down spoken words as text." The resulting text is a "transcript."

WebVTT 是一种用于编写包含多个文本字符串以及元数据（例如视频中每个文本字符串应显示的时间，甚至有限的样式/定位信息）的文本文件的格式。这些文本字符串称为提示，并且有多种用于不同目的的提示。最常见的线索是：

¥WebVTT is a format for writing text files containing multiple strings of text along with metadata such as the time in the video at which each text string should be displayed, and even limited styling/positioning information. These text strings are called cues, and there are several kinds of cues which are used for different purposes. The most common cues are:

subtitles

外国材料的翻译，适合那些听不懂音频中的单词的人。

captions

对话的同步转录或重要声音的描述，让听不到音频的人了解正在发生的事情。

定时描述

媒体播放器应朗读的文本，以便向盲人或其他视觉障碍用户描述重要的视觉效果。

典型的 WebVTT 文件如下所示：

¥A typical WebVTT file will look something like this:

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

¥To get this displayed along with the HTML media playback, you need to:

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

这是一个例子：

¥Here's an example:

<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 服务器 上。在浏览器的输出中，你将看到一个显示字幕的视频，类似于：

¥In order to try this you need to host the files on a local HTTP server. In the output in browser, you'll see a video that has subtitles displayed, kind of like this:

有关更多详细信息，包括如何添加标签，请阅读 向 HTML 视频添加字幕和副标题。你可以在 GitHub 上查看 找到例子，该文章由 Ian Devlin 编写（也请参阅 源代码）。此示例使用一些 JavaScript 来允许用户在不同的字幕之间进行选择。请注意，要打开字幕，你需要按 "CC" 按钮并选择一个选项 - 英语、德语或西班牙语。

¥For more details, including on how to add labels please read Adding captions and subtitles to HTML video. You can find the example that goes along with this article on GitHub, written by Ian Devlin (see the source code too.) This example uses some JavaScript to allow users to choose between different subtitles. Note that to turn the subtitles on, you need to press the "CC" button and select an option — English, Deutsch, or Español.

注意：文本轨道也可以帮助你实现 SEO，因为搜索引擎尤其依赖于文本。文本轨道甚至允许搜索引擎直接链接到视频中途的某个位置。

¥Note: Text tracks also help you with SEO, since search engines especially thrive on text. Text tracks even allow search engines to link directly to a spot partway through the video.

¥Active learning: Embedding your own audio and video

对于这种主动学习，我们（理想情况下）希望你走出去，录制一些自己的视频和音频 - 如今，大多数手机都允许你轻松录制音频和视频，前提是你可以将其传输到 到你的电脑上，就可以使用了。你可能需要进行一些转换才能最终获得视频的 WebM 和 MP4，以及音频的 MP3 和 Ogg，但是有足够的程序可以让你轻松完成此操作， 例如 米罗视频转换器 和 大胆。我们希望你能尝试一下！

¥For this active learning, we'd (ideally) like you to go out into the world and record some of your own video and audio — most phones these days allow you to record audio and video very easily and, provided you can transfer it on to your computer, you can use it. You may have to do some conversion to end up with a WebM and MP4 in the case of video, and an MP3 and Ogg in the case of audio, but there are enough programs out there to allow you to do this without too much trouble, such as Miro Video Converter and Audacity. We'd like you to have a go!

如果你无法获取任何视频或音频，那么你可以随意使用我们的 示例音频和视频文件 来进行此练习。你也可以使用我们的示例代码作为参考。

¥If you are unable to source any video or audio, then you can feel free to use our sample audio and video files to carry out this exercise. You can also use our sample code for reference.

我们希望你：

¥We would like you to:

1. 将音频和视频文件保存在计算机上的新目录中。
2. 在同一目录中创建一个新的 HTML 文件，名为 index.html.html。
3. 向页面添加 <audio> 和 <video> 元素；使它们显示默认的浏览器控件。
4. 给它们两个 <source> 元素，以便浏览器找到它们最支持的音频格式并加载它。这些应包括 type 属性。
5. 为 <video> 元素提供一张海报，该海报将在视频开始播放之前显示。享受创建自己的海报图形的乐趣。

为了获得额外的好处，你可以尝试研究文本轨道，并找出如何向视频添加一些字幕。

¥For an added bonus, you could try researching text tracks, and work out how to add some captions to your video.

¥Test your skills!

你已读完本文，但你还记得最重要的信息吗？在继续之前，你可以找到一些进一步的测试来验证你是否已保留此信息 - 请参阅 测试你的技能：多媒体和嵌入。请注意，此测试中的第三个评估问题假设你了解 下一篇文章 中涵盖的一些技术，因此你可能需要在尝试之前阅读该内容。

¥You've reached the end of this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see Test your skills: Multimedia and embedding. Note that the third assessment question in this test assumes knowledge of some of the techniques covered in the next article, so you may want to read that before attempting it.

¥Summary

这就是一个总结 - 我们希望你在网页中玩得开心！在下一篇文章中，我们将使用 <iframe> 和 <object> 等技术来研究 Web 上的 嵌入内容的其他方式。

¥And that's a wrap — we hope you had fun playing with video and audio in web pages! In the next article, we'll look at other ways of embedding content on the Web, using technologies like <iframe> and <object>.

¥See also

• HTML 媒体元素：<audio>、<video>、<source> 和 <track>
• 为视频添加字幕和副标题
• 音频和视频传输：有关使用 HTML 和 JavaScript 将音频和视频放到网页上的大量详细信息。
• 音频和视频处理：有关使用 JavaScript 操作音频和视频的大量详细信息（例如添加过滤器）。
• 网络媒体技术
• 网络媒体类型和格式指南
• 活动参考 > 媒体