写了个简单的H5视频播放器

发表于 分类于

写在前面

好久没跟新博客了。最近一直忙着恶补JavaScript的知识，没办法，小白就要多练多看。这两天写了个简单的视频播放器，实现了一些简单的功能。今天就把这个简单的播放器分享出来，仅供参考。希望能对大家有点帮助。。。尽管这个写的比较low。。

效果功能

效果预览

效果如下图：

实现功能

播放器是用原生js写的，实现了一些基本的功能：

  • 播放/暂停、停止、空格键暂停/播放；
  • 音量加减、支持拖动调节音量以及上下方向键调整音量；
  • 支持静音、全屏播放；
  • 支持发送弹幕，弹幕颜色随机、出现位置随机；
  • 支持播放列表点击切换、支持自动循环列表播放。

目前还存在的bug

目前发现，在播放过程中，通过键盘上下方向键调节音量后，鼠标划入视频区域，控制条无法显示。。暂未解决。

源码分享

说明：源代码中引入了font-awesome的字体图标库。

HTML部分代码

页面结构布局较简单，下面是HTML部分的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>视频播放器</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
</head>
<body>
  <div class="box clearFix">
    <div class="vbox fl"><!-- 视频盒子部分开始 -->
      <video id="myvideo" preload="auto"></video>
      <div class="ctrlbox clearFix"><!-- 播放控制条部分开始 -->
        <div class="left fl">
          <i class="fa fa-play" id="playbtn" title="点击播放"></i>&nbsp;
          <i class="fa fa-stop" id="stopbtn" title="停止"></i>
          <span id="nowtime">00:00</span><span id="sep">/</span><span id="fulltime"></span>
          <span class="progress" title="点击跳到这儿"><!-- 进度条部分开始 -->
            <span id="pgbar"></span>
          </span><!-- 进度条部分结束 -->
        </div>
        <div class="right fr">
          <i class="fa fa-volume-up" id="volume" title="点击静音"></i>
          <i class="fa fa-expand" id="expand"  title="全屏"></i>
        </div>
        <div class="volctrl"><!-- 音量控制部分开始 -->
          <span id="volnum">100</span>
          <div id="volbarcon">
            <span id="volbar"></span>
          </div>	
        </div><!-- 音量控制部分结束 -->
      </div><!-- 播放控制条部分结束 -->
      <div class="mask"><i id="mbtn" class="fa fa-play-circle" title="点击播放"></i></div>
    </div><!-- 视频盒子部分结束 -->

    <div class="playlist fl"><!-- 播放列表部分开始 -->
      <h3>播放列表</h3>
      <ul id="list">
      </ul>
    </div><!-- 播放列表部分结束 -->

    <div class="msgbox"><!-- 弹幕部分开始 -->
      <label>昵称:</label>
      <input type="text" id="usrname">
      <label>弹幕:</label>
      <input type="text" id="message">
      <input type="button" id="send" value="发送" />
    </div>
  </div><!-- 弹幕部分结束 -->
  
   <script type="text/javascript" src="js/main.js"></script>
</body>
</html>

CSS代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
@charset "UTF-8";
body,ul,li{
  margin: 0;
  padding: 0;
}

.fl{
  float: left;
}

.fr{
  float: right;
}

.clearFix:after{
  content: '';
  display: block;
  clear: both;
}

/*大盒子样式*/
.box{
  width: 1000px;
  height: 450px;
  margin: 0 auto;
}

/*视频盒子部分*/
.vbox{
  position: relative;
  width: 800px;
  height: 450px;
  overflow: hidden;
}

.vbox:hover .ctrlbox{
  display: block;
}

/*屏幕内弹幕span样式*/
.vbox span{
  position: absolute;
  white-space: nowrap;
  font-size: 18px;
}

/*控制条部分按钮样式*/
.vbox .ctrlbox span{
  color: #fff;
  position: relative;
}

/*视频盒子中间播放按钮*/
.mask{
  width: 90px;
  height: 90px;
  position: absolute;
  top: 180px;
  left: 355px;
  text-align: center;
}

#mbtn{
  position: relative;
  z-index: 900;
  display: block;
  height: 90px;
  width: 80px;
  padding: 0 5px;
  margin: 0;
  font-size: 90px;
  color: #000;
  line-height: 90px;
}

/*时间进度部分*/
/*视频总时间颜色*/
#fulltime{
  color: #afafaf;
}

/*时间显示样式*/
#nowtime,
#fulltime
{
  display: inline-block;
  width: 44px;
  font-size: 16px;
  line-height: 24px;
  top: -3px;
}

