自定义video播放器的常用的事件。

window.onresize

这个事件主要用于当浏览器窗口发生改变时，实时获取video的width和height；
代码示例：

window.onresize=function() {
		//	控制窗口不小于800时，进行video的width和height的重新获取；
        if(document.documentElement.clientWidth>=800) {
          video.width = document.documentElement.clientWidth;
          video.height = document.documentElement.clientHeight - controler.offsetHeight;
        }
      }

video.play()和video.pause()

这两个方法主要用于播放暂停按钮的事件切换；
代码示例：

startOrpause.onclick=function(){
		//判断视频是否时暂停状态，注意暂停状态是：video.paused;要与video.pause()方法区别开来；
          if(video.paused) {
          	// 播放暂停按钮的精灵图切换
            startOrpause.classList.add('active');
            //	点击按钮后，让video播放；
            video.play()；
            timer = setInterval(move,100);
          }else {
          	// 播放暂停按钮的精灵图切换
            startOrpause.classList.remove('active');
            //	点击按钮让video暂停播放；
            video.pause();
            clearInterval(timer);
          }
        }

video.currentTime

获取video当前播放的进度时间；
这个property属性使用非常频繁；
比如当点击停止按钮时，设置video.currentTime；
当拖动播放进度条时，也需要实时获取它；

video.duration

获取当前视频文件的总共需要的播放时间。
当拖动或点击播放进度条时，关联进度条的长度和当前播放时间；

// 当前时间=总时间*(当前进度条拖动的距离/总共进度条的长度)
//	播放进度条点击事件
progress1.onclick=function(ev){
  ev = ev || event;
  video.currentTime = video.duration * ((ev.clientX - this.offsetLeft)/this.clientWidth);
  progressBtn1.style.left = progressBgc1.style.width = (progress1.clientWidth - progressBtn1.offsetWidth )* (video.currentTime / video.duration)+ 'px';
}

video.muted和video.volume

这两个property是在设置声音进度条和静音按钮上使用；
当设置video.muted=true时，video.volume的值并没有重置为0；

全屏按钮设置需要的方法

全屏是浏览器内部写好的，我们可以直接调用，但是不同的浏览器，API的名称不一样；
全屏可以是任意元素，比如div，img；
全屏兼容性写法：

//	判断是否全屏，isFullScreen是自定义的布尔值变量；
if(isFullScreen) {	
	//fullScreenSpan是获取的代表全屏的元素；
	// 全屏 ---> 不是全屏 --> remove
	fullScreenSpan.classList.remove("active");
	isFullScreen = false
	//	w3c标准的退出全屏方法；
	if (document.exitFullscreen) {  
	    document.exitFullscreen();  
	}  
	//	火狐的退出全屏方法
	else if (document.mozCancelFullScreen) {  
	    document.mozCancelFullScreen();  
	}  
	//	谷歌和webkit内核的退出全屏方法
	else if (document.webkitCancelFullScreen) {  
	    document.webkitCancelFullScreen();  
	}
	//	IE的退出全屏方法
	else if (document.msExitFullscreen) {
	      document.msExitFullscreen();
	}
} else {
	fullScreenSpan.classList.add("active");
	isFullScreen = true
	var docElm = document.documentElement;
	//	w3c标准的设置全屏方法；
	if (docElm.requestFullscreen) {  
	    docElm.requestFullscreen();  
	}
	//	火狐的退出设置全屏方法
	else if (docElm.mozRequestFullScreen) {  
	    docElm.mozRequestFullScreen();  
	}
	//	谷歌和webkit内核的设置全屏方法
	else if (docElm.webkitRequestFullScreen) {  
	    docElm.webkitRequestFullScreen();  
	}
	//IE11设置全屏方法
	else if (docElm.msRequestFullscreen) {
	  docElm.msRequestFullscreen();
	}
}

总时间duration的显示

获取总时间video.duration之前，需要事件监听，需要做兼容写法；

loadeddata	媒体的第一帧已经加载完毕。
suspend	在媒体资源加载终止时触发，这可能是因为下载已完成或因为其他原因暂停。

//  谷歌浏览器duration显示
 video.addEventListener('suspend',function(){
   durationTime.innerHTML=changeTimeStyle(video.duration);
 })
 //  火狐浏览器和IE的duration显示
 video.addEventListener('loadeddata',function(){
   durationTime.innerHTML=changeTimeStyle(video.duration);
 })