h5-自定义视屏播放器

1.html代码

 <h3 class="playerTitle">视屏播放器</h3>
 <div class="player">
     <video src="../mp4/chrome.mp4"></video>
     <div class="controls">
         <!--比如这里的开始和暂停图标就是font-awesome.css文件中的图标-->
         <a href="javascript:;" class="switch fa fa-play"></a>
         <a href="javascript:;" class="expand fa fa-expand"></a>
         <div class="progress">
             <div class="bar"></div>
             <div class="loaded"></div>
             <div class="elapse"></div>
         </div>
         <div class="time">
             <span class="currentTime">00;00:00</span>
             \
             <span class="totalTime">00;00:00</span>
         </div>
     </div>
 </div>

2.引入两个css文件

     <!--可以直接进入：http://www.fontawesome.com.cn/  进行下载font-awesome.css文件
     font-awesome.css文件，该文件是一个字体图标文件，在网站中点击：实际是专用入口就
     会显示各种各样的图标，点击图标即可看见时间该图标的代码-->
     <link rel="stylesheet" href="../css/font-awesome.css">
     <link rel="stylesheet" href="../css/css.css">

css.css是视屏播放器的基本样式

 body{
     padding:;
     margin:;
     font-family: 'microsoft yahei','Helvetica',simhei,simsun,sans-serif;
     background-color: #f7f7f7;
 }

 a{
     text-decoration: none;
 }

 .playerTitle{
     width: 100%;
     margin: 0 auto;
     line-height: 100px;
     font-size: 40px;
     text-align: center;
 }
 .player{
     width: 720px;
     height: 360px;
     margin: 0 auto;
     background: url("../img/loading.gif") center no-repeat;
     background-size: cover;
     position: relative;
 }
 video{
     height: 100%;
     margin: 0 auto;
     display: none;
 }
 .controls{
     width: 720px;
     height: 40px;
     position: absolute;
     left: 0px;
     bottom: -40px;
     background-color: #000;
 }
 .controls > .switch{
     width: 20px;
     height: 20px;
     display: block;
     font-size: 20px;
     color: #fff;
     position: absolute;
     left: 10px;
     top: 10px;
 }
 .controls > .expand{
     width: 20px;
     height: 20px;
     display: block;
     font-size: 20px;
     color: #fff;
     position: absolute;
     right: 10px;
     top: 10px;
 }
 .controls > .progress{
     width: 430px;
     height: 10px;
     position: absolute;
     left: 40px;
     bottom: 15px;
     background-color: #555;
 }
 .controls > .progress > .bar{
     width: 100%;
     height: 100%;
     border-radius: 3px;
     cursor: pointer;
     position: absolute;
     left:;
     top:;
     opacity:;
     z-index:;
 }
 .controls > .progress > .loaded{
     width: 60%;
     height: 100%;
     background-color: #999;
     order-radius: 3px;
     position: absolute;
     left:;
     top:;
     z-index:;
 }
 .controls > .progress > .elapse{
     width: 0%;
     height: 100%;
     background-color: #fff;
     order-radius: 3px;
     position: absolute;
     left:;
     top:;
     z-index:;
 }
 .controls > .time{
     height: 20px;
     position: absolute;
     left: 490px;
     top: 10px;
     color: #fff;
     font-size: 14px;
 }

3.最主要的功能实现

 <script src="../js/jquery-1.7.min.js"></script>
 <script>
     /*通过jq来实现功能*/
     $(function () {
         /*1.获取播放器*/
         var video = $("video")[0];

         /*2.实现播放与暂停*/
         $(".switch").click(function () {
             /*实现播放暂停的切换：如若是暂停》播放  如果是播放》暂停*/
             if (video.paused) {
                 video.play();
                 /*移除暂停样式，添加播放样式*/
             }else{
                 video.pause();
                 /*移除播放样式，添加暂停样式*/
             }
             /*设置标签的样式  fa-pause:暂停   fa-play：播放样式*/
             $(this).toggleClass("fa-play fa-pause");
         });

         /*3.实现全屏操作*/
         $(".expand").click(function () {
             if (video.requestFullscreen){
                 video.requestFullscreen();
             }else if (video.webkitRequestFullScreen){
                 video.webkitRequestFullScreen();
             } else if (video.mozRequestFullScreen){
                 video.mozRequestFullScreen();
             } else if (video.msRequestFullScreen){
                 video.msRequestFullScreen();
             }
         });

         /*4.实现播放业务逻辑：当视屏文件可以播放时触发下面的事件*/
         video.oncanplay=function () {
             setTimeout(function () {
                 /*1.将视屏文件设置为显示*/
                 video.style.display="block";
                 /*2.获取当前视屏文件的总时长（以为作为单位，同时获取了小数值），计算出时分秒*/
                 var total = video.duration;
                 /*调用计算时间方法*/
                 var result = getResult(total);
                 /*4.将计算结果展示在指定的dom元素中*/
                 $(".totalTime").html(result);
             },2000);
         }
         /*通过总时长计算出时分秒*/
         function getResult(time) {
             /*3.计算时分秒  60*60=3600
                 * 时:3700/3600
                 * 分:3700%3600 >> 100/60
                 * 秒:3700%60
                 * */
             var hour =Math.floor(time/3600);
             /*补0操作*/
             hour = hour<10?"0"+hour:hour;
             var minute=Math.floor(time%3600/60);
             minute=minute<10?"0"+minute:minute;
             var second = Math.floor(time%60);
             second=second<10?"0"+second:second;
             return hour+":"+minute+":"+second;
         }

         /*5.实现播放过程中的业务逻辑，当时瓶播放时触发ontimeupdate事件
         * 如果修改了currentTime值也会触发这个事件，说白了，就是是要currenTime值变化，就会触发这个事件
         * */
         video.ontimeupdate=function () {
             /*1.获取当前的播放时间*/
             var current=video.currentTime;
             /*计算出时分秒*/
             var result = getResult(current);
             /*将结果展示在指定的dom元素中*/
             $(".currentTime").html(result);
             /*4.设置当前播放进度条样式*/
             var percent=current/video.duration*100+"%";
             $(".elapse").css("width",percent);

         }

         /*6.实现视屏地挑播*/
         $(".bar").click(function (e) {
             /*1.获取当前师表相对于父元素的left值--偏移值*/
             var offset=e.offsetX;
             /*2.计算偏移值相对总父元素总宽度的比例*/
             var percent=offset/$(this).width();
             /*3.计算这个位置对应的视频进度之*/
             var current=percent*video.duration;
             /*设置当前视频的currentTime*/
             video.currentTime=current;
         })

         /*7.播放完毕之后，重置播放器的状态*/
         video.onended=function () {
             video.currentTime=0;
             $(".switch").removeClass("fa-pauser").addClass("fa-play");
         };
     });
 </script>