最近公司项目中，添加了视频模块，但是产品觉得Video自带的控制条有点LOW，于是自己设计了一个。于是开始了自定义Video控制的采坑之旅。。
首页效果图：
需求描述：
当鼠标放在图片上的时候，自动播放视频，并显示预览进度条，当鼠标移开，显示预览图片，再次hover图片，继续上次播放
视频详情页的效果图：
需求描述：
能自定义的暂停和播放
模仿进度条可实现拖拽播放速度
显示当前时间
能选择倍速
能控制声音
能全屏播放
接下来一步步的实现
首先康康首页的，上结构代码：
<div class="clickL video-box" @mouseover="play(item3.images_id)" @mouseout="pause(item3.images_id)">
<img v-lazy="item3.picture" width="268" alt="" v-show="id != item3.images_id">
<video class="video-hover" ref="videoAll" onMouseOver="this.play()" :src="item3.short_video" @timeupdate="commonVideoUpdata(index)" width="268px" height="176px" onMouseOut="this.pause()" muted loop="loop">
</video>
</div>
<div class="process-slider common-progress" v-show="id == item3.images_id">
<el-slider v-model="currentTimeProgress" :show-tooltip="false" input-size="small"></el-slider>
</div>这里思路是：
1，判断用户鼠标事件，切换图片和视频。
2.video需要通过video来获取他实例来进行dom操作，video的鼠标移入和滑出分类是控制视频的播放和停止，play和pause是video的内置方法。 更多方法见这里哦~
3.这里的进度条使用的是element的滑动条组件，默认max是100，显示视频的时候，这里用v-show判断显隐。
css部分代码：
.video-box {
position: relative;
height: 176px; &>img {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 2;
}
&>video {
object-fit: fill; //拉伸填充盒子，保证和图片一样大
}
}
css部分主要是要注意让video显示的时候和图片的宽高一致，不然就会出现图片大，视频小的情况，如图：
逻辑部分：
data() {
return {
id:0, //保存当前播放的视频id
