h5+js視訊播放器控制元件
阿新 • • 發佈：2018-12-12
由於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(物件).onclick=function(){
if(video.paused){
video.play();
}else{
video.pause();
}
}
5.視訊的一些特殊事件：
1）當視訊可以播放獲取總時間：
vdideo.oncanplay=function(){
console.log(video.duration);
}
2）視訊播放時，獲取實時時間：
video.ontimedate=function(){
console.log(video.currentTime);
}
3）視訊結束：
video.onended=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:300px 27 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>