这篇文章主要介绍了vue-video-player 断点续播的实现,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
最近的项目中需要实现视频断点续播的功能，一听到这个功能。内心方张了..但却又有点小窃喜，小懵乱。抱着求学态度去挑战一下。
1.安装插件
npm install vue-video-player --save
2.Main.js 引入组件
import VideoPlayer from 'vue-video-player' require('video.js/dist/video-js.css') require('vue-video-player/src/custom-theme.css') Vue.use(VideoPlayer)3.页面使用组件
上面的 src视频地址可以换成具体的地址串,也能换成后台的地址串，因为我的是章节树所以我和章节id进行了关联
/** 查询部门下拉树结构 */ getTreeselect() { treeselect().then((response) => { //封面 var img = ''; this.ChapterOptions = response.data; for (let i = 0; i { this.$refs.tree.setCurrentKey(this.ChapterOptions[0].children[0].id); }) } }); }, // 筛选节点 filterNode(value, data) { if (!value) return true; return data.label.indexOf(value) !== -1; }, // 节点单击事件 handleNodeClick(data) { // console.log(data) var img = ''; //刷新原视频, 原封面 this.playerOptions.sources[0].src = ''; this.playerOptions.poster = ''; //转换视频 this.VideoUrl= JSON.parse(data.videoAddress); // console.log("this.VideoUrl") for (let i = 0; i 4.进度保存
接下来就是 保存视频的进度条了，通过打印发现onPlayerTimeupdate可获取到视频的进度，故采用定时器 每3秒触发一次数据交互
computed: { player() { return this.$refs.videoPlayer.player//自定义播放 } }, mounted () { this.timer = setInterval(this.putLearningObj, 3000) }, destroyed () { // 如果定时器在运行则关闭 if (this.timer) { clearInterval(this.timer) } }, methods: { putLearningObj () { if (!this.paused) { //保存视频进度 saveTime(this.learningDuration) console.log('putLearningObj ~~~~~~~~~') } }, //当前播放位置发生变化时触发。 onPlayerTimeupdate (player) { this.learningDuration.timeLog = player.cache_.currentTime // console.log(' onPlayerTimeupdate!', this.timeLog) }, },saveTime是我自定义的与后端交互的方法。（可自行定义）
// 保存视频进度 export function saveTime(data) { return request({ url: '/***/****/***/', method: 'put', data: data }) }那么到了这一步 进度就能保存下来了
4.进度恢复
想要恢复进度，就必须在视频播放前把 保存进度下来的设置到视频当中，通过打印可以看出playerReadied 可以设置
/* 设置视频进度 */ playerReadied: function (player) { //可在此调用后台交互方法 ... player.currentTime(this.learningDuration.timeLog) },到此 进度可以 恢复了 大功告成！。至于后台交互数据 需求不一样，代码也就没有贴出来。
到此这篇关于vue-video-player 断点续播的文章就介绍到这了,更多相关vue video player 断点续播内容请搜索html中文网以前的文章或继续浏览下面的相关文章希望大家以后多多支持html中文网！
以上就是vue-video-player 断点续播的实现的详细内容，更多请关注0133技术站其它相关文章！