/*视频大小*/
#myvideo{
  width: 800px;
  height: 450px;
  transition: all 1s ease;
}

/*控制盒子部分*/
.ctrlbox{
  width: 770px;
  height: 50px;
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 0 10px 0 20px;
  background-color: #141414;
  font-size: 24px;
  line-height: 50px;
  color: #fff;
  display: none;
}

/*按钮字体样式*/
i{
  font-style: normal;
  display: inline-block;
  width: 30px;
  height: 30px;
  margin-right: 5px;
  text-align: left;
  cursor: pointer;
}

/*播放按钮*/
#playbtn{
  display: inline-block;
  width: 20px;
  height: 24px;
  text-align: center;
}

#sep{
  position: relative;
  top: -2px;
}

/*进度条部分*/
.progress{
  z-index: 50;
  position: relative;
  display: inline-block;
  width: 480px;
  height: 8px;
  margin-bottom: 4px;
  margin-left: 6px;
  border-radius: 8px;
  overflow: hidden;
  background-color: #fff;
  cursor: pointer;
}

#pgbar{
  z-index: 10;
  position: absolute;
  left: 0;
  top: 0;
  display: inline-block;
  height: 8px;
  border-radius: 8px;
  background-color: #9f9f9f;
}

#volume{
  line-height: 50px;
}

/*音量控制部分*/
/*音量控制盒子*/
.volctrl{
  width: 40px;
  height: 110px;
  padding: 5px 0;
  background-color: #141414;
  text-align: center;
  position: absolute;
  right: 58px;
  bottom: 45px;
  display: none;
}

/*音量大小数值*/
#volnum{
  position: absolute;
  display: block;
  width: 100%;
  height: 20px;
  font-size: 14px;
  line-height: 20px;
}

/*音量条盒子*/
#volbarcon{
  display: block;
  margin-left: 16px;
  margin-top: 20px;
  width: 8px;
  height: 90px;
  border-radius: 8px;
  background-color: #fff;
  position: absolute;
  z-index: 100;
  overflow: hidden;
  cursor: pointer;
}

/*音量条*/
#volbar{
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 20;
  display: block;
  width: 8px;
  height: 100%;
  border-radius: 8px;
  background-color: #9f9f9f;
}

/*播放列表部分*/
.playlist{
  height: 450px;
  width: 200px;
  position: relative;
  background-color: #1f1f1f;
}

h3{
  margin: 10px 0 0;
  padding: 0;
  font-size: 20px;
  color: #fff;
  padding-left: 10px;
}

#list{
  width: 100%;
  margin-top: 20px;
}

/*播放列表项样式*/
#list li{
  list-style: none;
  width: 185px;
  height: 40px;
  margin: 0 5px 5px;
  padding-left: 5px;
  font-size: 14px;
  line-height: 40px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #fff;
  background-color: #2F2F2F;
  cursor: pointer;
}

#list li:hover{
  background-color: #4f4f4f;
}

/*发送弹幕区域*/
.msgbox{
  clear: both;
  width: 980px;
  height: 50px;
  padding: 0 10px;
  margin: 10px auto 0;
}

/*弹幕部分文本框样式*/
input{
  width: 200px;
  font-size: 16px;
  padding: 8px;
}

#usrname{
  width: 120px;
  margin-right: 20px;
}

label{
  font-size: 16px;
  line-height: 30px;
}

/*发送按钮*/
#send{
  width: 80px;
  padding: 5px;
  border-radius: 3px;
  margin-top: 10px;
  margin-left: 20px;
  font-size: 20px;
  color: #fff;
  line-height: 26px;
  border: 0;
  outline: none;
  cursor: pointer;
  background-color: #1C96D6;
}

js代码

以下是js代码部分，注释较为详细，应该很容易看明白。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
// 视频文件名存在数组之中
var names = ["Taylor Swift - Begin Again.mp4","Taylor Swift - Safe & Sound.mp4","Taylor Swift - Red.mp4","Taylor Swift - I Don’t Wanna Live Forever.mp4","我怀念的 - 林俊杰.mp4"];
var list = document.getElementById("list");
var myvideo = document.getElementById("myvideo");
var mask = document.getElementsByClassName("mask")[0];
var mbtn = document.getElementById("mbtn");
var ctrlbox = document.getElementsByClassName("ctrlbox")[0];
var play = document.getElementById("playbtn");
var stop = document.getElementById("stopbtn");
var mute = document.getElementById("volume");
var expand = document.getElementById("expand");
var nowtime = document.getElementById("nowtime");
var fulltime = document.getElementById("fulltime");
var pgbar = document.getElementById("pgbar");
var index;  // 定义播放指针

