由于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>
附:css画play按钮
//less
.play {
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- 12px 0px 12px 20px;
border-color: transparent #fff transparent #fff;
border-style: solid;
0;
height: 0;
}
}