vue3VideoPlay 如何获取视频进度

话不多说直接上代码

 <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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容