// 动态添加视频播放列表
for(var i = 0; i < names.length; i++){
  var li = document.createElement("li");
  // 设置列表内容为对应的视频名
  li.innerText = names[i];
  // 鼠标停留在某个li上时显示当前视频文件名，使用title属性
  li.title = li.innerText;
  list.appendChild(li);	// 将视频添加至列表
}

// 设置初始状态视频地址
var lis = list .getElementsByTagName("li");
myvideo.src = "video/" + lis[0].innerText;
lis[0].style.backgroundColor = "#5f5f5f";  // 设置当前选中视频在列表中高亮
index = 0;

// 当视频可以播放时，显示视频总时间
myvideo.oncanplay=function(){
  // 视频总长度
  fulltime.innerText = secTomin(myvideo.duration);
}

// 定义时间转换函数，“秒”转 “分+秒”
function secTomin(seconds){
   var s = Math.round(seconds % 60);
   if(s < 10){
     s = "0" + s;
   }
   var m = Math.floor(seconds/60);
   if(m < 10){
     m = "0" + m;
   }
   var t = m + ":" + s;
   return t;
}

// 进度条部分 + 显示视频当前播放时间
//视频播放中根据播放进度更新显示进度条，监听视频时间更新事件
myvideo.addEventListener('timeupdate', function() {
    var currentPos = this.currentTime;  //获取当前播放的位置
    //更新进度条
    var percentage = 100 * currentPos / myvideo.duration; 
    pgbar.style.width = percentage + '%';
    // 显示视频当前播放时间
    nowtime.innerText = secTomin(currentPos);
    // 如果视频播放结束，调用循环播放函数实现列表循环播放
  if(myvideo.ended){
    setTimeout(loopPlay, 1000);	// 1s后开始播放下一首,预留一点加载时间
  }
});

// 列表循环播放函数
function loopPlay(){
  // 判断并设置播放指针
  // 如果当前是列表最后一个视频，跳到第一个视频，否则继续下一个
  if(index == lis.length-1){
    index = 0
  }
  else{
    index += 1;
  }
  // 播放列表状态跟随播放视频自动切换
  // 先清空上一个列表项的高亮激活状态，恢复为未选中时候的背景色
  for(var j = 0; j < lis.length; j++){
    lis[j].style.backgroundColor = "#2f2f2f";
  }
  // 设置当前选中列表项的背景色为高亮激活状态
  lis[index].style.backgroundColor = "#5f5f5f";
  // 切换视频地址为下一首地址，并自动播放
  myvideo.src = "video/"+lis[index].innerText;
  play.onclick();
}

// 播放进度条部分
// 鼠标在播放条上点击时，实现实时跳转播放
var progress = document.getElementsByClassName("progress")[0];
// 定义函数获取点击位置X坐标，得到点击位置距离浏览器左边界的距离
progress.onmousedown = function(e){
  e = e || window.event;
  updatebar(e.pageX);
}

function updatebar(x){
  //计算点击位置距离进度条左边的距离，注意！！！！
  // 得到的X的值是当前点击位置距离浏览器左边界的距离
  // 而进度条是相对于vbox绝对定位的
  // 得到的progress.offsetLeft是相对于播放器左侧边界定位的
  // 因此要得到进度条点击后的长度还要减掉vbox.offsetLeft
  var positions = x - progress.offsetLeft - vbox.offsetLeft;
  var percent = 100 * positions / (progress.offsetWidth);
  // 细小误差容错、纠正
  if (percent > 100) {
    percent = 100;
  }
  if (percent < 0) {
    percent = 0;
  }
  // 更新进度条宽度 以及 视频当前播放时间currenttime
  pgbar.style.width = percent + '%';
  myvideo.currentTime = myvideo.duration * percent / 100;
};

// 音量部分
// 音量控制进度条
var volnum = document.getElementById("volnum");
var volbarcon = document.getElementById("volbarcon");
var volbar = document.getElementById("volbar");

volbarcon.onclick = function(e){
  e = e || window.event;
  volControl(e.pageY);
}

// 音量按钮鼠标滑过显示音量控制条,鼠标移出隐藏音量控制条
var volctrl = document.getElementsByClassName("volctrl")[0];
mute.onmouseover = function(){
  volctrl.style.display = "block";
}

mute.onmouseout = function(){
  volctrl.style.display = "none";
}

