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视频播放器控件相关推荐

Android自定义一个播放器控件
介绍最近要使用播放器做一个简单的视频播放功能,开始学习VideoView,在横竖屏切换的时候碰到了点麻烦,不过在查阅资料后总算是解决了.在写VideoView播放视频时候定义控制的代码全写在Actv ...
html 控件坐标定位,利用JS改变html控件位置
8种机械键盘轴体对比本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选? 利用JS改变html控件位置我想写一个贪吃蛇小游戏,所以需要完成蛇的自动移动效果,这就需要改变html控件位置.本来我 ...
ocx js php,JS实现OCX控件的事件响应示例_javascript技巧
JS支持OCX控件的事件(event),当OCX控件定义的事件发生时,JS可以捕获该事件并对事件进行相应的处理. 个人理解,其实就是事件的响应由谁来完成,OCX控件自身肯定是可以实现的,JS提供的这种 ...
JS给html控件赋值
<html> <head><title> JS给html控件赋值 </title><script language="javascrip ...
JS判断页面控件是否可用
JS判断页面控件是否可用[原创] 2009-12-08 16:27 如果你看到这篇文章,甚至目前正愁于该问题的困扰,希望你把这篇文章看完.至少下次不会在这个问题上浪费时间. 近期做的项目中涉及到页面控 ...
video.js视频播放器进度条标记的功能实现
video.js视频播放器的使用 video.js视频播放器安装引入使用 video.js视频播放器接到个需求,需要一个视频播放页面,并且进度条需要在某个时间点打上标记.在网上找了一下,发现 ...
基于MediaPlayer的Android播放器控件
Android自身的播放控件在界面定制上不是很方便,而且没有针对播放流进行加工处理的相关接口.于是自己写了一个基于MediaPlayer的播放器控件.该控件有以下特点: 支持开发者对播放界面进行任意的 ...
js控制html控件显示隐藏和是否可用
利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: document.getElementB ...
ocx js php,JavaScript_JS实现OCX控件的事件响应示例，JS支持OCX控件的事件（event）， - phpStudy...
JS实现OCX控件的事件响应示例 JS支持OCX控件的事件(event),当OCX控件定义的事件发生时,JS可以捕获该事件并对事件进行相应的处理. 个人理解,其实就是事件的响应由谁来完成,OCX控件自 ...

h5+js视频播放器控件

h5+js视频播放器控件相关推荐

最新文章

热门文章