console
<h1>音频和视频内容</h1>
<br>
<h2><video> 标签</h2>
<p>
<code><video></code> 允许你简单的嵌入一段视频。一个简单的例子如下：
</p>
<video src="http://vd3.bdstatic.com/mda-ieeypde71xq7tym4/mda-ieeypde71xq7tym4.mp4" controls>
<p>Your browser doesn't support HTML5 video. Here is a <a href="http://vd3.bdstatic.com/mda-ieeypde71xq7tym4/mda-ieeypde71xq7tym4.mp4">link to the video</a> instead.</p>
</video>
<p>其中一些属性说明如下:</p>
<dl>
<dt><code><src></code></dt>
<dd>同 <code><img></code> 标签使用方式相同,src属性指向你想要嵌入网页当中的视频资源，他们的使用方式完全相同</dd>
<dt><code><controls></code></dt>
<dd>用户必须能够控制视频和音频的回访功能，你可以使用浏览器提供的接口，同事在JS中使用这些控制接口。至少，这些媒体应该包括开始和停止，以及音量调节功能。</dd>
<dt><code><video></code> 标签内的段落</dt>
<dd>这个交做<code>后备内容</code>--当浏览器不支持<code><video></code>标签的时候，它将会显示出来，是我们对旧版浏览器做一个兼容处理。你可以添加任何后备内容，从而使用户可以访问到这个文件，而不局限于浏览器的支持。</dd>
</dl>
<hr>
<h2>多格式支持</h2>
<p>不同浏览器对于视频格式的支持不同，像 MP3、MP4、WebM这些术语叫做容器格式。他们是用不同的方式来播放音频或者视频的 — 也就是说这些容器是用不同的音频轨道、视频轨道、元数据来呈现媒体文件的。</p>
<p>视频和音频都有不同的格式:</p>
<ul>
<li>
WebM 容器通常包括了 Ogg Vorbis 音频和 VP8/VP9 视频。主要在 FireFox 和 Chrome 当中支持。
</li>
<li>
MP4 容器通常包括 AAC 以及 MP3 音频和 H.264 视频。主要在 Internet Explorer 和 Safari 当中支持。
</li>
<li>
老式的 Ogg 容器往往支持 Ogg Vorbis 音频和 Ogg Theora 视频。主要在 Firefox 和 Chrome 当中支持，不过这个容器已经被更强大的 WebM 容器所取代。
</li>
</ul>
<p>音频播放器将会直接播放音频文件，例如 MP3 和 Ogg 文件。这些不需要容器。</p>
<p>我们需要准备不同的格式来兼容不同的浏览器:</p>
<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>
<p>我们将 src 属性从 <code><video></code> 标签中移除，转而将它放在几个单独的标签 <code><source></code> 当中。在这个例子当中，浏览器将会检查 <code><source></code> 标签，并且播放第一个与其自身 codec 向匹配的媒体。你的视频应当包括 WebM 和 MP4 两种格式，这两种在目前已经足够支持大多数平台和浏览器。</p>
<p>
每个 <code><source></code> 标签页含有一个 type 属性，这个属性是可选的，但是建议你添加上这个属性 — 它包含了视频文件的 MIME types ，同时浏览器也会通过检查这个属性来迅速的跳过那些不支持的格式。如果你没有添加 type 属性，浏览器会尝试加载每一个文件，直到找到一个能正确播放的格式，这样会消耗掉大量的时间和资源。
</p>
<hr>
<h2>其他 <video> 特性</h2>
<p>HTML5 <code><video></code> 上还具有其它许多特效，例如：</p>
<video controls width="400" height="400"
loop muted
poster="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1526276293650&di=c864c986c7252ef4b86550a724dfdbe5&imgtype=0&src=http%3A%2F%2Fi2.hdslb.com%2Fbfs%2Farchive%2Fe1b2f55dddbdf79a3a58df0eecac26f84a78c16e.jpg">
<source src="http://vd3.bdstatic.com/mda-ieeypde71xq7tym4/mda-ieeypde71xq7tym4.mp4" type="video/mp4">
<source src="http://vd3.bdstatic.com/mda-ieeypde71xq7tym4/mda-ieeypde71xq7tym4.mp4" 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>
<p>新的特性：</p>
<dl>
<dt><code>width</code> 和 <code>height</code></dt>
<dd>
你可以用属性控制视频的尺寸，也可以用 CSS 来控制视频尺寸。 无论使用哪种方式，视频都会保持它原始的长宽比 — 也叫做纵横比。如果你设置的尺寸没有保持视频原始长宽比，那么视频边框将会拉伸，而未被视频内容填充的部分，将会显示默认的背景颜色。
</dd>
<dt><code>autoplay</code></dt>
<dd>
这个属性会使音频和视频内容立即播放，即使页面的其他部分还没有加载完全。建议不要应用这个属性在你的网站上，因为用户们会比较反感自动播放的媒体文件。（这个例子中未使用，因为这样就无法看到poster了）
</dd>
<dt><code>loop</code></dt>
<dd>
这个属性可以让音频或视频文件循环播放，同样不建议使用，除非有必要。
</dd>
<dt><code>muted</code></dt>
<dd>
这个属性会导致媒体播放时，默认关闭声音。
</dd>
<dt><code>poster</code></dt>
<dd>
这个属性指向了一个图像的URL，这个图像会在视频播放前显示。通常用于粗略的预览或者广告。
</dd>
<dt><code>preload</code></dt>
<dd>
<p>这个属性用来缓冲较大的文件，有3个值可选：</p>
<ul>
<li><code>none</code>：不缓冲</li>
<li><code>auto</code>：页面加载后缓存媒体文件</li>
<li><code>metadata</code>：仅缓冲文件的元数据</li>
</ul>
</dd>
</dl>
<hr>
<h2><code><audio></code> 标签</h2>
<p>
<code><audio></code> 标签与 <code><video></code> 标签的使用方式几乎完全相同，有一些细微的差别比如下面的边框不同，例子如下:
</p>
<audio controls>
<source src="https://1.itzmx.com/file-645.html" type="audio/mp3">
<source src="https://1.itzmx.com/file-645.html" 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>
<p>
音频播放器所占用的空间比视频播放器要小，由于它没有视觉部件 — 你只需要显示出能控制音频播放的控件。一些与 HTML5 <code><video></code> 的差异如下：
</p>
<code><audio></code> 标签不支持 width/height 属性 — 由于其并没有视觉部件，也就没有可以设置 width/height 的内容。
同时也不支持 poster 属性 — 同样，没有视觉部件。
除此之外，<code><audio></code> 标签支持所有 <code><video></code> 标签拥有的特性
<hr>
<h2>显示音轨文本（字幕）</h2>
<p>WebVTT 是一个格式，用来编写文本文件，这个文本文件包含了众多的字符串，这些字符串会带有一些元数据，它们可以用来描述这个字符串将会在视频中显示的时间，甚至可以用来描述这些字符串的样式以及定位信息。这些字符串叫做 <strong>cues</strong> ，你可以根据不同的需求来显示不同的样式，最常见的如下：</p>
<dl>
<dt><strong>subtitle</strong></dt>
<dd>通过添加翻译字幕，来帮助那些听不懂外国语言的人们理解音频当中的内容。</dd>
<dt><strong>captions</strong></dt>
<dd>同步翻译对白，或是描述一些有重要信息的声音，来帮助那些不能听音频的人们理解音频中的内容。</dd>
<dt><strong>timed descriptions</strong></dt>
<dd>将文字转换为音频，用于服务那些有视觉障碍的人。</dd>
</dl>
<p>一个典型的 WebVTT 文件如下：</p>
<img src="http://chuantu.biz/t6/316/1526895585x-1404795798.png" width=400 height=140>
<p>
让其与 HTML 媒体一起显示，你需要做如下工作：
</p>
<ol>
<li>
以 .vtt 后缀名保存文件。
</li>
<li>
用 <code><track></code> 标签链接 .vtt 文件， <code><track></code> 标签需放在 <code><audio></code> 或 <code><video></code> 标签当中，同时需要放在所有 <code><source></code> 标签之后。使用 kind 属性来指明是哪一种类型，如 subtitles 、 captions 、 descriptions。然后，使用 srclang 来告诉浏览器你是用什么语言来编写的 subtitles。
</li>
</ol>
<p>如下:</p>
<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>
code{
background-color:#eeeeee;
color:#5887A6;
}