浅谈HTML5中的和

1、video和audio的优点：

不需要第三方插件就能播放音频和视频了，可以直接插入，并且用同一的API接口控制。

 

2、video和audio的缺点：

1) 暂时没有对流视频的支持和规范。流媒体分HTTP渐进流式下载和实时流式传输，video和audio属于HTTP渐进流式下载，不需要流媒体服务器，普通HTTP服务器就可以。

2) 播放媒体类型不统一。由于各种原因，HTML5没有对播放媒体类型做规定，这可以通过source来改进，如果不支持播放第一个文件就播放下一个，以此类推。

3) 资源受跨域共享的限制。跨域的媒体数据需要统统下载到本地服务器。

4) 全屏无法通过脚本控制。从安全性角度来看，让脚本元素控制全屏操作是不合适的。不过，如果要让用户在全屏方式下播放视频，浏览器可以提供其他控制手段。

 

3、常用属性：

1) video和audio共有的可读写属性：

src	媒体数据的url地址
loop	是否循环播放
autoplay	是否在页面加载后自动播放（注意：如果audio不加controls属性，音频是默认隐藏的）
controls	是否添加浏览器自带的播放控制条，控制条中具有播放、暂停等按钮。当然也可以在脚本中自定义控制条，而不使用浏览器默认的控制条
preload	媒体数据是否在页面加载时预加载，并预备播放，可以加快播放速度。可选值有none（不进行预加载）、metadata（部分预加载，只预加载媒体的元数据，如媒体字节数、第一帧、播放列表、持续时间等）、auto（全部预加载）。默认为auto。如果使用 "autoplay"，则忽略该属性
muted	媒体数据是否应该被静音
volume	媒体数据的播放音量，范围从0到1，0为表单，1为最大音量
currentTime	媒体数据的当前播放位置，从开始到现在播放的时间
defaultPlaybackRate	媒体数据的默认播放速率
playbackRate	媒体数据的当前播放速率
error	在读取、使用媒体数据的过程中，正常情况下，媒体元素的error属性为null，但任何时候只要出现错误，error属性将返回一个MediaError对象，该对象的code返回对应的错误状态，错误状态共有4个可能值：MEDIA_ERR_ABORTED(数字值为1）表示媒体数据的下载过程由于用户的操作原因而被中止；MEDIA_ERR_NETWORK(数字值为2）表示确认媒体资源可用，但是在下载时出现网络错误，媒体数据下载过程被中止；MEDIA_ERR_DECODE(数字值为3)表示确认媒体资源可能，但是解码时发生错误；MEDIA_ERR_SRC_NOT_SUPPORTED（数字值为4）表示媒体格式不被支持。

 

2) video元素独有的属性：

width	媒体数据的宽度（以像素为单位）
height	媒体数据的高度（以像素为单位）
poster	视频封面，当视频不可用时，使用该元素向用户展示一幅替代用的图片

 

4、常用方法：

play()	播放媒体数据，自动将元素的paused属性变为false
pause()	暂停播放媒体数据，自动将元素的paused属性变为true
load()	重新载入媒体数据进行播放，自动将元素的playbackRate属性值变为defaultPlaybackRate属性值，自动将元素的error值变为null，一般不用，除非是重新载入或动态记载视频
canPlayType()	测试浏览器是否支持指定的媒体类型，其参数与soruce元素的type参数相同，都用播放文件的MIME类型来指定。该方法返回3个可能值：空字符串：表示浏览器不支持此种媒体类型；maybe：表示浏览器可能支持此种媒体类型；probably：表示浏览器确定支持此种媒体类型

 

5、常用事件：

play	播放时触发
pause	暂停时触发
ended	播放结束后触发
abort	下载完全部媒体数据，终止下载时触发
error	错误时触发
loadstart	开始寻找媒体数据时触发
progress	正在获取媒体数据时触发

 

6、浏览器不支持video、audio时的处理（以video为例）：

1) 提示用户

2) 通过source元素设置多个类型的源文件

浏览器会按照类型声明的顺序判断，如果支持的不止一种，浏览器会选择支持的第一个来源。

3) 将flash作为后备的插入方法

注：通常情况下，IE 系列浏览器通过 ActiveX 插件使用 object元素引入 Flash，而其他浏览器则是通过相应的 NPAPI 插件使用 embed元素。