首页 > 代码库 > h5自定义播放器得实现原理

h5自定义播放器得实现原理

  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>

 

h5自定义播放器得实现原理