用VUE手撸一个视频播放控件

不说废话，先上图

视频播放前.png

视频播放中.png

1、视频播放之前，有一张封面图，中间有播放按钮，点击可以播放
2、有单独的控制悬窗
3、可以控制视频播放、暂停
4、有时间显示，包括当前时间和总时长，时间显示为分钟：秒数，单位数补零
5、有进度条随播放进度推进，拖动可以跳转到指定时间位置
6、控制悬窗可以显示和隐藏，点击视频区域可以调出或隐藏控制悬窗，在视频悬窗无操作5秒后自动隐藏
7、播放完成后，回到视频最初始状态1

在video元素中主要用到的元素信息包括：
1、主要方法：
play() //控制视频播放
pause() //控制视频暂停
2、主要属性：
currentTime //当前时间
3、回调方法：主要用到了标红部分

回调方法.png

实现方法：
VUE + Vant(UI) + Video元素属性和方法
只要掌握了video元素的以上用法，实现只是一种实践，为了使用方便，将本控件封装成了VUE控件，UI使用移动端较为通用的VantUI，使用Slider滑块编写视频进度条，暂停播放按钮也使用Vant中的icon即可。
建议有缘看着此贴的小伙伴，基于以上分析，自己动手实践完成。
暂时没找到的上传方法，有需要源码的请访问如下地址，感谢支持！
https://download.csdn.net/download/libingxit/22031494