1.html代码
1 1 <h3 class="playerTitle">视屏播放器</h3> 2 2 <div class="player"> 3 3 <video src="../mp4/chrome.mp4"></video> 4 4 <div class="controls"> 5 5 <!--比如这里的开始和暂停图标就是font-awesome.css文件中的图标--> 6 6 <a href="javascript:;" class="switch fa fa-play"></a> 7 7 <a href="javascript:;" class="expand fa fa-expand"></a> 8 8 <div class="progress"> 9 9 <div class="bar"></div> 1010 <div class="loaded"></div> 1111 <div class="elapse"></div> 1212 </div> 1313 <div class="time"> 1414 <span class="currentTime">00;00:00</span> 1515 \ 1616 <span class="totalTime">00;00:00</span> 1717 </div> 1818 </div> 1919 </div>
2.引入两个css文件
11 <!--可以直接进入：http://www.fontawesome.com.cn/ 进行下载font-awesome.css文件 22 font-awesome.css文件，该文件是一个字体图标文件，在网站中点击：实际是专用入口就 33 会显示各种各样的图标，点击图标即可看见时间该图标的代码--> 44 <link rel="stylesheet" href="../css/font-awesome.css"> 55 <link rel="stylesheet" href="../css/css.css">
css.css是视屏播放器的基本样式
1 1 body{ 2 2 padding: 0; 3 3 margin: 0; 4 4 font-family: 'microsoft yahei','Helvetica',simhei,simsun,sans-serif; 5 5 background-color: #f7f7f7; 6 6 } 7 7 8 8 a{ 9 9 text-decoration: none; 10 10 } 11 11 12 12 .playerTitle{ 13 13 width: 100%; 14 14 margin: 0 auto; 15 15 line-height: 100px; 16 16 font-size: 40px; 17 17 text-align: center; 18 18 } 19 19 .player{ 20 20 width: 720px; 21 21 height: 360px; 22 22 margin: 0 auto; 23 23 background: url("../img/loading.gif") center no-repeat; 24 24 background-size: cover; 25 25 position: relative; 26 26 } 27 27 video{ 28 28 height: 100%; 29 29 margin: 0 auto; 30 30 display: none; 31 31 } 32 32 .controls{ 33 33 width: 720px; 34 34 height: 40px; 35 35 position: absolute; 36 36 left: 0px; 37 37 bottom: -40px; 38 38 background-color: #000; 39 39 } 40 40 .controls > .switch{ 41 41 width: 20px; 42 42 height: 20px; 43 43 display: block; 44 44 font-size: 20px; 45 45 color: #fff; 46 46 position: absolute; 47 47 left: 10px; 48 48 top: 10px; 49 49 } 50 50 .controls > .expand{ 51 51 width: 20px; 52 52 height: 20px; 53 53 display: block; 54 54 font-size: 20px; 55 55 color: #fff; 56 56 position: absolute; 57 57 right: 10px; 58 58 top: 10px; 59 59 } 60 60 .controls > .progress{ 61 61 width: 430px; 62 62 height: 10px; 63 63 position: absolute; 64 64 left: 40px; 65 65 bottom: 15px; 66 66 background-color: #555; 67 67 } 68 68 .controls > .progress > .bar{ 69 69 width: 100%; 70 70 height: 100%; 71 71 border-radius: 3px; 72 72 cursor: pointer; 73 73 position: absolute; 74 74 left: 0; 75 75 top: 0; 76 76 opacity: 0; 77 77 z-index: 999; 78 78 } 79 79 .controls > .progress > .loaded{ 80 80 width: 60%; 81 81 height: 100%; 82 82 background-color: #999; 83 83 order-radius: 3px; 84 84 position: absolute; 85 85 left: 0; 86 86 top: 0; 87 87 z-index: 2; 88 88 } 89 89 .controls > .progress > .elapse{ 90 90 width: 0%; 91 91 height: 100%; 92 92 background-color: #fff; 93 93 order-radius: 3px; 94 94 position: absolute; 95 95 left: 0; 96 96 top: 0; 97 97 z-index: 3; 98 98 } 99 99 .controls > .time{ 100100 height: 20px; 101101 position: absolute; 102102 left: 490px; 103103 top: 10px; 104104 color: #fff; 105105 font-size: 14px; 106106 }
3.最主要的功能实现
1 1 <script src="../js/jquery-1.7.min.js"></script> 2 2 <script> 3 3 /*通过jq来实现功能*/ 4 4 $(function () { 5 5 /*1.获取播放器*/ 6 6 var video = $("video")[0]; 7 7 8 8 /*2.实现播放与暂停*/ 9 9 $(".switch").click(function () { 1010 /*实现播放暂停的切换：如若是暂停》播放 如果是播放》暂停*/ 1111 if (video.paused) { 1212 video.play(); 1313 /*移除暂停样式，添加播放样式*/ 1414 }else{ 1515 video.pause(); 1616 /*移除播放样式，添加暂停样式*/ 1717 } 1818 /*设置标签的样式 fa-pause:暂停 fa-play：播放样式*/ 1919 $(this).toggleClass("fa-play fa-pause"); 2020 }); 2121 2222 /*3.实现全屏操作*/ 2323 $(".expand").click(function () { 2424 if (video.requestFullscreen){ 2525 video.requestFullscreen(); 2626 }else if (video.webkitRequestFullScreen){ 2727 video.webkitRequestFullScreen(); 2828 } else if (video.mozRequestFullScreen){ 2929 video.mozRequestFullScreen(); 3030 } else if (video.msRequestFullScreen){ 3131 video.msRequestFullScreen(); 3232 } 3333 }); 3434 3535 /*4.实现播放业务逻辑：当视屏文件可以播放时触发下面的事件*/ 3636 video.oncanplay=function () { 3737 setTimeout(function () { 3838 /*1.将视屏文件设置为显示*/ 3939 video.style.display="block"; 4040 /*2.获取当前视屏文件的总时长（以为作为单位，同时获取了小数值），计算出时分秒*/ 4141 var total = video.duration; 4242 /*调用计算时间方法*/ 4343 var result = getResult(total); 4444 /*4.将计算结果展示在指定的dom元素中*/ 4545 $(".totalTime").html(result); 4646 },2000); 4747 } 4848 /*通过总时长计算出时分秒*/ 4949 function getResult(time) { 5050 /*3.计算时分秒 60*60=3600 5151 * 时:3700/3600 5252 * 分:3700%3600 >> 100/60 5353 * 秒:3700%60 5454 * */ 5555 var hour =Math.floor(time/3600); 5656 /*补0操作*/ 5757 hour = hour<10?"0"+hour:hour; 5858 var minute=Math.floor(time%3600/60); 5959 minute=minute<10?"0"+minute:minute; 6060 var second = Math.floor(time%60); 6161 second=second<10?"0"+second:second; 6262 return hour+":"+minute+":"+second; 6363 } 6464 6565 /*5.实现播放过程中的业务逻辑，当时瓶播放时触发ontimeupdate事件 6666 * 如果修改了currentTime值也会触发这个事件，说白了，就是是要currenTime值变化，就会触发这个事件 6767 * */ 6868 video.ontimeupdate=function () { 6969 /*1.获取当前的播放时间*/ 7070 var current=video.currentTime; 7171 /*计算出时分秒*/ 7272 var result = getResult(current); 7373 /*将结果展示在指定的dom元素中*/ 7474 $(".currentTime").html(result); 7575 /*4.设置当前播放进度条样式*/ 7676 var percent=current/video.duration*100+"%"; 7777 $(".elapse").css("width",percent); 7878 7979 } 8080 8181 /*6.实现视屏地挑播*/ 8282 $(".bar").click(function (e) { 8383 /*1.获取当前师表相对于父元素的left值--偏移值*/ 8484 var offset=e.offsetX; 8585 /*2.计算偏移值相对总父元素总宽度的比例*/ 8686 var percent=offset/$(this).width(); 8787 /*3.计算这个位置对应的视频进度之*/ 8888 var current=percent*video.duration; 8989 /*设置当前视频的currentTime*/ 9090 video.currentTime=current; 9191 }) 9292 9393 /*7.播放完毕之后，重置播放器的状态*/ 9494 video.onended=function () { 9595 video.currentTime=0; 9696 $(".switch").removeClass("fa-pauser").addClass("fa-play"); 9797 }; 9898 }); 9999 </script>