如果你真的想做一件事，你一定会找到方法；如果你不想做一件事，你一定会找到借口。

HTML5播放器实例

鉴于html5Audio and video的使用，设计了一个自定义风格的播放器，除实现一些基本的默认功能之外，还实现了一些高级功能。

具体功能如下：

 1 实现播放暂停按钮
 2 实现静音按钮
 3 实现音量调节滑动条
 4 实现播放进度控制条
 5 实现显示播放时间
 6 实现停止按钮
 7 实现缓冲进度控制条
 8 实现播放速率选择按钮
 9 实现全屏播放按钮
10 实现关灯按钮

文件目录如下：

1、搭建程序显示框架——video.html

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>Audio and video</title>
 5     <meta charset="utf-8">
 6     <link rel="stylesheet" type="text/css" href="css/video.css">
 7     <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
 8 </head>
 9 <body>
10 <header>
11     <h1>html5 Audio and video</h1>
12 </header>
13 <section id="wrapper">
14     <div class="videoContainer">
15         <video id="myVideo" src="jiehun.mp4" controls >
16             sorry ,不支持！
17         </video>
18         <div class="caption">html5 Audio and video</div>
19         <div class="control">
20             <div class="topControl">
21                 <div class="progress">
22                     <span class="bufferBar"></span>
23                     <span class="timeBar"></span>
24                 </div>
25                 <div class="time">
26                     <span class="current"></span>/
27                     <span class="duration"></span>
28                 </div>
29             </div>
30             <div class="btmControl">
31                 <div class="btnPlay btn" title="Play/Pause video"></div>
32                 <div class="btnStop btn" title="Stop video"></div>
33                 <div class="spdText btn">speed:</div>
34                 <div class="btnX1 btn text selected" title="Normal speed">X1</div>
35                 <div class="btnX3 btn text " title="Fast forword X3">X3</div>
36                 <div class="btnFS btn" title="Switch to full screen"></div>
37                 <div class="btnLight btn lighton" title="Turn on/off light"></div>
38                 <div class="volume" title="Set volume">
39                     <span class="volumeBar"></span>
40                 </div>
41                 <div class="sound sound2 btn" title="Mute/unmute sound"></div>
42             </div>
43         </div>
44         <div class="loading"></div>    
45     </div>
46 </section>
47 <footer>
48     <span>Write by wang from csust</span>
49 </footer>
50 </body>
51     <script type="text/javascript" src="js/video.js"></script>
52 </html>

