video重写控制条——解决video全屏层级最高问题

全屏video会在最上层，这个时候设置定位或者z-index都是无效的，按照有些博客中的z-index设置成2147483647也没用，x5-video-player-type="h5"也没用，于是决定重写控制条。

经过分析，简单的重写控制条的话，有这么几个功能点：

1.暂停功能/播放功能

• 播放时进度条跟随功能
• 播放时时间改变功能
• 暂停时进度条停止功能
• 暂停时时间停止功能

2.全屏功能

• 进入全屏
• 退出全屏

3.当前时间和总时间的显示

• 播放的当前时间
• 播放的总时间

4.进度条拖动功能

• 进度条拖动时画面跳转功能
• 进度条拖动时时间跟随变化功能

5.播放结束时的处理

一、页面的HTML部分

<!-- @contextmenu.prevent="" 禁止右键菜单 -->
<div class="relative" @contextmenu.prevent="">
        <div class="content">
          <div class="player">
            <video 
              preload="auto"
              webkit-playsinline="true"
              playsinline="true"
              x-webkit-airplay="allow"
              x5-video-player-type="h5"
              x5-video-player-fullscreen="true"
              style="object-fit: fill"
              :src="src"
            >
              您的浏览器不支持 video 标签。
            </video>
            <div class="control">
              <div
                class="iconfont iconfa-play play_pause"
                @click="handlePlay"
              ></div>
              <div>
                <el-slider
                  v-model="progressValue"
                  class="progress"
                  @change="handleChangeProgress"
                ></el-slider>
              </div>
              <div class="timer">
                <span class="progress_timer">00:00:00</span>/
                <span class="duration_timer">00:00:00</span>
              </div>
              <div
                class="iconfont iconexpand expand"
                @click="handleSreen"
              ></div>
            </div>

            <img
              v-watermark="{
   
                text: baseParamPressimg,
                textColor: 'rgb(180, 180, 180)',
              }"
              class="baseParamPressimg"
              @click="handleImg"
            />
          </div>
        </div> 
      </div>

二、css部分

/*video样式*/
/deep/.video-box {
   
  overflow: hidden;
  background: #000;
  width: 750px;
  display: block;
  margin: 0 auto;
  -webkit-transition-duration: 300ms;
  -moz-transition-duration: 300ms;
  -ms-transition-duration: 300ms;
  -o-transition-duration: 300ms;
  trans