话不多说直接上代码
<vue3VideoPlay
v-bind="options" @play="onPlay" @pause="onPause" @timeupdate="onTimeupdate" @loadedmetadata="loadEdmetadata"
/>
@timeupdate="onTimeupdate"
时长更新函数,通过ev.target.currentTime获取当前时间,最好parseInt取整一下
const onTimeupdate = (ev: any) => {
videoCurDuration.value = ev.target.currentTime
}
然后就是获取资源总时长
@loadedmetadata="loadEdmetadata"
通过ev.target.duration获取总时长(duration这里要点开ev仔细去找对应名称,一开始看了几遍没发现..)
const loadEdmetadata = (ev:any) => {
videoAllDuration.value = ev.target.duration
}
然后把(currentTime/duration)就是当前视频进度拉
加载页面时候创建定时任务setInterval,把当前进度传给后台就ok了,离开记得销毁定时器
vue3VideoPlay插件引入教程如下:
https://blog.csdn.net/qq_19309473/article/details/129468215