h5实现自定义播放器 

  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>

 

posted @ 2017-06-22 17:57  oliverlht  阅读(2324)  评论(0)  编辑  收藏  举报