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>
