当前位置：首页 >

h5+js视频播放器控件

发布时间：2024/10/12 77 豆豆

生活随笔收集整理的这篇文章主要介绍了 h5+js视频播放器控件小编觉得挺不错的,现在分享给大家,帮大家做个参考.

　　　由于h5兼容性问题,很多浏览器对于插入视频播放的支持都大不相同。火狐支持的比较完整,谷歌则支持的不是很好,很多功能都不能实现,这就需要我们去自制一个播放界面，去兼容不同的浏览器。

　　　只插入一个视频时，浏览器中只会出现这样一个画面。只有单击右键才可以弹出菜单栏显示播放或者显示控件；

　　下面是一个自制播放控件的小练习，比较粗糙，很多功能有待完善。

　　制作中可能用到的一些常见属性和内容：

　　　　1.标签<video></video>

　　　　2.常用属性：

　　　　　autoplay--自动播放；

　　　　　controls--显示音乐控件；

　　　　　loop--实现循环播放；

　　　　　poster--视频加载未开始时播放的图片；

　　　　3.video支持多视频格式：（以此解决不同浏览器对视频格式的兼容问题）

</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视频播放器控件的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。