<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>

     <!--可以直接进入：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">

 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;

 }

 <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>