Video and audio content

先决条件:	基本计算机知识，安装的基本软件，基本知识 developer.mozilla.org/zh-CN/Learn/Getting_started_with_the_web/Dealing_with_files\">使用文件工作，熟悉HTML基础知识(如 HTML入门教程中所述) )和 HTML中的图片。
目的:	了解如何将视频和音频内容嵌入网页，以及向视频添加字幕/翻译字幕。

音频和视频在网络上

网络开发人员想要在网上使用视频和音频很长时间，自从2000年代初，当我们开始有足够的带宽足够支持任何种类的视频(视频文件比文本甚至图像大得多)。 在早期，诸如HTML的本地网络技术没有能够在Web上嵌入视频和音频，因此基于专有(或基于插件)的技术，例如 / wiki / Adobe_Flash"class ="external"> Flash (以及以后的 Silverlight ) )变得普遍用于处理这样的内容。 这种技术工作确定，但它有一些问题，包括不能很好地与HTML / CSS功能，安全问题和辅助功能问题。

网络开发人员想要在网上使用视频和音频很长时间，自从2000年代初，当我们开始有足够的带宽足够支持任何种类的视频(视频文件比文本甚至图像大得多)。 在早期，诸如HTML的本地网络技术没有能够在Web上嵌入视频和音频，因此基于专有(或基于插件)的技术，例如 / wiki / Adobe_Flash"class ="external"> Flash (以及以后的 Silverlight ) )变得普遍用于处理这样的内容。 这种技术工作确定，但它有一些问题，包括不能很好地与HTML / CSS功能，安全问题和辅助功能问题。

我们不会教你如何产生音频和视频文件 - 这需要一个完全不同的技能。 我们已向您提供 示例音频和视频文件和示例代码为您自己的实验，以防您无法掌握自己的实验。

< video> 元件

>< video> 元素可让您轻松嵌入视频。 一个非常简单的例子如下所示:

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

注意的特点是:

src

In the same way as for the <img> element, the src attribute contains a path to the video you want to embed. It works in exactly the same way.

controls

