1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> 7 <style> 8 * { 9 margin: 0; 10 padding: 0; 11 } 12 13 .container { 14 width: 600px; 15 margin: 50px auto; 16 position: relative; 17 font-size: 0; 18 overflow: hidden; 19 } 20 21 .container > .top { 22 position: absolute; 23 top: 0; 24 left: 0; 25 color: #FFF; 26 width: 600px; 27 height: 30px; 28 line-height: 30px; 29 text-align: center; 30 font-size: 18px; 31 } 32 33 .container > .bottom { 34 position: absolute; 35 bottom: 0; 36 left: 0; 37 width: 600px; 38 height: 50px; 39 line-height: 50px; 40 color: #FFF; 41 font-size: 14px; 42 background: #000; 43 opacity: 0.8; 44 } 45 46 .container > .bottom > .progress { 47 position: absolute; 48 top: 0; 49 left: 10px; 50 width: 480px; 51 height: 6px; 52 border-radius: 3px; 53 background: #666; 54 cursor: pointer; 55 } 56 57 .container > .bottom > .progress > .current { 58 position: absolute; 59 height: 6px; 60 border-radius: 3px; 61 background: orange; 62 } 63 64 .container > .bottom > .time { 65 position: absolute; 66 top: 0; 67 right: 10px; 68 color: #FFF; 69 font-size: 14px; 70 line-height: 6px; 71 } 72 73 .container > .bottom > span { 74 display: block; 75 width: 44px; 76 height: 44px; 77 /*background: #CCC;*/ 78 margin-top: 6px; 79 text-align: center; 80 line-height: 44px; 81 cursor: pointer; 82 } 83 84 .container > .bottom > .left { 85 float: left; 86 } 87 88 .container > .bottom > .right { 89 float: right; 90 } 91 92 .container > .bottom > .play { 93 background: url("http://wx4.sinaimg.cn/mw690/006jnDrily1fgu47lets1j305k05ka9v.jpg") no-repeat center/40%; 94 } 95 96 .container > .bottom > .pause { 97 background: url("http://wx3.sinaimg.cn/mw690/006jnDrily1fgu49adrkjj305k05k0si.jpg") no-repeat center/40%; 98 } 99 100 .container > .bottom > .stop { 101 background: url("http://wx2.sinaimg.cn/mw690/006jnDrily1fgu49bdtipj305k05kdfm.jpg") no-repeat center/40%; 102 } 103 104 .container > .bottom > .rate3 { 105 opacity: 0.4; 106 } 107 108 .container > .bottom > .sound { 109 background: url("http://wx2.sinaimg.cn/mw690/006jnDrily1fgu49ayq14j305k05kweb.jpg") no-repeat center/50%; 110 } 111 112 .container > .bottom > .mute { 113 background: url("http://wx2.sinaimg.cn/mw690/006jnDrily1fgu49a2533j305k05kdfn.jpg") no-repeat center/50%; 114 } 115 116 .container > .bottom > .volume { 117 width: 60px; 118 height: 6px; 119 margin-top: 25px; 120 margin-right: 25px; 121 background: #666; 122 border-radius: 3px; 123 } 124 125 .container > .bottom > .volume > .currentVolume { 126 display: block; 127 height: 6px; 128 background: orange; 129 border-radius: 3px; 130 } 131 </style> 132 </head> 133 <body> 134 <div class="container"> 135 <video width="600px"> 136 <source src="http://video.mukewang.com/mk.mp4" type="video/mp4"> 137 您的浏览器不支持 138 </video> 139 <!-- 顶部 --> 140 <div class="top"> 141 自定义播放器 142 </div> 143 <!-- 底部 --> 144 <div class="bottom"> 145 <!-- 进度条 --> 146 <div class="progress"> 147 <div class="current"></div> 148 </div> 149 <!-- 时间 --> 150 <div class="time"> 151 <span>00:00</span> 152 <span>/</span> 153 <span>00:00</span> 154 </div> 155 <!-- 控制面板 --> 156 <span class="left play" id="play"></span> 157 <span class="left stop" id="stop"></span> 158 <span class="left rate1" id="rate1">X1</span> 159 <span class="left rate3" id="rate3">X3</span> 160 <span class="right volume"> 161 <span class="currentVolume"></span> 162 </span> 163 <span class="right sound" id="sound"></span> 164 </div> 165 </div> 166 <!-- JS --> 167 <script> 168 var v = $("video")[0]; 169 //开始暂停 170 $("#play").on("click",function(){ 171 if(v.paused){ 172 v.play(); 173 $(this).removeClass("play").addClass("pause"); 174 }else{ 175 v.pause(); 176 $(this).removeClass("pause").addClass("play"); 177 } 178 }); 179 //停止 180 $("#stop").on("click",function(){ 181 v.pause(); 182 v.currentTime = 0; 183 $("#play").removeClass("pause").addClass("play"); 184 v.playbackRate = 1; 185 $("#rate1").css("opacity",0.8); 186 $("#rate3").css("opacity",0.4); 187 }); 188 //1倍速 189 $("#rate1").on("click",function(){ 190 v.playbackRate = 1; 191 $("#rate1").css("opacity",0.8); 192 $("#rate3").css("opacity",0.4); 193 }); 194 //3倍速 195 $("#rate3").on("click",function(){ 196 v.playbackRate = 3; 197 $("#rate3").css("opacity",0.8); 198 $("#rate1").css("opacity",0.4); 199 }); 200 //静音 201 $("#sound").on("click",function(){ 202 if(v.muted){ 203 v.muted = false; 204 $(this).removeClass("mute").addClass("sound"); 205 }else{ 206 v.muted = true; 207 $(this).removeClass("sound").addClass("mute"); 208 } 209 }); 210 //获取总时长 211 $("video").on("loadedmetadata",function(){ 212 var dur = v.duration; 213 var durM = Math.floor(dur/60); 214 if(durM<10){ 215 durM = "0" + durM; 216 } 217 var durS = parseInt(dur%60); 218 $(".time span:last").html(durM + ":" + durS); 219 }); 220 //更新缓冲时长 221 $("video").on("progress",function(){ 222 console.log(v.buffered.start(0),v.buffered.end(0)) 223 }); 224 //更新当前播放时长 225 $("video").on("timeupdate",function(){ 226 //更新数字 227 var cur = v.currentTime; 228 var curM = Math.floor(cur/60); 229 if(curM<10){ 230 curM = "0" + curM; 231 } 232 var curS = Math.floor(cur%60); 233 if(curS<10){ 234 curS = "0" +curS; 235 } 236 $(".time span:first").html(curM + ":" + curS); 237 //更新进度条 238 var progressPercent = cur/v.duration; 239 $(".current").css("width",progressPercent*100 + "%"); 240 }); 241 //拖拽进度条 242 var ifdown; 243 $(".progress").on("mousedown",function(e){ 244 ifdown = true; 245 v.currentTime = e.offsetX/450*v.duration; 246 }); 247 $(document).on("mousemove",function(e){ 248 if(ifdown){ 249 var progressX = e.pageX-$(".progress").offset().left; 250 if(progressX<0){ 251 progressX = 0; 252 }else if(progressX>480){ 253 progressX = 480; 254 } 255 $(".current").css("width",progressX/480*100 + "%"); 256 v.currentTime = progressX/480*v.duration; 257 } 258 }); 259 $(document).on("mouseup",function(e){ 260 ifdown = false; 261 }); 262 //更新音量条 263 $("video").on("volumechange",function(){ 264 $(".currentVolume").css("width",v.volume*100 + "%"); 265 }); 266 //拖拽音量条 267 var ifvolumedown; 268 $(".volume").on("mousedown",function(e){ 269 ifvolumedown = true; 270 v.volume = e.offsetX/60; 271 }); 272 $(document).on("mousemove",function(e){ 273 if(ifvolumedown){ 274 var volumeX = e.pageX-$(".volume").offset().left; 275 if(volumeX<0){ 276 volumeX = 0; 277 }else if(volumeX>60){ 278 volumeX = 60; 279 } 280 v.volume = volumeX/60; 281 } 282 }); 283 $(document).on("mouseup",function(e){ 284 ifvolumedown = false; 285 }); 286 //键盘控制 287 $(document).on("keydown",function(e){ 288 if(e.keyCode == 37){ 289 v.currentTime -= 5; 290 }else if(e.keyCode == 39){ 291 v.currentTime += 5; 292 }else if(e.keyCode == 38){ 293 v.volume += 0.1; 294 }else if(e.keyCode == 40){ 295 v.volume -= 0.1; 296 } 297 }); 298 //播放结束 299 $("video").on("ended",function(){ 300 v.currentTime = 0; 301 $("#play").removeClass("pause").addClass("play"); 302 }); 303 //控制面板显示与隐藏 304 $(".container").on("mouseenter",function(){ 305 $(".top").stop().animate({ 306 top:"0" 307 },500); 308 $(".bottom").stop().animate({ 309 bottom:"0" 310 },500); 311 }); 312 $(".container").on("mouseleave",function(){ 313 $(".top").stop().animate({ 314 top:"-50px" 315 },500); 316 $(".bottom").stop().animate({ 317 bottom:"-60px" 318 },500); 319 }); 320 </script> 321 </body> 322 </html>