vue-video-play 记载视频观看时间和还原视频进度

vue-video-play 还原视频进度

参考文档 vue-video-play 实现视频播放进度保存

从后台获取的播放视频参数如下:

1. 当前播放到哪里了的时间videoLearnedTime
2. 视频时长videoTotalTime
3. 视频地址
4. 用户ID
5. 视频ID

因为本人的需求是同一页面，要切换加载不同的视频 ，发现ready这个函数不能准确的加载。故在load里面做文档了。不废话上代码。

//在computed时候，把player全局化

computed: {
 player() {
    return this.$refs.videoPlayer.player
 },
}

//在mounted的时候 请求后台（方法略） this.player.src(this.fileUrl)；播放视频地址

//
//视频加载时候的函数
onPlayerLoadeddata(player) {
   console.log('player Loadeddata!', player)
   this.cacheHandler(player); //缓存视频的方法
   this.pauseTime = true; // 视频暂停计时的函数，还原功能无效，计时功能中有效
 },
 /*
* 视频缓存进度的方法，还原进度时间的方法
* 为了确保，视频显示的位置，视频长度和缓存的时间做比较，在此期间，视频未必先加载出来，
* 故再请求一次接口拿视频总长度和学习时间，请求接口的速度比视频加载快。
* */
cacheHandler(player) {
   let playedTime = ~~localStorage.getItem(`player_${视频ID}_${用户ID}_playing`) || 0;
   let videoTotalTime = this.videoTotalTime; //视频时长
   let videoLearnedTime = this.videoLearnedTime || 0;//视频已看时长
   if (playedTime) {
       player.currentTime(playedTime < videoTotalTime?playedTime :0)
   } else {
       player.currentTime(videoLearnedTime < videoTotalTime ? videoLearnedTime:0)
   }
},
//此函数不点击开始都会运行的
onPlayerTimeupdate(player) {
     const src = player.currentSrc();
     //实时写入数据
      const playing = parseInt(localStorage.getItem(`player_${视频ID}_${用户ID}_playing`)) || 0
      this.time_playing = ~~(player.currentTime()) // 获取整秒值
      if(this.tips == 1 || this.tips == 2){ //点击开始以后 ，默认tip 为false，此函数不点击开始都会运行的故增加tips变量
          localStorage.setItem(`player_${视频ID}_${用户ID}_playing`, this.time_playing||0)
      }
      if ( this.time_playing > playing && this.tips==1) {
          ++this.onlineLearnedTime;
          ++this.videoLearnedTime;
          (this.onlineLearnedTime == 1)&&(this.addRecord(1, 0))
          /*if(!this.firstClickPlay){// 第一次点击play
	          setTimeout(()=>{
	            this.perTimeHandler()
	            this.firstClickPlay = 2;
			  },750)
		  }else{*/
          this.perTimeHandler()
          //}
          this.tips = 2;  //点击开始以后 ，tip 为2，随便定义
      }
 },

此方法比正常计时其实快了 750毫秒。。。可以setTimeout（）延迟一把，我不要那么精确 就算了。
至此结束。

vue-video-play 记载视频观看时间

** 不考虑video时waiting和playing响应事件无效的时候。

此处新增3全局变量

1. tips:false,//判断是否成功加载完成的函数
2. pauseTime:false,//视频加载时，视频暂停函数
3. onlineLearnedTime：0 //在线学习视频统计时间

坑爹之处

1. 视频一开始不加载。或者加载失败的时候，不能计时。
2. 视频卡的时候不能计时。

//每秒记载已学习时间，和在线学习时间
perTimeHandler() {
    this.countPerTime = setInterval(() => {
        !this.pauseTime && (this.videoLearnedTime++);
        !this.pauseTime && (this.onlineLearnedTime++);
    }, 1000)
},
onPlayerWaiting(player) {
	this.pauseTime = true;
},
onPlayerPlaying(player) {
    this.pauseTime = false;
}，
onPlayerPause(player) {
      this.tips = 2; //暂停的时候 tips 变2了
      this.tipsTime && clearInterval(this.tipsTime);  //清除计时
  },
  //播放结束时，请求一次后台接口,通知已学完了
  onPlayerEnded(player) {
      this.onlineLearnedTime++; //补差1S 此处就是差1S 原因不明
      this.videoLearnedTime++; //补差1S 此处就是差1S 原因不明
      this.addRecord(this.onlineLearnedTime, 1)  //发送给后台计时时间打点的函数 （秘密）
  },

vue-video-play 全屏也要将弹出窗DOM置顶

1.修改videojs源码。 18107行

this.el_.parentNode.webkitExitFullScreen();

此全屏的DOM是在player.vue目录的第2个div，所以在其他地方写的弹窗并不能置顶。

可以将弹窗 写在video标签父级 或者 父级父级处。。 将弹窗写在父级父级里。。
如果是父级父级的话。。。

this.el_.parentNode.parentNode.webkitExitFullScreen();

2.将node_module文件里的源码 player.vue 导出到项目
3.将index.js导出至项目
修改videojs的引用地址。然后按需改造吧

---

虽然我是一根老油条，但我的确是vue初学小渣渣。。。另有高明手法 求请教。