vue项目中自定义video视频控制条的实现代码

　　最近公司项目中，添加了视频模块，但是产品觉得Video自带的控制条有点LOWASP编程，于是自己设计了一个。于是开始了自定义Video控制的采坑之旅。。

　　当鼠标放在图片上的时候，自动播放视频，并显示预览进度条，当鼠标移开，显示预览图片，再次hover图片，继续上次播放

　　2.video需要通过video来获取他实例来进行dom操作，video的鼠标移入和滑出分类是控制视频的播放和停止，play和pause是video的内置方法。 更多方法见这里哦~

　　3.这里的进度条使用的是element的滑动条组件，默认max是100，显示视频的时候，这里用v-show判断显隐。

　　css部分主要是要注意让video显示的时候和图片的宽高一致，不然就会出现图片大，视频小的情况，如图：

　　这里使用video 的timeupdate内置方法获取当前播放时间，并获取当前的的dom元素，这里的videoObj打印出来是个数组：

　　我们通过当前元素在数组中循环出来的索引来获取对应视频的时间，最后一个简单的计算进度条的方法，（当前时间 / 总时间）* 100 = 进度条的值

　　：如果在数组中掺杂了其他的非视频文件，这里使用ref的方式,就不能根据索引来获取,就得定义唯一的ref，嘿嘿！

　　直接调用提供的两个方法即可，然后使用vue的style绑定控制暂停按钮的显隐即可，这里的进度条，我换了种玩法，同样是element的滑动条组件，只不过max值我换成了总时长，单位秒，原因请耐心看下文，嘿嘿！

　　这里使用的是element的下拉组件，同样，Video的playbackRate可以直接赋值，控制播放速度

　　我也是使用的滑组件，max值保持默认的100，然后滑动改变的时候，把默认值除100，比如当前滑块的新值是50，除100后得到的就是【0-1】范围里的合法值，Video提供的volume值如果不在 0-1之间，就会报错

　　因为之前没有很仔细的搞过video，所以对它很多的内置属性和方法不了解，没经验就害怕，很慌很慌，这就跟谈恋爱似的，哈哈哈，再组长的支持和鼓励下，我大胆的尝试了，成功后，这次经验给了我很大信心，感觉以后写其他没做过的功能，都不会慌了，毕竟难的部分写elementUi的大佬们都给写好了，可以说是站在巨人的肩膀上，哈哈哈！膜拜大佬，以后还得多多努力了。asp 菜鸟教程