1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <!--插入播放按钮得文字图标格式（具体使用方法可以百度http://fontawesome.dashgame.com/）-->
7 <link rel="stylesheet" href="../css/font-awesome.css">
8 <!--页面结构设置得样式-->
9 <style>
10 body {
11 padding: 0;
12 margin: 0;
13 font-family: 'microsoft yahei', 'Helvetica', simhei, simsun, sans-serif;
14 background-color: #F7F7F7;
15 }
16
17 a {
18 text-decoration: none;
19 }
20 .playerTitle{
21 width:100%;
22 margin: 0 auto;
23 line-height:100px;
24 font-size: 40px;
25 text-align: center;
26 }
27 .player{
28 width: 720px;
29 height: 360px;
30 margin: 0 auto;
31 background: url("../images/loading.gif") center no-repeat;
32 background-size: cover;
33 position: relative;
34 }
35 video{
36 height:100%;
37 margin: 0 auto;
38 display: none;
39 }
40 .controls {
41 width: 720px;
42 height: 40px;
43 position: absolute;
44 left: 0px;
45 bottom: -40px;
46 background-color: #000;
47 }
48 .controls > .switch{
49 width: 20px;
50 height: 20px;
51 display: block;
52 font-size: 20px;
53 color: #fff;
54 position: absolute;
55 left: 10px;
56 top: 10px;
57 }
58 .controls > .expand{
59 width: 20px;
60 height: 20px;
61 display: block;
62 font-size: 20px;
63 color: #fff;
64 position: absolute;
65 right: 10px;
66 top: 10px;
67 }
68 .controls > .progress{
69 width: 430px;
70 height: 10px;
71 position: absolute;
72 left:40px;
73 bottom:15px;
74 background-color: #555;
75 }
76 .controls > .progress > .bar{
77 width:100%;
78 height:100%;
79 border-radius: 3px;
80 cursor: pointer;
81 position: absolute;
82 left: 0;
83 top: 0;
84 opacity: 0;
85 z-index: 999;
86 }
87 .controls > .progress > .loaded{
88 width:60%;
89 height:100%;
90 background-color: #999;
91 border-radius: 3px;
92 position: absolute;
93 left: 0;
94 top: 0;
95 z-index: 2;
96 }
97 .controls > .progress > .elapse{
98 width:0%;
99 height:100%;
100 background-color: #fff;
101 border-radius: 3px;
102 position: absolute;
103 left: 0;
104 top: 0;
105 z-index: 3;
106 }
107 .controls > .time{
108 height: 20px;
109 position: absolute;
110 left:490px;
111 top: 10px;
112 color: #fff;
113 font-size: 14px;
114 }
115 </style>
116 </head>
117 <body>
118 <h3 class="playerTitle">视频播放器</h3>
119 <div class="player">
120 <video src="../mp4/chrome.mp4"></video>
121 <div class="controls">
122 <!--javascript:; a链接点击不让跳转 fa 库名fa-play 文字名 文字库使用方法-->
123 <a href="javascript:;" class="switch fa fa-play"></a>
124 <a href="javascript:;" class="expand fa fa-expand"></a>
125 <div class="progress">
126 <!--点击的透明层，效果是点击改变进度条和播放得当前时间-->
127 <div class="bar"></div>
128 <!--缓冲进度条（由于是本地视频加载比较快所以就没法感受到没写0.0）-->
129 <div class="loaded"></div>
130 <!--播放进度条-->
131 <div class="elapse"></div>
132 </div>
133 <div class="time">
134 <!--播放当前时间-->
135 <span class="currentTime">00:00:00</span>
136 \
137 <!--视频时间总长度-->
138 <span class="totalTime">00:00:00</span>
139 </div>
140 </div>
141 </div>
142 <!--基于jquery的文件引入-->
143 <script src="./jquery.min.js"></script>
144 <script>
145 /*通过jq来实现功能*/
146 $(function(){
147 /*1.获取播放器 对象的转换,把jquery转换为dom对象*/
148 var video=$("video")[0];
149
150 /*2.实现播放与暂停*/
151 $(".switch").click(function(){
152 /*实现播放与暂停的切换：如果是暂停>>播放 ，如果是播放 >> 暂停*/
153 if(video.paused){
154 video.play();
155 /*移除暂停样式，添加播放样式*/
156 }
157 else{
158 video.pause();
159 /*移除播放样式，添加暂停样式*/
160 }
161 /*设置标签的样式 fa-pause:暂停 fa-play：播放*/
162 $(this).toggleClass("fa-play fa-pause");
163 });
164
165 /*3.实现全屏操作*/
166 $(".expand").click(function(){
167 /*全屏>>不同浏览器需要添加不同的前缀>>能力测试*/
168 if(video.requestFullScreen){
169 video.requestFullScreen();
170 }
171 else if(video.webkitRequestFullScreen){
172 video.webkitRequestFullScreen();
173 }
174 else if(video.mozRequestFullScreen){
175 video.mozRequestFullScreen();
176 }
177 else if(video.msRequestFullScreen){
178 video.msRequestFullScreen();
179 }
180 });
181
182 /*4.实现播放业务逻辑：当视频文件可以播放时触发下面的事件*/
183 video.oncanplay=function(){
184 setTimeout(function(){
185 /*1.将视频文件设置为显示*/
186 video.style.display="block";
187 /*2.获取当前视频文件的总时长(以秒做为单位，同时获取了小数值)，计算出时分秒*/
188 var total=video.duration; //01:01:40 00:00:36
189 /*3.计算时分少 60*60=3600
190 * 3700:3700/3600
191 * 3700:3700%3600 >> 100 /60*/
192 /*var hour=Math.floor(total/3600);
193 /!*补0操作*!/
194 hour=hour<10?"0"+hour:hour;
195 var minute=Math.floor(total%3600/60);
196 minute=minute<10?"0"+minute:minute;
197 var second=Math.floor(total%60);
198 second=second<10?"0"+second:second;*/
199 var result=getResult(total)
200 /*4.将计算结果展示在指定的dom元素中*/
201 $(".totalTime").html(result);
202 },2000);
203 }
204
205 /*通过总时长计算出时分秒*/
206 function getResult(time){
207 var hour=Math.floor(time/3600);
208 /*补0操作*/
209 hour=hour<10?"0"+hour:hour;
210 var minute=Math.floor(time%3600/60);
211 minute=minute<10?"0"+minute:minute;
212 var second=Math.floor(time%60);
213 second=second<10?"0"+second:second;
214 /*返回结果*/
215 return hour+":"+minute+":"+second;
216 }
217
218 /*5.实现播放过程中的业务逻辑，当视频播放时会触发ontimeupdate事件
219 * 如果修改currentTime值也会触发这个事件，说白了，只要currenTime值变化，就会触发这个事件*/
220 video.ontimeupdate=function(){
221 /*1.获取当前的播放时间*/
222 var current=video.currentTime;
223 /*2.计算出时分秒*/
224 var result=getResult(current);
225 /*3.将结果展示在指定的dom元素中*/
226 $(".currentTime").html(result);
227 /*4.设置当前播放进度条样式 0.12>>0.12*100=12+%>12%*/
228 var percent=current/video.duration*100+"%";
229 $(".elapse").css("width",percent);
230 }
231
232 /*6.实现视频的跳播*/
233 $(".bar").click(function(e){
234 /*1.获取当前鼠标相对于父元素的left值--偏移值*/
235 var offset= e.offsetX;
236 /*2.计算偏移值相对总父元素总宽度的比例*/
237 var percent=offset/$(this).width();
238 /*3.计算这个位置对应的视频进度值*/
239 var current=percent*video.duration;
240 /*4.设置当前视频的currentTime*/
241 video.currentTime=current;
242 });
243
244 /*7.播放完毕之后，重置播放器的状态*/
245 video.onended=function(){
246 // 当前播放时间清零
247 video.currentTime=0;
248 // 播放按钮的事件由暂停替换位播放
249 $(".switch").removeClass("fa-pause").addClass("fa-play");
250 }
251 });
252 </script>
253 </body>
254 </html>
