学习笔记（八）视频和音频内容

<vidio>

例：

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

<video> 标签内的内容

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

<vidio>的属性：

src属性

同 <img> 标签使用方式相同，src 属性指向你想要嵌入网页当中的视频资源，他们的使用方式完全相同。

<source>

但是，各个浏览器可能支持的视频格式不同，每种格式包括一个容器类型（如WebM、MP4和Ogg），以及一个视频编码（如Vp8、H.262和Theora）和一个音频编码（如AAC和Vorbis）

所以我们应该应用source>标签，用以下方式：

<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 属性，浏览器会尝试加载每一个文件，直到找到一个能正确播放的格式，这样会消耗掉大量的时间和资源。

controls属性(布尔属性)

用户必须能够控制视频和音频的回放功能。你可以使用 controls 来包含浏览器提供的控件界面，同时你也可以使用合适的 JavaScript API 创建自己的界面。界面中至少要包含开始、停止以及调整音量的功能。

<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

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

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

<audio>

<audio> 标签与 <video> 标签的使用方式几乎完全相同，有一些细微的差别比如下面的边框不同，与HTML5 <video>的差异如下：

• <audio> 标签不支持 width/height 属性 — 由于其并没有视觉部件，也就没有可以设置 width/height 的内容。
• 同时也不支持 poster 属性 — 同样，没有视觉部件。

显示音轨文本

许多人不想（或者不能）听到 Web 上的音频/视频内容。一个典型的 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> 标签当中，同时需要放在所有 <source> 标签之后。使用 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>

总结

问题：

• 为什么各个浏览器支持的音视频格式不同？可否有一个固定的代码，用来支持所有浏览器？？
• 为什么淘汰掉Flash?那如果想插入Flash怎么办？