这是我参与「第四届青训营 」笔记创作活动的的第12天
视频与音频内容
在了解了如何为一个网页添加简单的图像之后，我们开始为HTML文档添加音频和视频播放器。
web中的音频和视频
<video>元素
<video>允许你轻松的嵌入一段视频。例如：
<video src="rabbit320.webm" controls>
<p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p>
</video>
其中：
src属性指向视频所在地址controls属性用于包含浏览器提供的控件界面，包含开始、停止以及调整音量的功能。<video>标签内的内容称之为后备内容：当浏览器不支持<video>标签的时候，就会显示这段内容，这使得我们能够对旧的浏览器提供回退内容。你可以添加任何后备内容，在这个例子中我们提供了一个指向这个视频文件的链接，从而使用户至少可以访问到这个文件，而不会局限于浏览器的支持。
使用多个播放源以提高兼容性
对于各种播放源，像MP3、MP4、WebM 这些术语叫做容器格式。他们定义了构成媒体文件的音频轨道和视频轨道的储存结构，其中还包含描述这个媒体文件的元数据，以及用于编码的编码译码器等等。由于一些技术垄断和专利问题，我们需要设置多种播放源，以保证我们的页面在更多浏览器上均适配。例如：
<video controls>
<source src="rabbit320.mp4" type="video/mp4">
<source src="rabbit320.webm" type="video/webm">
<p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p>
</video>
现在我们将src属性从 <video> 标签中移除，转而将它放在几个单独的标签 <source> 当中。在这个例子当中，浏览器将会检查 <source> 标签，并且播放第一个与其自身 codec 相匹配的媒体。你的视频应当包括 WebM 和 MP4 两种格式，这两种在目前已经足够支持大多数平台和浏览器。
每个 <source> 标签页含有一个 type 属性，这个属性是可选的，但是建议你添加上这个属性 — 它包含了视频文件的 MIME types ，同时浏览器也会通过检查这个属性来迅速的跳过那些不支持的格式。如果你没有添加 type 属性，浏览器会尝试加载每一个文件，直到找到一个能正确播放的格式，这样会消耗掉大量的时间和资源。
其他<video>特性
让我们先来看一个例子：
<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>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p>
</video>
在这段代码中，出现了一些我们之前没有见过的属性：
width和height：你可以用这两个属性控制视频的尺寸，也可以用CSS控制视频尺寸。无论哪种方式，视频都会保持它原本的长宽比。如果你设置的尺寸没有保持视频原始长宽比，那么视频边框将会拉伸，未被视频内容填充的部分，将会显示默认的背景颜色。autoplay：这个属性会使音频和视频内容立即播放，即使其他部分还没有加载完全loop：这个属性可以让音频或者视频文件循环播放。muted:这个属性会导致媒体播放时，默认关闭声音。poster:这个属性指向了一个图像的URL，这个图像会在视频播放之前显示，通常用于粗略的预览或者广告。Preload:这个属性用来缓冲较大的文件，有三个值可以选：
- “none”：不缓冲
- “auto”：页面加载后缓存媒体文件
- “metadata”：仅缓冲文件的元数据
<audio>标签
<audio>标签和<video>标签的使用方式几乎完全相同，有一些细微的差别：
<audio>标签不支持width/height属性——由于其没有视觉部件，也就没有可以设置宽高的内容。- 也不支持
poster属性。
除此之外，<audio>标签支持所有<video>标签拥有的特性。
重新播放媒体
任何时候，你都可以在JavaScript中调用load()方法来重置媒体。如果有多个由标签指定的媒体来源，浏览器会从选择媒体来源开始重新加载媒体。
const mediaElem = document.getElementById("my-media-element");
mediaElem.load();
显示音轨文本
接下来，我们将会讨论一种特殊情况。许多人不想（或者不能）听到Web上的音频/视频内容，如何为这些人提供一个音频文件的副本呢？
WebVTT是一个格式，用来编写文本文件，这个文本文件包含了众多的字符串，这些字符串会带有一些元数据，它们可以用来描述这个字符串将会在视频中显示的时间，甚至可以用来描述这些字符串的样式以及定位信息。这些字符串叫做cues，你可以根据不同的需求来显示不同的样式：
subtitles：添加翻译字幕。
captions：同步翻译对白，或是描述一些有重要信息的声音。
timed descriptions：将文字转换为音频。
一个典型的WebVTT文件如下：
WEBVTT
1
00:00:22.230 --> 00:00:24.606
第一段字幕
2
00:00:30.739 --> 00:00:34.074
第二段
...
让其与HTML媒体一起显示，你需要完成如下步骤：
1.以.vtt后缀名保存文件。
2.用<track>标签链接.vtt文件，<track>标签需放在<audio>或<video>标签当中，同时需要放在所有<sourse>标签之后。使用kind属性来指明是哪一种类型，如subtitles、captions、descriptions。然后，使用srclang告诉浏览器你是用什么语言来编写的subtitles。
例如：
<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>
