前端HTML5/HTML+CSS3/CSS学习笔记(七)

HTML5多媒体的特性

在HTML5出现之前并没有将视频和音频嵌入到页面的标准方式，多媒体内容在大多数情况下都是通过第三方插件或集成在Web浏览器的应用程序置于页面中。
运用HTML5中新增的video标签和audio标签可以避免这样的问题。

视频和音频编解码器
视频编解码器
视频编解码器定义了多媒体数据流编码和解码的算法。其中编码器主要是对数据流进行编码操作，用于存储和传输。

音频编解码器
音频编解码器定义了音频数据流编码和解码的算法。与视频编解码器的工作原理一样，音频编码器主要用于对数据流进行编码操作，解码器主要用于对音频文件进行解码。

多媒体格式
运用HTML5的video和audio标签可以在页面中嵌入视频或音频文件，如果想要这些文件在页面中加载播放，还需要设置正确的多媒体格式。
视频格式包含视频编码、音频编码和容器格式。
音频格式是指要在计算机内播放或是处理音频文件。

嵌入视频和音频
在HTML5中嵌入视频
在HTML5中，video标签用于定义播放视频文件的标准。
基本语法格式：

contrlos属性为播放，暂停和音量控件

				常用属性值
属性				值				描述
autoplay		autoplay		当页面载入完成后自动播放视频。
loop			loop			视频结束时重新开始播放。
preload			preload			如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
poster			url				当视频缓冲不足时，该属性值链接一个图像，并将该图像按照一定的比例显示出来。

在HTML5中嵌入音频
在HTML5中，audio标签用于定义播放音频文件的标准。
基本语法：

contrlos属性为播放，暂停和音量控件

				常用属性值
属性				值			描述
autoplay		autoplay	当页面载入完成后自动播放音频。
loop			loop		音频结束时重新开始播放。
preload			preload		如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。

音视频中的source元素
基本语法：

调用网页多媒体文件
在网页中调用多媒体文件的方法主要有两种：
调用本地多媒体文件
调用指定url地址的互联网多媒体文件

多媒体的支持条件
支持视频和音频的浏览器

浏览器	支持版本
IE	9.0及以上版本
Frefox	3.5及以上版本
Opera	10.5及以上版本
Chrome	3.0及以上版本
Safari	3.2及以上版本

CSS控制视频的宽高
在HTML5中，经常会通过为video元素添加宽高的方式给视频预留一定的空间，这样浏览器在加载页面时就会预先确定视频的尺寸，为其保留合适的空间，使页面的布局不产生变化。