h5视频播放

　　　　　　　　　　h5视频播放

一直在写js原生的东西,感觉总是停滞不前,现在我们应该学一些h5新的特性,因为我们毕竟是从事前端的,下面我们一起来写一个视频播放吧

1,html

 <div class="video">
     <video src="video/oceans.ogv" controls></video><br>
     <div class="box">
         <div class="bar"></div>
     </div>
     <span id="te"></span>
     <ul id="list"></ul>
     <button>播放</button>
     <button>快进</button>
     <button>快退</button>
     <button>播放速度+</button>
     <button>播放速度-</button>
     <button>全屏</button>
     <button>重新加载</button>
     <button>关闭声音</button>
     <button>上一个</button>
     <button>下一个</button>
     <input type="range" max="100" min="0" value="30" id="ipt" onchange="control(8,this)">
     <span>X</span><span id="zero">0</span>
     </div>

2,css

     .box{width:624px;height:10px;border:1px solid #fafafa;background:#fafafa;}
     .bar{width:;height:10px;background:green;}
     li{list-style: none;display: inline-block;border:1px solid red;margin-right: 10px;}
     .video{width:800px;height:600px;}
      video{width:800px;height:400px;}

3,css

 //获取节点
     var V=document.querySelector("video");
     var btn=document.querySelectorAll("button");
     var ipt=document.querySelector("#ipt");
     var oSpan=document.querySelector("#zero");
     var bar=document.querySelector(".bar");
     var box=document.querySelector(".box");
     var time=document.querySelector("#te");
     var list=document.querySelector("#list");
     var a=0;
     var data=[{"url":"video/1.mp4","name":"低版本武侠剧"},
     {"url":"video/2.mp4","name":"中武侠成本剧"},
     {"url":"video/3.mp4","name":"万万木有想到"},
     {"url":"video/4.mp4","name":"大王叫我来巡山"}];
         //1 点击事件
     for(var i=0;i<btn.length;i++){
         btn[i].index=i;
         btn[i].onclick=function(){
             control(this.index);
         }
     }
     function control(state,node){
         var init=state;
         state=state==2?1:state;
         state=state==4?3:state;
         switch(state){
             case 0:
             if(btn[state].innerText=="播放"){
                 btn[state].innerText="暂停";
                 V.play();
             }else{
                 btn[state].innerText="播放";
                 V.pause();
             }
             break;
             case 1:
             if(init==1){
                 V.currentTime+=5;
             }else{
                 V.currentTime+=-5;
             }
             break;
             case 3:
             if(init==3){
                 V.playbackRate+=0.2;
                 V.playbackRate=V.playbackRate>1.9?1:V.playbackRate;
                 oSpan.innerText=(oSpan.innerText++)==4?1:oSpan.innerText;
             }else{
                 V.playbackRate+=-0.2;
                 V.playbackRate=V.playbackRate<0.2?1:V.playbackRate;
                 oSpan.innerText=(oSpan.innerText--)==-4?1:oSpan.innerText;
             }
             break;
             case 5:
             V.webkitRequestFullScreen();
             break;
             case 6:
             V.load();
             V.play();
             // console.log(V.load());
             break;
             case 7:
             if(V.muted){
                 V.muted=false;
                 btn[state].innerText="关闭声音";
             }else{
                 V.muted=true;
                 btn[state].innerText="打开声音";
             }
             break;
             case 8:
             V.volume=node.value/100;
             break;
         }
     }
     //视频切换
     for(var i=0;i<data.length;i++){
         list.innerHTML+="<li>"+data[i].name+"</li>";
     }
     var alist=document.querySelectorAll("li");
     for(var i=0;i<alist.length;i++){
         alist[i].index=i;
         alist[i].onclick=function(){
         a=this.index;
         V.src=data[a].url;
         V.play();
     }

 }
            btn[8].onclick=function(){
             V.src="";
          a--;
             if(a<0){
                 a=3;
             }
              V.src=data[a].url;
               V.play();
         }
         btn[9].onclick=function(){
             V.src="";
             a++;
             if(a>3){
                 a=0;
             }
             V.src=data[a].url;
              V.play();
         }
     //3 进度条
     setInterval(function(){
         var m=parseInt(V.duration/60);
         var s=parseInt(V.duration%60);
         var vm=parseInt(V.currentTime/60);
         var vs=parseInt(V.currentTime%60);
         time.innerHTML=vm+":"+vs+"/"+m+":"+s;
         bar.style.width=V.currentTime/V.duration*100+"%";
     },1000/24);
     box.onclick=function(e){
         var e=e||window.event;
         var vtime=e.offsetX/this.offsetWidth*V.duration;
         V.currentTime=vtime;
     }