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:0;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;
    }