时间:2021-05-26
最近的项目中需要实现视频断点续播的功能,一听到这个功能。内心方张了..但却又有点小窃喜,小懵乱。抱着求学态度去挑战一下。
上面的 src视频地址可以换成具体的地址串,也能换成后台的地址串,因为我的是章节树所以我和章节id进行了关联
/** 查询部门下拉树结构 */ getTreeselect() { treeselect().then((response) => { //封面 var img = ''; this.ChapterOptions = response.data; for (let i = 0; i <this.ChapterOptions.length ; i++) { this.videoName = this.ChapterOptions[0].children[0].chapterName this.videoIntroduce = this.ChapterOptions[0].children[0].chapterIntroduce this.VideoUrl = JSON.parse(this.ChapterOptions[0].children[0].videoAddress) img = JSON.parse(this.ChapterOptions[0].children[0].imageAddress) //初始化封面 for (let j = 0; j <img.length ; j++) { this.playerOptions.poster =img[0]; } //初始化第一个章节视频 for (let j = 0; j <this.VideoUrl.length ; j++) { this.playerOptions.sources[0].src = this.VideoUrl[0] } //初始化章节 this.learningDuration.chapterId = this.ChapterOptions[0].children[0].id; //默认高亮第一个章节节点 this.$nextTick(()=>{ 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 <this.VideoUrl.length ; i++) { this.playerOptions.sources[0].src = this.VideoUrl[0]; } img = JSON.parse(data.imageAddress); for (let i = 0; i <img.length ; i++) { this.playerOptions.poster = img[0]; } // console.log("this.playerOptions.sources[0].src") // console.log(this.playerOptions.sources[0].src) //章节介绍 this.videoIntroduce = data.chapterIntroduce; //章节名称 this.videoName = data.chapterName; //章节id this.learningDuration.chapterId = data.id // console.log(this.videoIntroduce) },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 断点续播内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
起因之前写了一篇《vue2.0+vue-video-player实现hls播放》,里边有提到在用vue-video-player之前,我尝试着使用vue-dpl
本文实例为大家分享了vue-video-player视频播放器的使用配置,供大家参考,具体内容如下1、安装npminstallvue-video-player-
本文实例为大家分享了vue使用video插件vue-video-player的具体代码,供大家参考,具体内容如下进入我们的项目文件夹中,并打开命令行窗口,然后进
如果h5的标签不能满足你的需求,那就用这个组件Vue-Video-Player吧,也许可以覆盖到你的需求。配置参数:playerOptions:{height:
最终效果项目地址https://github.com/Tecode/flutter_widget实现方法安装插件安装video_player,我安装的是最新的版