// 鼠标在音量条上移动时候继续显示音量控制条
volctrl.onmousemove = function () {
   volctrl.style.display = "block";
}
// 鼠标从音量条上移出时候继续显示音量控制条
volctrl.onmouseout = function () {
   volctrl.style.display = "none";
}

// 监控音量变化，实时显示当前音量
myvideo.addEventListener('volumechange', function() {
    // 显示视频当前音量
    // 如果视频静音，则显示为0
    if(myvideo.muted){
      volnum.innerText = "0";
    }
    else{
      volnum.innerText = parseInt(myvideo.volume*100);
    }
});

// 音量控制函数
function volControl(y){
  // 注意百分比计算方法:(声音条下方距离顶部距离-点击位置的Y坐标)/声音条高度
  // 这里的声音条下端和视频盒子控制条最上边对齐，方便计算百分比
  // 另外注意音量范围为 0~1
  var curpos = vbox.offsetHeight-ctrlbox.offsetHeight - y;
  var per = 100 * curpos / (volbarcon.offsetHeight);
  volbar.style.height = per + '%';
  myvideo.volume = per / 100;
  // 如果音量=0，更换图标为volume-off，变暗，显示颜色为#ccc
  if(myvideo.volume == 0){
    volume.className = "fa fa-volume-off";
    mute.style.color = "#ccc";
  }
  // 如果音量在0-0.5之间，更换图标为volume-down
  else if(myvideo.volume>0 && myvideo.volume < 0.5){
    volume.className = "fa fa-volume-down";
    mute.style.color = "#fff";
  }
  // 如果音量在0.5-1之间，更换图标为volume-up
  else{
    volume.className = "fa fa-volume-up";
    mute.style.color = "#fff";
  }
}

// 播放控制
// 点击按钮实现播放，按钮改为暂停按钮（点击暂停）
// 再次点击按钮暂停，按钮切换为播放按钮（点击播放）
play.onclick = function(){
  if(!myvideo.paused){
    myvideo.pause();
    play.className = "fa fa-play";
    play.title = "点击播放";
    // 视频暂停时，大按钮才显示
    mask.style.display = "block";
  }
  else{
    myvideo.play();
    play.className = "fa fa-pause";
    play.title = "点击暂停";
    // 视频播放时，大按钮隐藏
    mask.style.display = "none";
  }
}

// 点击键盘按键控制播放
document.onkeydown=function(event){
   var e = event || window.event || arguments.callee.caller.arguments[0];
  // 点击空格键实现播放、暂停
  if(e && e.keyCode==32){ // 按 空格键 
      play.onclick();
    }
    // 点按 ENTER键 发送弹幕，先判断是否填写完整
  if(e && e.keyCode==13){ // 按 ENTER键
    // 如果弹幕信息均不为空，则发送弹幕
    if(usrname.value !=="" && message.value !==""){
      send.onclick();
    }
    // 只要有一项未填写，则不发送弹幕，弹窗提醒
    else{
      if(usrname.value ==""){
        alert("请填写昵称后再发送!");
      }
      else{
        alert("请填写弹幕内容后再发送!");
      }
    }
  }
  // 上下方向键控制音量
  // 按↑方向键，音量+1，音量条高度与音量同步
  if(e && e.keyCode==38){ // ↑方向键
    // 调出播放控制条、音量条
    showctrl();
    if(myvideo.volume !== 1){
      myvideo.volume += 0.01;
      volbar.style.height = myvideo.volume * 100 + "%";
    }
    else{
      myvideo.volume = 1;
    }
    // 2s后隐藏控制条和音量条
    setTimeout(hidectrl,2000);
  }
  // 按↓方向键，音量-1，音量条高度与音量同步
  if(e && e.keyCode==40){ // ↓方向键
    // 调出播放控制条、音量条
    showctrl();
    if(myvideo.volume !== 0){
      myvideo.volume -= 0.01;
      volbar.style.height = myvideo.volume * 100 + "%"; 
    }
    else{
      myvideo.volume = 0;
    }
    // 2s后隐藏控制条和音量条
    setTimeout(hidectrl,2000);
  }
  // 左右方向键实现前进、后退
  // 按右方向键，进度+10s，进度条宽度与时间同步
  // 判断距离结束时间大于15s时才可以快进
  if(e && e.keyCode==39){ // →方向键
    // 调出控制台
    ctrlbox.style.display = "block";
    if(myvideo.duration - myvideo.currentTime > 15){
      myvideo.currentTime += 10;
      pgbar.style.width = myvideo.currentTime/myvideo.duration + "%";
    }
    // 2s后隐藏播放控制条
    setTimeout(function(){
      ctrlbox.style.display = "none";
    }, 2000);
  }
  // 按左方向键，进度-10s，进度条宽度与时间同步
  // 判断距离开始时间大于15s时可以快退
  if(e && e.keyCode==37){ // ←方向键
    // 调出控制台
    ctrlbox.style.display = "block";
    if(myvideo.currentTime > 15){
      myvideo.currentTime -= 10;
      pgbar.style.width = myvideo.currentTime/myvideo.duration + "%";
    }
    // 2s后隐藏播放控制条
    setTimeout(function(){
      ctrlbox.style.display = "none";
    }, 2000);
  }
};