2、播放器样式设计——video.css

  1 .videoContainer{
  2     width: 600px; 
  3     height: 350px;
  4     position: relative;
  5     overflow: hidden;
  6     background:#000;
  7     color:#ccc;
  8 }
  9 video{
 10     width: 600px; 
 11     height: 350px;
 12 }
 13 .caption{
 14     display:none;
 15     position: absolute;
 16     top: 0;
 17     left: 0;
 18     width: 100%;
 19     padding:10px;
 20     color: #ccc;
 21     font-size: 20px;
 22     font-weight: bold;
 23     box-sizing:border-box;
 24     -ms-box-sizing:border-box;
 25     -webkit-box-sizing:border-box;
 26     -moz-box-sizing:border-box;
 27     background:#1F1F1F;
 28     background: -moz-linear-gradient(top,#242424 50%,#2F2F2F %50,#171717 100%);
 29     background: -webkit-linear-gradient(top,#242424 50%,#2F2F2F %50,#171717 100%);
 30     background: -o-linear-gradient(top,#242424 50%,#2F2F2F %50,#171717 100%);
 31 }
 32 .control{
 33     background:#333;
 34     color: #ccc;
 35     position: absolute;
 36     bottom: 0;
 37     left: 0;
 38     width:100%;
 39     z-index:5;
 40     display: none;
 41 }
 42 .topControl{
 43     height: 11px;
 44     border-bottom: 1px solid #404040;
 45     padding:1px 5px;
 46     background:#1F1F1F;
 47     background: -moz-linear-gradient(top,#242424 50%,#2F2F2F %50,#171717 100%);
 48     background: -webkit-linear-gradient(top,#242424 50%,#2F2F2F %50,#171717 100%);
 49     background: -o-linear-gradient(top,#242424 50%,#2F2F2F %50,#171717 100%);
 50 }
 51 .btmControl{
 52     clear: both;
 53     background:#1F1F1F;
 54     background: -moz-linear-gradient(top,#242424 50%,#2F2F2F %50,#171717 100%);
 55     background: -webkit-linear-gradient(top,#242424 50%,#2F2F2F %50,#171717 100%);
 56     background: -o-linear-gradient(top,#242424 50%,#2F2F2F %50,#171717 100%);
 57 }
 58 .control div.btn{
 59     float: left;
 60     width: 34px;
 61     height: 30px;
 62     padding: 0 5px;
 63     border-right: 1px solid #404040;
 64     cursor: pointer;
 65 }
 66 .control div.text{
 67     font-size:12px;
 68     font-weight:bold;
 69     line-height:30px;
 70     text-align:center;
 71     font-family:verdana;
 72     width: 20px;
 73     border:none;
 74     color: #777;
 75 }
 76 /*暂停缓冲背景*/
 77 .loading,#init{
 78     position: absolute;
 79     top: 0;
 80     left: 0;
 81     width: 100%;
 82     height: 100%;
 83     background: url(../images/loading1.png) no-repeat 50% 50%;
 84     z-index: 2;
 85     display: none; 
 86 }
 87 #init{
 88     background: url(../images/play.png) no-repeat 50% 50% !important;
 89     cursor: pointer;
 90 }
 91 /*控制栏暂停播放按钮*/
 92 .control div.btnPlay{
 93     background:url(../images/play.png) no-repeat 5px 0;
 94      border-left: 1px solid #404040;
 95 }
 96 .control div.paused{
 97     background:url(../images/stop.png) no-repeat 5px 0;
 98 }
 99 /*播放时间和进度控制条样式*/
100 .progress{
101     width:85%;
102     height: 10px;
103     position: relative;
104     float: left;
105     cursor: pointer;
106     background:#444;
107     background:-moz-linear-gradient(top,#666,#333);
108     background:-webkit-linear-gradient(top,#666,#333);
109     background:-o-linear-gradient(top,#666,#333);
110     box-shadow: 0 2px 3px #333 inset;
111     -moz-box-shadow: 0 2px 3px #333 inset;
112     -webkit-box-shadow: 0 2px 3px #333 inset;
113     border-radius: 10px;
114     -moz-border-radius: 10px;
115     -webkit-border-radius: 10px;
116 }
117 .progress span{
118     height: 100%;
119     position: absolute;
120     top: 0;
121     left: 0;
122     display: block;
123     border-radius: 10px;
124     -moz-border-radius: 10px;
125     -webkit-border-radius: 10px;
126 }
127 .timeBar{
128     z-index: 10;
129     width: 0;
130     background:#3FB7FC;
131     background:-moz-linear-gradient(top,#A0DCFF 50%,#3FB7FC 50%,#16A9FF 100%);
132     background:-webkit-linear-gradient(top,#A0DCFF 50%,#3FB7FC 50%,#16A9FF 100%);
133     background:-o-linear-gradient(top,#A0DCFF 50%,#3FB7FC 50%,#16A9FF 100%);
134     box-shadow: 0 0 1px #fff;
135     -moz-box-shadow: 0 0 1px #fff;
136     -webkit-box-shadow: 0 0 1px #fff;
137 }
138 .bufferBar{
139     z-index: 5;
140     width: 0;
141     background:#777;
142     background:-moz-linear-gradient(top,#999,#666);
143     background:-webkit-linear-gradient(top,#999,#666);
144     background:-o-linear-gradient(top,#999,#666);
145     box-shadow: 2px 0 5px #333;
146     -moz-box-shadow: 2px 0 5px #333;
147     -webkit-box-shadow: 2px 0 5px #333;
148 }
149 .time{
150     width:15%;
151     float:right;
152     text-align: center;
153     font-size: 11px;
154     line-height: 12px;
155 }
156 .control div.sound{
157     background:url(../images/volumeon.png) no-repeat 0px 0px;
158     border:none;
159     float: right;
160 }
161 .control div.sound2{
162     background:url(../images/volumeon.png) no-repeat 0px 0px !important;
163 }
164 .control div.muted{
165     background:url(../images/volumeoff.png) no-repeat 0px 0px !important;
166 }
167 .volume{
168     position: relative;
169     cursor:pointer;
170     width:70px;
171     height: 10px;
172     float: right;
173     margin-right: 10px;
174     margin-top: 10px;
175 }
176 .volumeBar{
177     display: block;
178     height: 100%;
179     position: absolute;
180     top: 0;
181     left: 0;
182     background-color: #eee;
183     z-index:10;
184     border-radius: 10px;
185 }
186 /*播放速率样式*/
187 .control div.btnStop{
188     background: url(../images/pause.png) no-repeat 0 0;
189 }
190 .control div.spdText{
191     border:none;
192     font-size: 14px;
193     line-height:30px;
194     font-style:italic;
195 }
196 .control div.selected{
197     font-size: 15px;
198     color: #ccc;
199 }
200 .control div.btnFS{
201     background: url(../images/fullScreen.png) no-repeat 0 0;
202     float: right;
203 }
204 
205 .control div.btnLight{
206     background: url(../images/lightoff.png) no-repeat 0 0;
207     border-left: 1px solid #404040;
208     float: right;
209 }
210 .control div.lighton{
211     background: url(../images/lighton.png) no-repeat 0 0 !important;
212     float: right;
213 }

3、监听控制的JS代码——video.js

 

  1 $(document).ready(function(){
  2     var video = $('#myVideo');
  3     //关闭播放器默认的风格
  4     video[0].removeAttribute("controls");
  5     $('.control').show().css({'bottom':-45});
  6     $('.loading').fadeIn(500);
  7     $('.caption').fadeIn(500);
  8 
  9     //监听onloademetadate事件
 10     video.on('loadedmetadata',function(){
 11         $('.caption').animate({'top':-45},300)
 12         //初始化时间显示
 13         $('.current').text(timeFormat(0));
 14         $('.duration').text(timeFormat(video[0].duration));
 15         //在视频显示区添加播放按钮
 16         $('.videoContainer')
 17         .append('<div id="init"></div>')
 18         .hover(function(){
 19             $('.control').stop().animate({'bottom':0},500);
 20             $('.caption').stop().animate({'top':0},500);
 21         })
 22         //$('#init').fadeIn(200);
 23     });
 24 
 25     //监听oncanplay事件
 26     video.on('canplay',function(){
 27         $('.loading').fadeOut(100);
 28     });
 29 
 30     //监听oncanplaythrough事件
 31     var completeloaded = false;
 32     video.on('canplaythrough',function(){
 33         completeloaded = true;
 34     });
 35 
 36     //监听onended事件
 37     video.on('ended',function(){
 38         $('.btnPlay').removeClass("paused");
 39         video[0].paused();
 40     });
 41 
 42     //监听onwaiting事件
 43     video.on('waiting',function(){
 44         $('.loading').fadeIn(200);
 45     });
 46 
 47     //时间转换函数
 48     var timeFormat = function(seconds){
 49         var m = Math.floor(seconds/60)<10 ? "0"+Math.floor(seconds/60) : Math.floor(seconds/60);
 50         var s = Math.floor(seconds-(m*60))<10 ? "0"+Math.floor(seconds-(m*60)) : Math.floor(seconds-(m*60));
 51         return m+":"+s;
 52     }
 53 
 54     //添加播放和暂停按钮
 55     video.on('click',function(){
 56         playpause();
 57     })
 58     $('.btnPlay').on('click',function(){
 59         playpause();
 60     })
 61     var playpause = function() {
 62         if (video[0].paused || video[0].ended) {
 63             $('.btnPlay').addClass('paused');
 64             video[0].play();
 65         }
 66         else{
 67             video[0].pause();
 68             $('.btnPlay').removeClass('paused');
 69 
 70         }
 71     }
 72 
 73     //监听ontimeupdate事件，动态显示播放时间和进度控制条。
 74     video.on("timeupdate",function(){
 75         var currentPos = video[0].currentTime;
 76         var maxduration = video[0].duration;
 77         var perc = 100*currentPos/maxduration;
 78         $('.timeBar').css('width',perc+'%');
 79         $('.current').text(timeFormat(currentPos));
 80     });
 81 
 82     //显示缓冲进度
 83     var startBuffer = function(){
 84         var currentBuffer = video[0].buffered.end(0);
 85         var maxduration = video[0].duration;
 86         var perc = 100*currentBuffer/maxduration;
 87         $('.bufferBar').css('width',perc+'%');
 88         if (currentBuffer<maxduration) {
 89             setTimeout(startBuffer,500);
 90         }
 91     };
 92 
 93     //显示播放进度，并监听onmousedown和onmouseup事件
 94     var timeDrag = false;
 95     $('.progress').on('mousedown',function(e){
 96         timeDrag = true;
 97         updatebar(e.pageX);
 98     });
 99     $('.progress').on('mouseup',function(e){
100         if (timeDrag) {
101             updatebar(e.pageX);
102         }
103     });
104     var updatebar = function(x){
105         var progress = $('.progress');
106         var maxduration = video[0].duration;
107         var position = x - progress.offset().left;
108         var percentage = 100*position/progress.width();
109         if (percentage>100) {percentage = 100;};
110         if (percentage<0) {percentage = 0;};
111         $('.timeBar').css('width',percentage+'%');
112         video[0].currentTime = maxduration*percentage/100;
113     };
114 
115     //静音按钮
116     $('.sound').click(function(){
117         video[0].muted = !video[0].muted;
118         $(this).toggleClass('muted');
119         if (video[0].muted) {
120             $('.volumeBar').css('width',0);
121         }else{
122             $('.volumeBar').css('width',video[0].volume*100+'%');
123         }
124     });
125 
126     //音量调节滑动条
127     var volumeDrag = false;
128     $('.volume').on('mousedown',function(e){
129         volumeDrag = true;
130         video[0].muted = false;
131         $('.sound').removeClass('muted');
132         updateVolume(e.pageX);
133     });
134     $('.volume').on('mouseup',function(e){
135         if (volumeDrag) {updateVolume(e.pageX);};
136     });
137     var updateVolume = function(x,vol){
138         var volume = $('.volume');
139         var percentage;
140         if (vol) {
141             percentage = vol*100;
142         }else{
143             var position = x - volume.offset().left;
144             percentage = 100*position/volume.width();
145         }
146         if (percentage>100) {percentage=100;};
147         if (percentage<0) {percentage=0;};
148         $('.volumeBar').css('width',percentage+'%');
149         video[0].volume = percentage/100;
150         if (video[0].volume==0) {
151             $('.sound').removeClass('sound2').addClass('muted');
152         }else if (video[0].volume>0.5){
153             $('.sound').removeClass('muted').addClass('sound2');
154         }
155         else{
156             $('.sound').removeClass('muted').removeClass('sound2');
157         }
158     };
159 
160     //播放速率选择按钮
161     $('.btnX1').on('click',function(){
162         fastfword(this,1);
163     });
164     $('.btnX3').on('click',function(){
165         fastfword(this,3);
166     });
167     var fastfword = function(obj,spd){
168         $('.text').removeClass('selected');
169         $(obj).addClass('selected');
170         video[0].playbackRate = spd;
171         video[0].play();
172     };
173     //停止按钮
174     $('.btnStop').on('click',function(){
175         $('.btnPlay').removeClass('paused');
176         updatebar($('.progress').offset().left);
177         video[0].pause();
178     });
179     //全屏按钮
180     $('.btnFS').on('click',function(){
181         if ($.isFunction(video[0].webkitEnterFullscreen)) {
182             video[0].webkitEnterFullscreen();
183         }
184         else if ($.isFunction(video[0].mozRequestFullScreen)) {
185             video[0].mozRequestFullScreen();
186         }else{
187             alert('sorry,您的浏览器不支持全屏播放！');
188         }
189     })
190     //关灯按钮
191     $('.btnLight').click(function(){
192         $(this).toggleClass("lighton");
193         if (!$(this).hasClass('lighton')){
194             $('body').append('<div class="overlay"></div>');
195             $('.overlay').css(
196             {
197                 'position':'absolute',
198                 'width':100+"%",
199                 'height':$(document).height(),
200                 'background':'#000',
201                 'opacity':0.9,
202                 'top':0,
203                 'left':0,
204                 'z-index':999
205             })
206             $('.videoContainer').css(
207             {
208                 'z-index':1000
209             })
210         }
211         else{
212             $('.overlay').remove();
213         }
214     })
215 })

 

4、在Google chrome 浏览器中显示如图：

 

因图标按钮是在网上剪切后调节尺寸所得，所以比较丑，但基本的功能还是有的！

 

参考书籍：HTML5+CSS3技术应用

参考上一篇博客：http://www.cnblogs.com/zxjwlh/p/4547662.html

 

posted @ 2015-06-04 21:18  wanglehui  阅读(718)  评论(0)    收藏  举报