H5 移动端自定义video的控制条

最近在做一个视频播放的项目，用video自带的控制条(controls)，点击全屏之后，再退出全屏之后，会导致输入框触发不了键盘事件，一直找不到原因，最后实在没办法，只能自己写全屏事件来解决这个问题。

1、首先把列表的video改为用图片展示

2、全屏后把设置video的宽高为100%，并去掉video的controls属性，这样就隐藏了video自带的控制条

video.style.width = '100%';
video.style.height = '100%';

3、全屏后手机自带的顶部导航栏隐藏没有赢藏，需要设置状态栏

//参数：true - 全屏;false - 不全屏
plus.navigator.setFullscreen(true);

4、写控制条

    处理控制条时间

video.addEventListener('timeupdate',()=>{
  totalTime = video.duration;//总时间
  let timeDisplay = video.currentTime;//当前播放时间
  let remainTime = totalTime - timeDisplay;//剩余时间
  //playTime 剩余时间 显示在控制条上的时间 doTime是把取到的时间转为时间格式
  this.videoControl.playTime = this.doTime(remainTime);
  //进度条
  btn.style.left = (timeDisplay/totalTime)*100+'%';
  bgc.style.width = (timeDisplay/totalTime)*100 +'%';
}) 

doTime(time){
  var res = "00";
  if(time>60){
    var mi = Math.floor(time/60);
    if(mi < 10){
      res = "0"+mi;
    }else {
      res = mi;
    }
    res = res +":";
    var s = Math.floor(time%60);
    if(s<10){
      res += "0"+s;
    }else {
      res += s;
    }
  }else {
    res = res + ":";
    s = Math.floor(time) || 0;
    if(s<10){
      res += "0"+s;
    }else {
      res +=s;
    }
  }
  return res;
},

拖动进度条

  var btn = document.getElementById('bt_');
  btn.addEventListener('touchmove',(event)=>{
  var allTime = this.parseTime(this.doTime(video.duration));
  let bgw = document.getElementById('bg_').offsetWidth;
  let btnw = event.targetTouches[0].pageX  - 90;
  let percent  = btnw / bgw;
  if(btnw <= bgw && btnw >=0){
    btn.style.left = btnw+'px';
    video.pause();
    video.currentTime = percent * allTime;
  }
})

控制条及全屏html css

<div v-if="showFullScreen" class="video-fullscreen" @click="showControls">
  <div style="width: 100%;height: 100%;position: relative">
    <video id="bigvideo"
           :src="fullScreenUrl"
           preload="none">
    </video>
    <div class="video-contorls" id="controls">
      <ul class="video-control">
        <li @click.stop="videoPause">
          <img v-if="videoControl.status == 'play'" src="../../assets/images/video-play.png" style="width: 20px;height: 16px"/>
          <img v-if="videoControl.status == 'pause'" src="../../assets/images/video-pause.png" style="width: 20px;height: 16px"/>
        </li>
        <li style="margin-right: 10px">
          <span>{{videoControl.playTime}}</span>
        </li>
        <li class="video-progress">
          <div id="progress">
            <div style="width:100%;" class="abgs_a">
              <div id="box_">
                <div id="bg_">
                  <div id="bgcolor_"></div>
                </div>
                <div id="bt_"></div>
              </div>
            </div>
          </div>
        </li>

        <li @click.stop="closeFullScreen()">
          <img src="../../assets/images/video-shrink.png" style="width: 18px;height: 18px"/>
        </li>
      </ul>
      
    </div>

  </div>

</div>

.video-fullscreen{
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: #000;
  z-index: 9999;
}

.video-progress{
  display: inline-block;
  width: 40%;
  margin-left: 10px;
  margin-right: 20px;
}

#box_ {
  position:relative;
  width:100%;
  border:1px solid transparent;
}
#bg_ {
  height:5px;
  margin-top:6px;
  border:1px solid #ddd;
  overflow:hidden;
}
#bgcolor_ {
  background:#ff6600;
  width: 0px;
  height:5px;
}
#bt_ {
  width:16px;
  height:16px;
  background-color:rgb(243,243,243);
  border-radius:50%;
  overflow:hidden;
  position:absolute;
  margin-left:-5px;
  border:1px solid #d0cbcb;
  top:1px;
  cursor:pointer;
}
.video-contorls .play-icon{
  vertical-align: top;
  margin-right: 5px;
  margin-top: -4px;
  display: inline-block;
  border-style: solid;
  border-width: 8px 0 8px 15px;
  border-color: transparent transparent transparent #666;
}
.video-contorls .pause-icon{
  width: 8px;
  height: 15px;
  vertical-align: top;
  margin-right: 5px;
  margin-top: 1px;
  display: inline-block;
  border-style: double;
  border-width: 0px 0px 0px 10px;
  border-color: #666;
}
.video-control{
  padding: 15px 0 30px 0px;
}
.video-control li{
  list-style: none;
  float: left;
}
.video-control li:first-child{
  margin-left: 10px;
  margin-right: 10px;
}