1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <!--插入播放按钮得文字图标格式（具体使用方法可以百度http://fontawesome.dashgame.com/）--> 7 <link rel="stylesheet" href="../css/font-awesome.css"> 8 <!--页面结构设置得样式--> 9 <style> 10 body { 11 padding: 0; 12 margin: 0; 13 font-family: 'microsoft yahei', 'Helvetica', simhei, simsun, sans-serif; 14 background-color: #F7F7F7; 15 } 16 17 a { 18 text-decoration: none; 19 } 20 .playerTitle{ 21 width:100%; 22 margin: 0 auto; 23 line-height:100px; 24 font-size: 40px; 25 text-align: center; 26 } 27 .player{ 28 width: 720px; 29 height: 360px; 30 margin: 0 auto; 31 background: url("../images/loading.gif") center no-repeat; 32 background-size: cover; 33 position: relative; 34 } 35 video{ 36 height:100%; 37 margin: 0 auto; 38 display: none; 39 } 40 .controls { 41 width: 720px; 42 height: 40px; 43 position: absolute; 44 left: 0px; 45 bottom: -40px; 46 background-color: #000; 47 } 48 .controls > .switch{ 49 width: 20px; 50 height: 20px; 51 display: block; 52 font-size: 20px; 53 color: #fff; 54 position: absolute; 55 left: 10px; 56 top: 10px; 57 } 58 .controls > .expand{ 59 width: 20px; 60 height: 20px; 61 display: block; 62 font-size: 20px; 63 color: #fff; 64 position: absolute; 65 right: 10px; 66 top: 10px; 67 } 68 .controls > .progress{ 69 width: 430px; 70 height: 10px; 71 position: absolute; 72 left:40px; 73 bottom:15px; 74 background-color: #555; 75 } 76 .controls > .progress > .bar{ 77 width:100%; 78 height:100%; 79 border-radius: 3px; 80 cursor: pointer; 81 position: absolute; 82 left: 0; 83 top: 0; 84 opacity: 0; 85 z-index: 999; 86 } 87 .controls > .progress > .loaded{ 88 width:60%; 89 height:100%; 90 background-color: #999; 91 border-radius: 3px; 92 position: absolute; 93 left: 0; 94 top: 0; 95 z-index: 2; 96 } 97 .controls > .progress > .elapse{ 98 width:0%; 99 height:100%; 100 background-color: #fff; 101 border-radius: 3px; 102 position: absolute; 103 left: 0; 104 top: 0; 105 z-index: 3; 106 } 107 .controls > .time{ 108 height: 20px; 109 position: absolute; 110 left:490px; 111 top: 10px; 112 color: #fff; 113 font-size: 14px; 114 } 115 </style> 116 </head> 117 <body> 118 <h3 class="playerTitle">视频播放器</h3> 119 <div class="player"> 120 <video src="../mp4/chrome.mp4"></video> 121 <div class="controls"> 122 <!--javascript:; a链接点击不让跳转 fa 库名fa-play 文字名 文字库使用方法--> 123 <a href="javascript:;" class="switch fa fa-play"></a> 124 <a href="javascript:;" class="expand fa fa-expand"></a> 125 <div class="progress"> 126 <!--点击的透明层，效果是点击改变进度条和播放得当前时间--> 127 <div class="bar"></div> 128 <!--缓冲进度条（由于是本地视频加载比较快所以就没法感受到没写0.0）--> 129 <div class="loaded"></div> 130 <!--播放进度条--> 131 <div class="elapse"></div> 132 </div> 133 <div class="time"> 134 <!--播放当前时间--> 135 <span class="currentTime">00:00:00</span> 136 137 <!--视频时间总长度--> 138 <span class="totalTime">00:00:00</span> 139 </div> 140 </div> 141 </div> 142 <!--基于jquery的文件引入--> 143 <script src="./jquery.min.js"></script> 144 <script> 145 /*通过jq来实现功能*/ 146 $(function(){ 147 /*1.获取播放器 对象的转换,把jquery转换为dom对象*/ 148 var video=$("video")[0]; 149 150 /*2.实现播放与暂停*/ 151 $(".switch").click(function(){ 152 /*实现播放与暂停的切换：如果是暂停>>播放 ，如果是播放 >> 暂停*/ 153 if(video.paused){ 154 video.play(); 155 /*移除暂停样式，添加播放样式*/ 156 } 157 else{ 158 video.pause(); 159 /*移除播放样式，添加暂停样式*/ 160 } 161 /*设置标签的样式 fa-pause:暂停 fa-play：播放*/ 162 $(this).toggleClass("fa-play fa-pause"); 163 }); 164 165 /*3.实现全屏操作*/ 166 $(".expand").click(function(){ 167 /*全屏>>不同浏览器需要添加不同的前缀>>能力测试*/ 168 if(video.requestFullScreen){ 169 video.requestFullScreen(); 170 } 171 else if(video.webkitRequestFullScreen){ 172 video.webkitRequestFullScreen(); 173 } 174 else if(video.mozRequestFullScreen){ 175 video.mozRequestFullScreen(); 176 } 177 else if(video.msRequestFullScreen){ 178 video.msRequestFullScreen(); 179 } 180 }); 181 182 /*4.实现播放业务逻辑：当视频文件可以播放时触发下面的事件*/ 183 video.oncanplay=function(){ 184 setTimeout(function(){ 185 /*1.将视频文件设置为显示*/ 186 video.style.display="block"; 187 /*2.获取当前视频文件的总时长(以秒做为单位，同时获取了小数值)，计算出时分秒*/ 188 var total=video.duration; //01:01:40 00:00:36 189 /*3.计算时分少 60*60=3600 190 * 3700:3700/3600 191 * 3700:3700%3600 >> 100 /60*/ 192 /*var hour=Math.floor(total/3600); 193 /!*补0操作*!/ 194 hour=hour<10?"0"+hour:hour; 195 var minute=Math.floor(total%3600/60); 196 minute=minute<10?"0"+minute:minute; 197 var second=Math.floor(total%60); 198 second=second<10?"0"+second:second;*/ 199 var result=getResult(total) 200 /*4.将计算结果展示在指定的dom元素中*/ 201 $(".totalTime").html(result); 202 },2000); 203 } 204 205 /*通过总时长计算出时分秒*/ 206 function getResult(time){ 207 var hour=Math.floor(time/3600); 208 /*补0操作*/ 209 hour=hour<10?"0"+hour:hour; 210 var minute=Math.floor(time%3600/60); 211 minute=minute<10?"0"+minute:minute; 212 var second=Math.floor(time%60); 213 second=second<10?"0"+second:second; 214 /*返回结果*/ 215 return hour+":"+minute+":"+second; 216 } 217 218 /*5.实现播放过程中的业务逻辑，当视频播放时会触发ontimeupdate事件 219 * 如果修改currentTime值也会触发这个事件，说白了，只要currenTime值变化，就会触发这个事件*/ 220 video.ontimeupdate=function(){ 221 /*1.获取当前的播放时间*/ 222 var current=video.currentTime; 223 /*2.计算出时分秒*/ 224 var result=getResult(current); 225 /*3.将结果展示在指定的dom元素中*/ 226 $(".currentTime").html(result); 227 /*4.设置当前播放进度条样式 0.12>>0.12*100=12+%>12%*/ 228 var percent=current/video.duration*100+"%"; 229 $(".elapse").css("width",percent); 230 } 231 232 /*6.实现视频的跳播*/ 233 $(".bar").click(function(e){ 234 /*1.获取当前鼠标相对于父元素的left值--偏移值*/ 235 var offset= e.offsetX; 236 /*2.计算偏移值相对总父元素总宽度的比例*/ 237 var percent=offset/$(this).width(); 238 /*3.计算这个位置对应的视频进度值*/ 239 var current=percent*video.duration; 240 /*4.设置当前视频的currentTime*/ 241 video.currentTime=current; 242 }); 243 244 /*7.播放完毕之后，重置播放器的状态*/ 245 video.onended=function(){ 246 // 当前播放时间清零 247 video.currentTime=0; 248 // 播放按钮的事件由暂停替换位播放 249 $(".switch").removeClass("fa-pause").addClass("fa-play"); 250 } 251 }); 252 </script> 253 </body> 254 </html>