vue-video-player断点续播实现代码示例

本篇文章小编给大家分享一下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
 })
}

	那么到了这一步 进度就能保存下来了


	5.进度恢复


	想要恢复进度，就必须在视频播放前把 保存进度下来的设置到视频当中，通过打印可以看出playerReadied 可以设置

/* 设置视频进度 */
playerReadied: function (player) {
//可在此调用后台交互方法
...
player.currentTime(this.learningDuration.timeLog)
},

	到此 进度可以 恢复了 大功告成！。至于后台交互数据 需求不一样，代码也就没有贴出来。