h5视频播放

Posted 2020-09-14 蔡秀芳

　　　　　　　　　　h5视频播放

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

1,html

 1 <div class="video">
 2     <video src="video/oceans.ogv" controls></video><br>
 3     <div class="box">
 4         <div class="bar"></div>
 5     </div>
 6     <span id="te"></span>
 7     <ul id="list"></ul>
 8     <button>播放</button>
 9     <button>快进</button>
10     <button>快退</button>
11     <button>播放速度+</button>
12     <button>播放速度-</button>
13     <button>全屏</button>
14     <button>重新加载</button>
15     <button>关闭声音</button>
16     <button>上一个</button>
17     <button>下一个</button>
18     <input type="range" max="100" min="0" value="30" id="ipt" onchange="control(8,this)">
19     <span>X</span><span id="zero">0</span>
20     </div>

2,css

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

3,css

  1 //获取节点
  2     var V=document.querySelector("video");
  3     var btn=document.querySelectorAll("button");
  4     var ipt=document.querySelector("#ipt");
  5     var oSpan=document.querySelector("#zero");
  6     var bar=document.querySelector(".bar");
  7     var box=document.querySelector(".box");
  8     var time=document.querySelector("#te");
  9     var list=document.querySelector("#list");
 10     var a=0;
 11     var data=[{"url":"video/1.mp4","name":"低版本武侠剧"},
 12     {"url":"video/2.mp4","name":"中武侠成本剧"},
 13     {"url":"video/3.mp4","name":"万万木有想到"},
 14     {"url":"video/4.mp4","name":"大王叫我来巡山"}];
 15         //1 点击事件
 16     for(var i=0;i<btn.length;i++){
 17         btn[i].index=i;
 18         btn[i].onclick=function(){
 19             control(this.index);
 20         }
 21     }
 22     function control(state,node){
 23         var init=state;
 24         state=state==2?1:state;
 25         state=state==4?3:state;
 26         switch(state){
 27             case 0:
 28             if(btn[state].innerText=="播放"){
 29                 btn[state].innerText="暂停";
 30                 V.play();
 31             }else{
 32                 btn[state].innerText="播放";
 33                 V.pause();
 34             }
 35             break;
 36             case 1:
 37             if(init==1){
 38                 V.currentTime+=5;
 39             }else{
 40                 V.currentTime+=-5;
 41             }
 42             break;
 43             case 3:
 44             if(init==3){
 45                 V.playbackRate+=0.2;
 46                 V.playbackRate=V.playbackRate>1.9?1:V.playbackRate;
 47                 oSpan.innerText=(oSpan.innerText++)==4?1:oSpan.innerText;
 48             }else{
 49                 V.playbackRate+=-0.2;
 50                 V.playbackRate=V.playbackRate<0.2?1:V.playbackRate;
 51                 oSpan.innerText=(oSpan.innerText--)==-4?1:oSpan.innerText;
 52             }
 53             break;
 54             case 5:
 55             V.webkitRequestFullScreen();
 56             break;
 57             case 6:
 58             V.load();
 59             V.play();
 60             // console.log(V.load());
 61             break;
 62             case 7:
 63             if(V.muted){
 64                 V.muted=false;
 65                 btn[state].innerText="关闭声音";
 66             }else{
 67                 V.muted=true;
 68                 btn[state].innerText="打开声音";
 69             }
 70             break;
 71             case 8:
 72             V.volume=node.value/100;
 73             break;
 74         }
 75     }
 76     //视频切换
 77     for(var i=0;i<data.length;i++){
 78         list.innerHTML+="<li>"+data[i].name+"</li>";
 79     }
 80     var alist=document.querySelectorAll("li");
 81     for(var i=0;i<alist.length;i++){
 82         alist[i].index=i;
 83         alist[i].onclick=function(){
 84         a=this.index;
 85         V.src=data[a].url;
 86         V.play();
 87     }
 88     
 89 }
 90            btn[8].onclick=function(){
 91             V.src="";
 92          a--;
 93             if(a<0){
 94                 a=3;
 95             }
 96              V.src=data[a].url;
 97               V.play();
 98         }
 99         btn[9].onclick=function(){
100             V.src="";
101             a++;
102             if(a>3){
103                 a=0;
104             }
105             V.src=data[a].url;
106              V.play();
107         }
108     //3 进度条
109     setInterval(function(){
110         var m=parseInt(V.duration/60);
111         var s=parseInt(V.duration%60);
112         var vm=parseInt(V.currentTime/60);
113         var vs=parseInt(V.currentTime%60);
114         time.innerHTML=vm+":"+vs+"/"+m+":"+s;
115         bar.style.width=V.currentTime/V.duration*100+"%";
116     },1000/24);
117     box.onclick=function(e){
118         var e=e||window.event;
119         var vtime=e.offsetX/this.offsetWidth*V.duration;
120         V.currentTime=vtime;
121     }