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