Users must be able to control video and audio playback (it's especially critical for victims of epilepsy.) You must either use the controls attribute to include the browser's own control interface, or build your interface using the appropriate JavaScript API. At minimum, the interface must include a way to start and stop the media, and to adjust the volume.

The paragraph inside the <video> tags

This is called fallback content — this will be displayed if the browser accessing the page doesn't support the <video> element, allowing us to provide a fallback for older browsers. This can be anything you like; in this case we've provided a directly link to the video file, so the user can at least access it some way regardless of what browser they are using.

嵌入的视频将如下所示:

您可以试试 这里的示例live (另请参阅 /simple-video.html"class ="external">源代码)。

支持多种格式

上述示例有一个问题，如果您尝试使用Safari或Internet Explorer等浏览器访问上面的直播链接，您可能已经注意到了。 视频无法播放！ 这是因为不同的浏览器支持不同的视频(和音频)格式。

让我们快速阅读术语。 格式(如MP3，MP4和WebM)称为容器格式。 它们包含组成整首歌曲或视频的不同部分，例如音轨，视频轨(在视频的情况下)和用于描述正在呈现的媒体的元数据。

音频和视频轨道也有不同的格式，例如:

• A WebM container usually packages Ogg Vorbis audio with VP8/VP9 video. This is supported mainly in Firefox and Chrome.
• An MP4 container often packages AAC or MP3 audio with H.264 video. This is supported mainly in Internet Explorer and Safari.
• The older Ogg container tends to go with Ogg Vorbis audio and Ogg Theora video. This was supported mainly in Firefox and Chrome, but has basically been superceded by the better quality WebM format.

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

上述格式存在将视频和音频压缩为可管理的文件(原始视频和音频非常大)。 浏览器包含不同的 解码器")是编码或解码数据流的计算机程序。编码解码器 ，例如Vorbis或H.264，用于将压缩的声音和视频转换为二进制数字并返回。 如上所述，不幸的是浏览器并不都支持相同的编解码器，因此您必须为每个媒体制作提供几个文件。 如果你缺少正确的编解码器解码媒体，它只是不会播放。

那么我们该怎么做呢？ 请查看以下 -formats.html"class ="external">更新示例( -content / multiple-video-formats.html"class ="external">试试这里，也):

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

这里我们将 src 属性从实际的< video> 标签中取出，而是包含单独的 / zh-CN / docs / Web / HTML / Element / source"title ="HTML源元素为图片，音频或视频元素指定多个媒体资源，它是一个空元素，通常用于 不同浏览器支持的多种格式的相同媒体内容"> < source> 指向其自己的来源的元素。 在这种情况下，浏览器将通过< source> 元素，播放第一个具有编解码器支持。 包括WebM和MP4源应该足以在大多数平台和浏览器上播放您的视频，这些天。

每个< source> 元素也有一个 type 属性。 这是可选的，但建议您包含它们 - 它们包含 类型:MIME类型(现在正确称为"媒体类型"，但有时也称为"内容类型")是与指示文件类型的文件一起发送的字符串(例如，声音文件可能标记为audio / ogg或 图像文件图像/ png)。 它的作用与传统上在Windows上的文件扩展名一样。"> MIME类型的视频文件，浏览器可以读取这些文件，并立即跳过他们不理解的视频。 如果不包括，浏览器将加载并尝试播放每个文件，直到他们找到一个工作，获得更多的时间和资源。

其他< video> 特征

您可以在HTML5视频上添加其他功能。 看看我们的第三个例子，如下:

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

这将给我们一个输出看起来像这样:

新功能有:

width and height

You can control the video size either with these attributes or with CSS. In both cases, videos maintain their native width-height ratio — known as the aspect ratio. If the aspect ratio is not maintained by the sizes you set, the video will grow to fill the space horizontally, and the unfilled space will just be given a solid background color by default.

autoplay

This attribute makes the audio or video start playing right away while the rest of the page is loading. You are advised not to use autoplaying video (or audio) on your sites, because users can find it really annoying.

loop

This attribute makes the video (or audio) start playing again whenever it finishes. This can also be annoying, so only use if really necessary.

muted

This attribute causes the media to play with the sound turned off by default.

poster

This attribute takes as its value the URL of an image, which will be displayed before the video is played. It is intended to be used for a splash or advertising screen.

preload

此属性用于缓冲大文件的元素。 它可以采用3个值之一:

• "none" does not buffer the file
• "auto" buffers the media file
• "metadata" buffers only the metadata for the file

您可以在 在Github上播放(也 请注意，我们尚未将 autoplay 属性包含在 实时版本 - 如果视频开始播放，一旦页面加载，你不会看到海报！

< audio> 元件

或更多的音频源，使用src属性或源元素表示;浏览器将选择最适合的一个。"> < audio> 元素的工作原理与 < video> 元素，但有一些小的差异，如下所述。 典型示例可能如下所示:

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

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

这比视频播放器占用更少的空间，因为没有可视组件 - 您只需要显示控制来播放音频。 与HTML5视频的其他差异如下:

• The <audio> element doesn't support the width/height attributes — again, there is no visual component, so there is nothing to assign a width or height to.
• It also doesn't support the poster attribute — again, no visual component.

除此之外，< audio> 支持与< video> 相同的所有功能 - 查看上述部分以了解更多信息。

显示视频文本轨道

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

• Many people have auditory impairments (more commonly known as hard of hearing, or deaf) so can't hear the audio.
• Others may not be able to hear the audio because they are in noisy environments (like a crowded bar when a sports game is being shown) or might not want to disturb others if they are in a quiet place (like a library.)
• People who don't speak the language of the video might want a text transcript or even translation to help them understand the media content.

能否向这些人提供在音频/视频中说出的话的抄本不是很好吗？ 好了，感谢HTML5视频，您可以使用 WebVTT 格式和 ="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/track"title ="HTML轨道元素用作媒体元素(音频和视频)的子代，它可以让您 指定定时文本轨道(或基于时间的数据)，例如自动处理字幕。轨道以WebVTT格式(.vtt文件) - 网络视频文本轨道格式化。"> < track> 元素。

WebVTT是一种用于写入包含多个文本字符串以及元数据的文本文件的格式，诸如在视频中希望每个文本字符串被显示的时间，甚至是有限的样式/定位信息。 这些文本字符串称为提示，您可以根据不同的目的显示不同的类型，最常见的是:

subtitles

Translations of foreign material, for people who don't understand the words spoken in the audio.

captions

Synchronized transcriptions of dialog or descriptions of significant sounds, to let people who can't hear the audio understand what is going on.

timed descriptions

Text for conversion into audio, to serve people with visual impairments.

典型的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. Save it as a .vtt file in a sensible place.
2. Link to the .vtt file with the <track> element. <track> should be placed within <audio> or <video>, but after all <source> elements. Use the kind attribute to specify whether the cues are subtitles, captions, or descriptions. Further, use srclang to tell the browser what language you have written the subtitles in.

这里有一个例子:

<video controls>
    <source src="example.mp4" type="video/mp4">
    <source src="example.webm" type="video/webm">
    <track kind="subtitles" src="subtitles_en.vtt" srclang="en">
</video>

这将导致显示字幕的视频，如下所示:

>

有关详情，请参阅为HTML5视频添加字幕和翻译字幕。 您可以查找示例，与Github上的此文章一起， 由Ian Devlin撰写(请参阅源代码 。)这个例子使用一些JavaScript来让用户在不同的字幕之间进行选择。 请注意，要打开字幕，您需要按"CC"按钮并选择一个选项 - English，Deutsch或Español。

主动学习:嵌入您自己的音频和视频

对于这种主动学习，我们(理想情况下)喜欢你出去进入世界，并记录一些你自己的视频和音频 - 大多数手机，这些天，允许你轻松地记录音频和视频，并提供了你可以传输 到你的电脑，你可以使用它。 你可能需要做一些转换，最终在视频情况下的WebM和MP4，以及音频情况下的MP3和Ogg，但有足够的程序，以允许你这样做没有太多的麻烦， 例如 Miro Video Converter 和 class ="external"> Audacity 。 我们希望你能去！

如果您无法提供任何视频或音频，那么您可以随时使用我们的 视频和音频内容"class ="external">样本音频和视频文件，以执行此练习。 您也可以使用我们的示例代码作为参考。

我们希望您:

1. Save your audio and video files in a new directory on your computer.
2. Create a new HTML file in the same directory, called index.html.
3. Add <audio> and <video> elements to the page; make them display the default browser controls.
4. Give both of them <source> elements so that browsers will find the audio format they support best and load it. These should include type attributes.
5. Give the <video> element a poster that will be displayed before the video starts to be played. Have fun creating your own poster graphic.

为了额外的好处，您可以尝试研究文本轨道，并制定如何添加一些字幕到您的视频。

概要

这是一个包装;我们希望你有乐趣在网页上播放视频和音频！在下一篇文章中，我们将介绍使用像"title ="HTML内联框架元素iframe代表嵌套的浏览上下文，有效地将另一个HTML页面嵌入到当前页面中在HTML 4.01中，文档可能包含头部和正文或头部和框架集，但不能同时包含主体和框架集，然而，可以在正常的文档主体内使用iframe。每个浏览上下文具有其自己的会话历史和活动文档。包含嵌入内容的浏览上下文称为父浏览上下文。顶级浏览<iframe> and 上下文(没有父级)通常是浏览器窗口。"> < iframe> 和\">docs / Web / HTML / Element / object"title ="HTML对象元素表示一个外部资源，可以被视为一个图像，一个嵌套的浏览上下文或一个插件需要处理的资源。"> .\">< object> 。

也可以看看

• <audio>
• <video>
• <source>
• <track>
• Adding captions and subtitles to HTML5 video
• Audio and Video delivery: A LOT of detail about putting audio and video onto web pages using HTML and JavaScript.
• Audio and Video manipulation: A LOT of detail about manipulating audio and video using JavaScript (for example adding filters.)