【HTML5+css3】学习笔记之音频元素和视频元素

六、音频元素和视频元素

两个概念：
容器（container)和编解码器（codec)

视频容器：
音频文件或视频文件，都只是一个容器文件。视频文件包含了音频轨道、视频轨道和其他一些元数据。视频播放
时，音频轨道和视频轨道是绑定在一起的。元数据包含了视频的封面、标题、
子标题、字幕等相关信息。主流视频容器支持的格式为：avi、flv、mp4、mkv、ogg、webm。

编解码器：
原始媒体文件体积非常巨大，需要对其进行解码。音频和视频编码/解码是一组算法
，用来对一段特定音频或视频进行解码和编码，以便音频和视频能够播放。

video视频元素
以往的视频播放，需要借助flash插件才可以实现。但flash插件的不稳定性经常让浏览器
导致崩溃，因此很多浏览器或系统厂商开始抛弃它。取代它的正式HTML5的video元素。

video元素的属性
src 路径
width
height
autoplay 设置后，表示立刻开始播放视频
preload 设置后，表示预先载入视频 值： none表示播放器什么都不加载 metadata表示播放之前只能
加载元数据（宽高、第一帧画面等信息）；auto表示请求浏览器尽快下载整个视频。
controls 设置后，表示显示播放控件
loop 设置后，表示反复播放视频
muted 设置后，表示视频处于静音状态
poster 指定视频数据载入时，显示的图片

兼容多个浏览器




这里引入flash播放器实现IE9以下

通过source元素引入多种格式的视频，让更多的浏览器保持兼容

audio音频元素
音频的支持度和视频类似，使用<source>元素引入多种格式兼容即可。主流音频格式有
.mp3，.m4a，.ogg，.wav

属性
src  路径
autoplay 设置后，立刻播放
preload   预先载入音频
controls 显示播放控件

兼容
<audio  controls>
    <source src="test.mp3" type="">
    <source src="test.m4a" type="">
    <source src="test.wav" type="">
</audio>


都可以通过javascript控制其播放