最近公司项目中，添加了视频模块，但是产品觉得Video自带的控制条有点LOW，于是自己设计了一个。于是开始了自定义Video控制的采坑之旅。。
首页效果图：
需求描述：
当鼠标放在图片上的时候，自动播放视频，并显示预览进度条，当鼠标移开，显示预览图片，再次hover图片，继续上次播放
视频详情页的效果图：
需求描述：
能自定义的暂停和播放
模仿进度条可实现拖拽播放速度
显示当前时间
能选择倍速
能控制声音
能全屏播放
接下来一步步的实现
首先康康首页的，上结构代码：
<div @mouseover="play(item3.images_id)" @mouseout="pause(item3.images_id)"> <img v-lazy="item3.picture" alt="" v-show="id != item3.images_id"> <video ref="videoAll" :src="item3.short_video" @timeupdate="commonVideoUpdata(index)" muted loop="loop"> </video> </div> <div 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 currentTimeVal:0 //进度条 } }, methods:{ //开始播放 play(val) { this.id = val }, // 停止播放,显示图片清零进度条 pause(val) { this.id = 0 this.currentTimeVal = 0 }, // 公共video获取时间 commonVideoUpdata(id) { let videoObj = this.$refs.videoAll console.log(videoObj); let currTime = videoObj[id].currentTime //当前时间 let duration = videoObj[id].duration //总时间 let pre = currTime / duration this.currentTimeProgress = pre * 100; }, }
这里使用video 的timeupdate内置方法获取当前播放时间，并获取当前的的dom元素，这里的videoObj打印出来是个数组：
我们通过当前元素在数组中循环出来的索引来获取对应视频的时间，最后一个简单的计算进度条的方法，（当前时间 / 总时间）* 100 = 进度条的值
注意坑点
：如果在数组中掺杂了其他的非视频文件，这里使用ref的方式,就不能根据索引来获取,就得定义唯一的ref，嘿嘿！
到此首页功能结束了，接着实现详情页的自定义控制条。
html部分：
<div> <div> <video :src="item.video_file" loop="loop" preload="auto" @timeupdate="videoTimeUpdate" @click="controlVideo" ref="videoCon"> 您的浏览器不支持 video 标签。 </video> </div> //视频中的暂停按钮 <div @click="controlVideo" :style="[opcityVal]"></div> // 控制条的播放和暂停按钮 <div> <p @click="controlVideo"> <span v-show="!vcIsPlay"></span> <span v-show="vcIsPlay"></span> </p> //播放进度条 <div> <div> <el-slider v-model="vcProgress" :show-tooltip="false" :max="durationProgress" input-size="small" @change="getNewTime"></el-slider> </div> <!-- <p></p> --> </div> //当前播放时间 <div>{{vcCurrentTime}}</div> //视频总时长 <div>{{item.duration_time}}</div> //倍速控制 <div @click="getPlayBackRate"> <el-dropdown placement="bottom" @command="handleCommand"> <!-- <span> --> <span>{{speedTime}}</span> <!-- </span> --> <el-dropdown-menu slot="dropdown"> <el-dropdown-item command="1">0.5x</el-dropdown-item> <el-dropdown-item command="2">1x</el-dropdown-item> <el-dropdown-item command="3">1.5x</el-dropdown-item> <el-dropdown-item command="4">2x</el-dropdown-item> <el-dropdown-item command="5">3x</el-dropdown-item> </el-dropdown-menu> </el-dropdown> </div> //音量控制 <div> <span></span> <div> <el-slider v-model="voiceProgress" input-size="small" @change="getNewVoice"></el-slider> </div> </div> //全屏播放 <p title="全屏" @click="getFullSceen"> <span></span> </p> </div> </div>
css部分忽略了。。。
直接看功能：首先data部分：