H5 多媒体元素 video 和 radio

在HTML5中新加的video和radio,也对应有方法、属性和事件
以video标签为例：

为兼容不同格式的视频

这里的controls（值为true、false） 属性是指定浏览器显示播放控件，包含播放，暂停按钮音量控制等。
var video = document.getElementById('video');
下面列出常用方法和属性

控制视频的播放和暂停

对应的play()和pause()方法
video.play();
video.pause();

判断视频是否处于暂停状态

video.paused
属性值为 true/false

获取视频总时长

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

设置播放器跳转到指定播放时间

video.currentTime
单位是秒（s）

指定媒体开始的时间

video.initialTime
单位是秒（s）
在设置currentTime属性的时候其值不能小于initialTime的值；

视频音量调节

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

设置媒体的播放速度

video.playbackRate
1.0即为正常速度，大于1则表示“快进”，0-1之间表示“慢放”

媒体播放前是否需要预加载

video.preload
属性值为true/false

设置视频是否自动播放

video.autoplay
属性值为true/false

设置视频是否循环播放

video.loop
属性值为 true/false

判断视频播放是否结束

video.ended
属性值为 true/false
如果loop属性设置为true循环播放则ended值永不为真

监听媒体播放

当媒体播放时间改变时出发timeupdate事件

video.addEventListener('timeupdate',function(){
   console.log('媒体播放时间改变');
  // 这里根据视频播放进行操作
});

计算视频已经缓冲时间

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 就可以表示当前缓冲内容的百分比

视频全屏

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();
}

值得注意的是各大浏览器对全屏实现效果不统一，有点坑

还有更多方法属性不多说，查阅 高程 和 js犀牛书