第九章 音频和视频
一、音频和视频的概念
首先，要先了解两个概念：容器(container)和编解码器（codec）
1、视频容器：视频文件包含音频轨道，视频轨道，其他的元数据。
视频在播放时音频轨道和视频轨道绑在一起
主流视频格式为：.avi/.flv/.mp4/.mkv/.ogg/.webm
2、编解码器：是一组算法，
主流的音频解码器：AAC/MPEG-3/Ogg/Voribs
视频解码器：H.264/VP8/Ogg/Theora
3、浏览器支持情况
容器格式 视频解码器 音频编解码 IE9+ Firefox5+ Chrome13+
WebM（主流） VP8 Vorbis × √ √
OGG（） Theora Vorbis × √ √
MPEG-4（兼容性最好） H.264 AAC √ × 疑问？（现在支持，以后可能不支持）
WebM不但清晰度高，还免费，不受限制许可的使用源码和专利权。
二、video视频元素
1、src/width/height 上面讲过。
2、autoplay 设置后，表示立刻开始播放视频。
3、preload 设置后，表示预先载入视频。
*预加载设置：preload有三个属性，none 表示播放器什么都不加载，第一帧也不加载，只有点击进去后才会慢慢加载。
metadata 表示播放之前只能加载元数据（宽高，第一帧等信息）。
auto 表示请求浏览器尽快下载整个视频。（未点进去之前就已经在加载了）
<video src="http://li.cc/text.webm" width="640" height="480" controls preload></video> //进去后会先缓存后面的视频内容。
4、controls 设置后，表示显示播放控制。
5、loop 设置后，表示反复播放视频。
6、muted 设置后，表示视频处于静音状态。
7、poster 指定视频数据载入时显示的图片。
例一、<video src="text.webm" width="640" height="480" controls autoplay loop muted></video>
<video src="text.webm" width="640" height="480" controls poster="图片"></video> //视频未点进去时的画面
*兼容多个浏览器
例二、<video width="640" height="480" controls>
<source src="text.webm"> }
<source src="text.mp4"> } 里边可以写多个同一个视频格式，来保证可以在大多数浏览器支持播放
<source src="text.ogg"> }
</video>
三、audio 音频元素：除了没有宽高，和视频元素基本一样。
ps：更多设计到API的JavaScript控制，将在以后的基于JavaScript基础后讲解。
让视频在页面水平居中
<center><video class="video" src="cehui.mp4" width="640" height="400" controls loop preload poster=".."></video></center>
