H5新特性-视频,音频和HTMLMediaElement

（1）浏览器支持的视频格式：　

浏览器	MP4	WebM	Ogg
IE9+	+	-	-
Chrome	+	+	+
Firefox	-	+	+
Safari	+	-	-
Opera	-	+	+

标签：

// 简写
<video src="url"  width="宽" height="高">
      视频格式不支持
</video>

// 标准方式
<video src="url" width="宽" height="高">
　　<source src="视频url地址"/>

　　<source src="视频url地址"/>

　　...
　　视频格式不支持 
</video>

属性

（1）autoplay：是否自动播放，布尔值（与muted属性一起用）

（2）muted：是否静音播放，布尔值

（3）controls：控制是否显示视频的控制按钮

（4）poster：海报图片URL（与autoplay冲突，需去掉autoplay）

（5）preload：预载入　

　　　　none 不缓存

　　　　metadata 播放前只加载视频的时长，宽度，高度等信息

　　　　auto 默认值，浏览器尽可能的下载视频

（2）音频

浏览器支持的音频格式：

浏览器	MP3	WAV	Ogg
IE	+	-	-
Chrome	+	+	+
Firefox	-	+	+
Safari	+	+	-
Opera	-	+	+

//简写
<audio src="url">
　　浏览器不支持的音频格式
</audio>

//标准
<audio>

</audio>

属性：同video（无poster）

（3）HTMLMediaElement

HTMLMediaElement 提供对于web页面中的音频和视频通过JavaScript处理的能力。

HTMLAudioElement 音频处理

HTMLVideoElement 视频处理

在通过JavaScript对于音频/视频进行控制时，首先要通过JavaScript先行获取到该音频/视频对象，然后再进行相关的控制操作，如：

autoplay

autoplay属性用于控制多媒体（指音频和视频）是否自动播放，其语法结构是

//获取多媒体对象的autoplay属性
variable = HTMLMediaElement.autoplay
//设置
HTMLMediaElement.autoplay = bool value

volume

volume属性用于获取/设置媒体的音量，其值从0.0（表示静音）~1.0（表示最大音量）, 其语法结构是：

//获取
variable = HTMLMediaElement.volume
//设置
HTMLMediaElement.volume = double value

paused

paused属性用于获取媒体对象是否正在暂停，其语法结构是：

boolean HTMLElement.paused

playbackRate

playbackRate属性用于获取/设置媒体的播放速度，1.0表示正常的播放速度；如果值小于1.0，则表示比正常速度慢，否则将正常速度快，其语法结构是：

//获取
variable = HTMLMediaElement.playbackRate

//设置
HTMLMediaElement.playbackRate = double value

duration

variable = HTMLMediaElemet.duration

duration属性用于获取媒体的总长度时间，单位为秒，其语法结构是：

如果媒体不可用，返回值为0

如果媒体可用，但时间长度未知，返回值为NaN

如果媒体以stream(数据流)形式传输并且没有预定长度时，返回Inf

currentTime

currentTime属性用于获取/设置媒体当前播放时间，单位为秒，其语法结构是：

//获取媒体当前播放时间
variable = HTMLMediaElement.currentTime
//设置媒体当前播放时间
HTMLMediaElement.currentTime = double value

src

src属性用于获取/设置媒体对象的URL地址，其语法结构是：

//设置
HTMLMediaElement.src = string value
//获取
variable = HTMLMediaElement.src

（3.1）方法

play()

play()方法于实现媒体的播放，其语法结构是：

HTMLMediaElement.play()

pause()

pause()方法用于实现媒体的暂停，其语法结构同play()方法

（3.2）事件

play()

在媒体播放时触发，其语法结构：

HTMLMediaElement.addEventListener('play',function(){
　　...
})

pause()

在媒体暂停时触发：

HTMLMediaElement.addEventListener('pause',function(){
　　...
})

canplaythrough()

在媒体的readyState变成can_play_through时触发，语法结构：

HTMLMediaElement.addEventListener('canplaythrough',function(){
　　...
})

timeupdate()

在媒体元素的currentTime属性发生变化的时候触发（实时显示当前播放事件）

HTMLMediaElement.addEventListener('timeupdate',function(){
　　...
})