h5 多媒体音频和视频

在HTML5中新加的video和radio,也对应有方法、属性和事件

以video标签为例

`<video id='video' controls = “controls”>`

// 为兼容不同格式的视频
   <source src=”1.mp4” type=”video/mp4” />
   <source src = “2.ogg” type=”video/ogg” />
   <source src=”3.webm” type=”video/webm” />
</video>

这里的controls（值为true、false） 属性是指定浏览器显示播放控件，包含播放，暂停按钮音量控制等。

var video = document.getElementById('video');

对应的play()和pause()方法可以用来控制视频的播放和暂停

video.play(),video.pause();

<video>和<radio>都具有完善的JavaScript接口，共有一些属性，通过这些属性可以知道媒体当前以及设置属性的状态：

currentTime属性可以用来设置播放器跳转到指定播放时间（单位是秒）；

volume属性表示播放的音量值介于0-1之间，如果将muted属性设置为true则会进入静音模式，设置为false则恢复之前指定的音量继续播放；

playbackRate属性可以设置媒体的播放速度，1.0即为正常速度，大于1则表示“快进”，0-1之间表示“慢放”。负值表示回放（浏览器未能实现）；

autoplay（值为true、false）属性设置视频是否自动播放；

loop（值为true、false）属性设置视频是否循环播放；

preload属性指定媒体开始播放前是否需要预加载。

在媒体元素中还有一些只读属性，用来查询媒体状态：

paused属性用来判断播放器是否暂停；

如果播放器正在跳转到一个新的播放点seeking属性值即为true；

ended属性用来判断播放的媒体是否播放结束并停下来，如果loop属性设置为true循环播放则ended值永不为真；

duration属性指定媒体总时长（单位是秒），如果媒体元数据未载入时查询返回NaN，对于直播无限时长的流媒体而言返回infinity；

initialTime属性指定媒体开始的时间（单位是秒），在设置currentTime属性的时候其值不能小于initialTime的值；

played属性返回已经播放的时间段，duffered属性返回当前已经缓冲的时间段，seekable属性返回当前播放器需要跳到的时间段；

played、buffered、seekable都是TimeRanges对象，每个对象都有一个length属性以及start(),end()方法，length表示当前的时间段，start(),end()分别返回当前时间段的起始时间和结束时间，对于一段连续时间段来说一般使用start(0),end(0);

var percent_loaded = Math.floor(video.buffered.end(0) / video.duration * 100);

这里的percent_loaded 就可以表示当前缓冲内容的百分比。

媒体元素有自身的相关事件，我们可以用addEventListener()方法来注册处理程序函数：

// 监听媒体播放时间,当媒体播放时间改变时出发timeupdate事件

video.addEventListener('timeupdate',function(){

console.log('媒体播放时间改变');

})

列出媒体元素相关事件：

abort下载中断

canplay可以播放时；readyState值为2

canplaythrough播放可继续readyState值为3

durationchange duration的值发生变化

emptied网络连接关闭

empty发生错组织媒体下载

ended媒体播放到末尾，播放停止

error下载期间发生网络错误

loadstart下载已经开始

pause播放已暂停

play媒体收到指令开始播放

playing媒体已经实际播放

progress正在下载

ratechange媒体播放的速度改变

seeked搜索结束

seeking正移动到新的位置

timeupdate currentTime被以不合理或意外的方式更新

volumechange volume或muted的值发生变化

waiting 暂停播放，等待下载更多数据

实现全屏以及退出全屏：

全屏

if(video.requestFullscreen){
                video.requestFullscreen();
            }else if (video.mozRequestFullScreen) {
                video.mozRequestFullScreen();
            }else if (video.webkitRequestFullScreen) {
                video.webkitRequestFullScreen();
            }

}

退出全屏

var doc = document;

if(doc .exitFullscreen){
                doc .exitFullscreen();
            }else if (doc .mozCancelFullScreen) {
                doc .mozCancelFullScreen();
            }else if (doc .webkitCancelFullScreen) {
                doc .webkitCancelFullScreen();
            }

}