h5+js视频播放器控件
生活随笔
收集整理的這篇文章主要介紹了
h5+js视频播放器控件
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
由于h5兼容性問題,很多瀏覽器對于插入視頻播放的支持都大不相同。火狐支持的比較完整,谷歌則支持的不是很好,很多功能都不能實現,這就需要我們去自制一個播放界面，去兼容不同的瀏覽器。
只插入一個視頻時，瀏覽器中只會出現這樣一個畫面。只有單擊右鍵才可以彈出菜單欄顯示播放或者顯示控件；
下面是一個自制播放控件的小練習，比較粗糙，很多功能有待完善。
制作中可能用到的一些常見屬性和內容：
1.標簽<video></video>
?
2.常用屬性：
autoplay--自動播放；
controls--顯示音樂控件；
loop--實現循環播放；
poster--視頻加載未開始時播放的圖片；
?
3.video支持多視頻格式：（以此解決不同瀏覽器對視頻格式的兼容問題）
<video poster="img/oceans-clip.png">
<source src="video/oceans-clip.mp4"></source>?
<source src="video/oceans-clip.webm"></source>?
<source src="video/oceans-clip.ogv"></source>?
</video>
?
4.獲取當前視頻播放的狀態：
playbtn(對象).οnclick=function(){
if(video.paused){
video.play();
}else{
video.pause();
}
??}
5.視頻的一些特殊事件：
1）當視頻可以播放獲取總時間：
vdideo.οncanplay=function(){
console.log(video.duration);
}
?
2）視頻播放時，獲取實時時間：
video.ontimedate=function(){
console.log(video.currentTime);
}
?
3）視頻結束：
video.οnended=function(){
}
?
?
?
實現后的樣式：
?
代碼如下，希望大家提出寶貴意見。
1 <!DOCTYPE html>2 <html>3 <head>4 <meta charset="UTF-8">5 <title>視頻</title>6 <style type="text/css">7 input,body,div{8 margin: 0;9 padding: 0;10 }11 input{12 display: inline-block;13 width: 30px;14 height: 30px;15 background-size: 30px;16 float: left; 17 }18 #control{19 width: 620px;20 height: 30px;21 background-color: #222;22 margin-top: -8px;23 padding: 5px 10px;24 clear: both;25 /*position: absolute;26 top:300px27 left: 100px;*/28 }29 #jdt{30 margin: 10px 5px 0 5px;31 width: 400px;32 height: 10px;33 float: left; 34 }35 span {36 display: inline-block;37 color: #fff;38 float: left;39 margin: 6px 5px 0 5px;40 font: 14px "微軟雅黑"; 41 }42 #box1{43 margin:50px auto;44 width: 615px;45 height: 305pc;46 /*position: relative;*/47 }48 #playbnt{49 50 }51 </style>52 </head>53 <body>54 <div id="box1">55 <video poster="img/oceans-clip.png">56 <source src="video/oceans-clip.mp4"></source>57 <source src="video/oceans-clip.webm"></source>58 <source src="video/oceans-clip.ogv"></source>59 </video>60 <div id="control">61 <input type="image" value="" id="playbnt" src="img/on.png"/>62 <meter id="jdt" min="0" max="100"></meter>63 <span id="timeone">00:00:00</span>64 <span>/</span>65 <span id="timeall">00:00:00</span>66 <input type="image" value="" id="fullbnt" src="img/expand.jpg"/>67 </div>68 </div>69 <script type="text/javascript">70 var playbnt=document.getElementById("playbnt");71 var fullbnt=document.getElementById("fullbnt");72 var video=document.querySelector("video");73 var box1=document.getElementById("box1");74 //播放按鈕75 playbnt.onclick=function(){76 if(video.paused){77 video.play();78 playbnt.src="img/pause.png";79 }else{80 video.pause();81 playbnt.src="img/on.png";82 }83 }84 //點擊進入全屏（注意兼容）85 fullbnt.onclick=function(){86 if(document.fullscreenElement||document.webkitFullscreenElement||document.mozCancelFullScreen||document.msFullscreenElement){87 if(document.cancelFullscreen){88 document.cancelFullscreen();89 }else if(document.webkitCancelFullscreen){90 document.webkitCancelFullscreen();91 }else if(document.mozCancelFullScreen){92 document.mozCancelFullScreen();93 }else if(document.msExitFullscreen){94 document.msExitFullscreen();95 }96 }else{97 if(video.requestFullscreen){98 video.requestFullscreen();99 }else if(video.webkitRequestFullscreen){ 100 video.webkitRequestFullscreen(); 101 }else if(video.mozRequestFullScreen){ 102 video.mozRequestFullScreen(); 103 }else if(video.msRequestFullscreen){ 104 video.msRequestFullscreen(); 105 } 106 } 107 } 108 //實時獲取時間 109 var timh=0; 110 var timm=0; 111 var tims=0; 112 var all=null; 113 var one=null; 114 var timeone=document.getElementById("timeone"); 115 var jdt=document.getElementById("jdt"); 116 video.ontimeupdate=function(){ 117 var t=Math.floor(video.currentTime); 118 ont=t; 119 timh=t/3600; 120 timm=t%3600/60; 121 tims=t%60; 122 // console.log(t); 123 if(t<10){ 124 timeone.innerHTML="00:00:0"+tims; 125 }else if(10<t<60){ 126 timeone.innerHTML="00:00:"+tims; 127 }else if(60<t<600){ 128 timeone.innerHTML="00:0"+timm+":"+tims; 129 } 130 else if(600<t<3600){ 131 timeone.innerHTML="00:"+timm+":"+tims; 132 }else if(3600<t<36000){ 133 timeone.innerHTML="0"+timh+":"+timm+":"+tims; 134 }else if(t>36000){ 135 timeone.innerHTML=timh+":"+timm+":"+tims; 136 } 137 138 jdt.value=(t/all)*100; 139 } 140 //獲取總時間 141 video.oncanplay=function(){ 142 var t=Math.floor(video.duration); 143 all=t 144 timh=t/3600; 145 timm=t%3600/60; 146 tims=t%60; 147 // console.log(t); 148 if(t<10){ 149 timeall.innerHTML="00:00:0"+tims; 150 }else if(10<t<60){ 151 timeall.innerHTML="00:00:"+tims; 152 }else if(60<t<600){ 153 timeall.innerHTML="00:0"+timm+":"+tims; 154 } 155 else if(600<t<3600){ 156 timeall.innerHTML="00:"+timm+":"+tims; 157 }else if(3600<t<36000){ 158 timeall.innerHTML="0"+timh+":"+timm+":"+tims; 159 }else if(t>36000){ 160 timeall.innerHTML=timh+":"+timm+":"+tims; 161 } 162 } 163 164 //視頻結束時進度條 165 video.onended=function(){ 166 playbnt.src="img/on.png"; 167 timeone.innerHTML="00:00:00"; 168 video.currentTime=0; 169 } 170 //單擊進度條 171 var jdtl=jdt.offsetLeft; 172 var jdtw=jdt.offsetWidth; 173 jdt.onclick=function(event){ 174 // console.log(all); 175 var onex=Math.floor((event.clientX-jdtl));//點擊坐標到進度條左端距離 176 console.log("鼠標單擊坐標:"+event.clientX); 177 // console.log(jdtl); 178 var allx=Math.floor(jdtw); //進度條的寬度 179 var x=onex/allx; 180 console.log("單擊坐標-left="+onex); 181 console.log("進度條寬度="+allx);//百分比 182 console.log("百分比="+x); 183 video.currentTime=Math.floor(all*x); //實時時間=總時長*百分比 184 console.log("實時時間="+all*x); 185 } 186 187 </script> 188 </body> 189 </html>?
附:css畫play按鈕
//less .play {width: 68px;height: 68px;border-radius: 34px;-webkit-border-radius: 34px;-moz-border-radius: 34px;border: solid 2px rgba(251, 251, 251, 1);position: absolute;top: 44%;left: 50%;margin: -17px 0 0 -27px;-webkit-transition: all 200ms linear;cursor: pointer;i {margin: 20px 27px 27px 26px;display: inline-block;border-width: 12px 0px 12px 20px;border-color: transparent #fff transparent #fff;border-style: solid;width: 0;height: 0;} }?
總結
以上是生活随笔為你收集整理的h5+js视频播放器控件的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 汽车保险中的诚实信用是什么？
- 下一篇： H5_canvas与svg