仿抖音网页版自定义视频进度条

先上一个完成后的效果图：

在将视频垂直居中布局后：

1.删除视频原有的控制组件，去掉controls属性，html如下：

<video id="video" :src="report.videoUrl" autobuffer autoplay="autoplay" preload="auto" x5-playsinline="" playsinline="" webkit-playsinline="" width="100%" class="headVideo" ></video>

其中x5-playsinline="" playsinline="" webkit-playsinline=""这几个H5属性目的是禁止视频全屏播放

2.用absolute定位，将进度条布局在底部

<div class="control w100 pt5 pb5" @click="setProgress">
     <div class="progre