// 调出播放控制条和音量控制条函数
function showctrl(){
  ctrlbox.style.display = "block";
  volctrl.style.display = "block";
} 
// 隐藏播放控制条和音量控制条函数
function hidectrl(){
  ctrlbox.style.display = "none";
  volctrl.style.display = "none";
}

// 点击列表项实现视频切换，并自动播放
for(var i = 0; i < lis.length; i++){
  // lis[i].index = i;
  lis[i].onclick = function(){
    myvideo.src = "video/" + this.innerText;
    play.onclick();
    // 先清空上一个列表项的高亮激活状态，恢复为未选中时候的背景色
    for(var j = 0; j < lis.length; j++){
      lis[j].style.backgroundColor = "#2f2f2f";
    }
    // 设置当前选中列表项的背景色为高亮激活状态
    this.style.backgroundColor = "#5f5f5f";
    // 传递播放指针
    index = this.index;
  }
}

// 点击视频实现播放/暂停功能
myvideo.onclick = function(){
  play.onclick();
}

// 双击视频全屏播放
myvideo.ondblclick = function(){
  expand.onclick();
}

// 点击停止按钮停止播放
stop.onclick = function(){
  myvideo.currentTime = "0";
  myvideo.pause();
}

// 点击静音按钮实现静音，再次点击恢复音量，同时音量条高度与音量同步
mute.onclick = function(){
  if(!myvideo.muted){	
    myvideo.muted = true;
    this.className = "fa fa-volume-off";
    this.style.color = "#ccc";
    this.title = "取消静音";
    // 点击静音后音量条归零
    volbar.style.height = "0";
  }
  else{
    myvideo.muted = false;
    this.className = "fa fa-volume-up";
    this.style.color = "#fff";
    this.title = "点击静音";
    // 点击取消静音后音量条恢复
    volbar.style.height = myvideo.volume * 100 + "%";
    volnum.innerText = myvideo.volume * 100;
  }
}

// 点击全屏按钮实现全屏播放
expand.onclick=function(){      
    requestFullScreen(myvideo);     
};     

// 全屏播放函数
function requestFullScreen(element) {
         
    var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;    
    
    if (requestMethod) {      
        requestMethod.call(element);    
    } 
    else if (typeof window.ActiveXObject !== "undefined") {      
        var wscript = new ActiveXObject("WScript.Shell");    
        if (wscript !== null) {    
            wscript.SendKeys("{F11}");    
        }    
    }    
}

// 点击屏幕中间的大按钮实现播放、暂停
mbtn.onclick = function(){
  play.onclick();
}

// 弹幕部分
var vbox = document.getElementsByClassName("vbox")[0];
var user = document.getElementById("usrname");
var message = document.getElementById("message");
var send = document.getElementById("send");
var str = "";
var timer;

// 生成弹幕 发送弹幕
send.onclick = function(){
  str = user.value + " : " + message.value;
  var span1 = document.createElement("span");
  span1.innerText = str;
  vbox.appendChild(span1);
  span1.style.top = Math.floor(Math.random()*401) + "px";	// 随机生成弹幕距离视频上边距的距离
  span1.style.left = "800px";
  span1.style.color = "#" +Math.floor(Math.random()*0xffffff).toString(16);	//随机生成颜色
  
  // 设置定时器实现弹幕自动滚动
  timer = setInterval(function(){
    span1.style.left = (parseInt(span1.style.left)-1) + "px";
    // 如果弹幕离开视频左边界一段距离，则删除该弹幕
    if(span1.style.left == "-400px"){
      vbox.removeChild(span1);
    }
    // 如果屏幕里无弹幕，则清空定时器timer
    var spans = vbox.getElementsByTagName("span");
    if(spans.length == 0){
      clearInterval(timer);
    }
  }, 18);

  // 弹幕生成完毕发送后，清空输入框，文本框失去焦点
  str = "";
  user.value = "";
  message.value = "";
  user.blur();
  message.blur();
}