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 }