走进HTML5开发（3）——自定义html5播放控件

    Html5 Video是现在html5最流行的功能之一,得到了大多数最新版本的浏览器支持。但是不同的浏览器提供了不同的原生态浏览器视频空间，得到的默认外观并不一样。本文描述了使用javascript、css来自定义媒体播放器的步骤，使媒体元素可以在各浏览器下有相同的样式，同时加深理解HTML5媒体元素API的使用。

传统的web设计，要在网页中嵌入视频的最可靠最常用的办法是使用Flash，通过使用object和embed标签，就可以通过浏览器播放swf等格式的视频文件，但是前提是浏览器必须安装第三方插件：Adobe Flash Player。 HTML5的到来改变了这种情况，WEB开发者只需要使用video标签就可以轻松加载视频文件，而不需要任何第三方插件。

如上图实现只需写如下代码：

<div>
        <video id="myVideo" controls poster="2.BMP" width="620 " height="460" >
        <source src="1.mp4" type="video.mp4" />
</div>

下面开始自定义html5多媒体播放控件

首先开始布局：

<div id="box">
	<!-- 播放暂停按钮 -->
	<div id="play" class="play"></div>
	<!-- 进度条 -->
	<div id="progress">
		<div id="control"></div>
		<span id="bar"></span>
	</div>
	<!-- 喇叭-->
	<div id="sound" class="soundon"></div>
	<!-- 声音控制 -->
	<div id="volume">
		<div id="volume-control"></div>
		<span id="volume-bar"></span>
	</div>
	<div id="full"></div>
</div>

获取对象

在JavaScript中我们使用getElementById(”)来获取相关video对象

    window.onload=function  () {
  	// box对象
  	var box=document.getElementById("box");
  	// 播放按钮
  	var play=document.getElementById("play");
        // 视频对象
  	var video=document.getElementById("video");
  	//进度条
  	var progress=document.getElementById("progress");
  	//灰色进度条
  	var bar=document.getElementById("bar");
  	//控制按钮
  	var control=document.getElementById("control");
  	//喇叭
  	var sound=document.getElementById("sound")

播放视频进度条

     //进度条
    video.addEventListener("timeupdate",function  () {
			  var scales=video.currentTime/video.duration;
              bar.style.width=progress.offsetWidth*scales+"px";
			  control.style.left=progress.offsetWidth*scales+"px";
			},false);
    //进度条推拽
    control.onmousedown=function(e){
    	video.pause();
    	document.onmousemove=function(e){
    		var leftv=e.clientX-progress.offsetLeft-box.offsetLeft;
    		if(leftv<=0){
    			leftv=0;
    		}
    		if(leftv>=progress.offsetWidth)
    		{
    			leftv=progress.offsetWidth;
    		}
    		control.style.left=leftv+"px";
    	}
    	document.onmouseup=function(){
    		var scales=control.offsetLeft/progress.offsetWidth;
    		video.currentTime=video.duration*scales;
    		video.play();
    		document.onmousemove=null;
    		document.onmouseup=null;
    	}
    }

Video Play/Pause Controls 播放/暂停 按钮

   // 播放/暂停控制方法
    play.onclick=function(){
    	if(video.paused){
    		play.className="pause";
    		video.play();
    	}
       else{
    		play.className="play";
    		video.pause();
    	}
    }

设计播放按钮与声音按钮

//播放按钮
.play{
	width:0px;
	height:0px;
	border-left:16px solid #fff;
	border-top:12px solid  rgba(255,255,255,0);
	border-bottom:12px solid rgba(255,255,255,0);
	margin-left: 10px;
	margin-top: 7px;
	float: left;
	cursor:pointer;
}
.pause{
	width: 6px;
	height: 18px;
	border-left: 4px solid #fff;
	border-right: 4px solid #fff;
	float:left;
	margin-top: 7px;
	margin-left: 10px;
	cursor:pointer;
}
//声音按钮
.soundon{
	width:10px;
	height:6px;
	border-right:10px solid #fff;
	border-top:9px solid  rgba(255,255,255,0);
	border-bottom:9px solid rgba(255,255,255,0);
	margin-left: 10px;
	margin-top: 7px;
	float: left;
	cursor:pointer;
}
.soundoff{
	width:10px;
	height:6px;
	border-right:10px solid #000;
	border-top:9px solid  rgba(255,255,255,0);
	border-bottom:9px solid rgba(255,255,255,0);
	margin-left: 10px;
	margin-top: 7px;
	float: left;
	cursor:pointer;
}

全屏播放

    //全屏
    var full=document.getElementById("full")
    full.addEventListener("click",function(){
      // video.mozRequestFullScreen()//火狐浏览器
       video.webkitRequestFullScreen()//谷歌浏览器
    ｝

html5中<video>标签的详细属性说明如下：