HTML入门9

　　这一篇着眼于HTML里的音频和视频标签及相关处理；

　　传统技术不能再web中使用音频和视频，一致使用Flash后来因为一些HTML/CSS特性，安全问题，慢慢退出。在HTML5提出后，新特性<video><audio>标签，不考虑制作流程，如何使用这些音频视频文件，进行实验。video标签 嵌入一段视频，代码示例

<video src="rabbit320.webm" controls>

　　<p>your browser doesn't support

Here is a <a href="rabbit320.webm">link to the video</a> instead

</p>

</video>

src 属性同img标签一样都是用来指向嵌入网页当中的视频资源，  controls 控制视频和音频的回放功能，这些媒体应该包括开始和停止以及音量调整等功能；

<video> 标签内的段落一旦浏览器不支持video时会显示出来，作用类似img 里的alt文本，同时提供了一个指向视频的链接地址，如果不能显示video，那么通过链接可以访问到文件，很好兼容；

　　了解关于容器的格式mp3  mp4  webm

webm 容器包括ogg vorbis音频和VP8/VP9视频，用在firefox和chrome

MP4容器  包括AAC和MP3音频和H.264视频，主要用在IE和safari.

老式ogg容器往往支持ogg Vorbis 音频和Ogg Theora视频，主要在firefox和chrome支持，现在被webm容器所取代，音频文件会直接播放，不需要容器。浏览器并不会支持所有的格式，那么有的媒体文件将不会播放，因此这种情况下，改善的做法就是去掉video里的src属性额外添加source元素包裹src示例：

<video>

　　<source src="rabbit32.mp4" type="video/mp4">

　　<source src="rabbit32.webm" type="video/webm">

　　<p>your browsere dose't support HTML5 video .here is a<a href="rabbit320.mp4">link to the video</a> instead.

</p>

</video>

这样浏览器会检查source标签，播放第一个能播放的媒体，因此视频格式也应该包含webm和MP4两种格式，以支持大多数平台和浏览器，注意，应该加上type属性，让浏览器锁定到指定的播放器格式，如果不加浏览器会加载每一个文件，直到找到正确的播放格式i，会消耗大量时间。

同样可以给video元素添加一些其他布尔属性， 下面具体解释下个属性的含义

autoplay  添加后视频会立即播放，即使页面还么有加载完，建议不添加，谁也不喜欢自动播放视频

loop 让视频和音频文件循环播放，

muted 导致媒体播放时默认关闭声音

poster 指向一个url 图像会在播放前显示 ，粗劣的广告或预览；

preload  缓冲较大的文件，三个值可选preload ="none" 不缓冲， auto  页面加载完缓存媒体文件，metadata 仅缓存文件的元数据

再来了解下<audio>标签， 使用方式于video几乎一样，音频的控件要比视频的控件要小，指定媒体播放类型的时候，应该为audio/mp3 或者audio/ogg两种方式，而且auio不支持width和height属性，由于并没有实觉部件所以不需要，同样poster属性也不使用。

　　下面讨论下音轨文本，相当于兼容阅读器用户或者听不懂语音内容的用户，添加一个副本来表示音频内容的元素，即<track>标签。WebVTT是一个格式，用来编写文本文件，包含很多的字符串，同时包含一些元数据，可以用来描述字符串在视频中显示的时间，也可以描述字符串的样式和定位信息，把这样的字符串叫cues 。可以定义显示不同的样式，subtitle 添加翻译字幕，captions同步翻译对白， timed descriptions 将文字转换为音频，服务有视觉障碍的人；

与媒体文件一起显示，需要做的工作，以.vtt后缀保存文件，用<track>标签链接.vtt文件，使用kind属性指明是哪一种类型，使用srclang告诉浏览器用什么语言编写subtitles。示例代码：

<video controls>

　　<source src ="example.mp4" type="video/mp4">

　　<source src="example.webm" type="video/webm">

　　<track kind="subtitles" src="subtitle_en.vtt" srclang="en">

</video>

这个视频将会带有字幕。文本轨道将使得网站更容易被SEO。

　　总结，这一块内容更多的视频和音频怎么用在页面上，注意哪些要素，属性选择，之类，下一篇将ifame和object 很重要。