h5播放器

pages3/polyv/detail.vue

@@ -790,6 +790,7 @@ export default {
       // h5
       vodPlayerJs: "https://player.polyv.net/script/player.js",
       player: "",
+      H5isAllowSeek: 'off',
     };
   },
   computed: {
@@ -1669,7 +1670,7 @@ export default {
 		getbaseprofiletplists() {
 			return new Promise(resolve => {
 				let self = this;
-        //  #ifdef MP-WEIXIN
+        // #ifdef MP-WEIXIN
 				this.getCameraSetting();
         // #endif
 				this.$api.getbaseprofiletplists({ goodsId: self.goodsId,orderGoodsId: this.orderGoodsId, }).then((res) => {
@@ -1858,18 +1859,25 @@ export default {
       if (this.hasStart) { // 防止loadedmetadata事件第二次触发
         return
       }
+      // #ifdef MP-WEIXIN
 			polyvPlayerContext = this.selectComponent("#playerVideo");
+      // #endif
 			this.hasStart = true;
 			uni.$off('playPause')
 			uni.$on('playPause',() => {
+        // #ifdef MP-WEIXIN
 				polyvPlayerContext.pause()
+        // #endif
+        // #ifdef H5
+        polyvPlayerContext.j2s_pauseVideo() // 暂停播放视频
+        // #endif
 			})
 			if(!this.recordObj.videoCurrentTime) { //新视频直接提交一条观看记录
 				this.postStudyRecord(0)
 			}
       this.studyTimer = setInterval(() => {
         this.postStudyRecord(0)
-      }, 15 * 1000)
+      }, 15000)
 		},
     getPhotoLastRecord() {
       let self = this;
@@ -2220,6 +2228,11 @@ export default {
       // console.log('this.recordObj:', this.recordObj)
       this.needSeek = true; //跳转到播放记录
       this.startStatus = true;
+      // #ifdef H5
+      console.log('h5h5h5h5h5h', this.vid);
+      await this.clears()
+      this.loadPlayerScript(this.loadPlayer)
+      // #endif
       // 提交学习记录
       this.postStudyRecord(0)
       //获取节笔记
@@ -2603,10 +2616,10 @@ export default {
     timeEvent() {
       // var polyvPlayerContext = this.selectComponent("#playerVideo");
       if (polyvPlayerContext != null) {
-        //  #ifdef MP-WEIXIN
+        // #ifdef MP-WEIXIN
         this.playTime = polyvPlayerContext.getCurrentTime(); //播放时刻
         // #endif
-        //  #ifdef H5
+        // #ifdef H5
         this.playTime = polyvPlayerContext.j2s_getCurrentTime()
         // #endif
         // console.log(789, this.photoHistoryList, 'this.photoList:', this.photoList, 'photoNum:', this.photoNum, 'playTime:', this.playTime)
@@ -2625,11 +2638,11 @@ export default {
                 //不存在拍照历史，没有重修过，没有学过，则拍照
                 //启动拍照
                 //暂停
-                //  #ifdef MP-WEIXIN
+                // #ifdef MP-WEIXIN
                 polyvPlayerContext.exitFullScreen();
                 polyvPlayerContext.pause();
                 // #endif
-                //  #ifdef H5
+                // #ifdef H5
                 polyvPlayerContext.j2s_pauseVideo();
                 // #endif
                 this.photoIndex = i;
@@ -2993,7 +3006,12 @@ export default {
           //   self.autoplay = true;
           // }
           if (self.goodsPlayConfig.drag > 0) {
+            // #ifdef MP-WEIXIN
             self.isAllowSeek = "yes";
+            // #endif
+            // #ifdef H5
+            this.H5isAllowSeek = 'on'
+            // #endif
           }
           if (self.goodsPlayConfig.speed > 0) {
             self.playbackRate = [0.5, 0.8, 1.0, 1.25, 1.5, 2.0];
@@ -3219,9 +3237,9 @@ export default {
     },
     // 播放视频
     loadPlayer() {
-      const polyvPlayer = window.polyvPlayer;
-      console.log(polyvPlayer, this.recordObj.videoCurrentTime, 666);
-      this.$api.polyvvideosign(this.vid).then((res) => {
+      const polyvPlayer = window.polyvPlayer
+      console.log('h5开始', this.recordObj.videoCurrentTime, 666, this.vid);
+      this.$api.polyvVideoSign(this.vid).then((res) => {
         console.log(res, "res2");
         this.player = polyvPlayer({
           wrap: "#player",
@@ -3231,7 +3249,7 @@ export default {
           ban_history_time: "on",
           vid: this.vid,
           autoplay: this.autoplay, // 自动播放
-          ban_seek: this.isAllowSeek, // 是否禁止拖拽进度条
+          ban_seek: this.H5isAllowSeek, // 是否禁止拖拽进度条
           speed: this.playbackRate, // 倍数
           teaser_show: 1,
           tail_show: 1,
@@ -3247,52 +3265,64 @@ export default {
         });
 
         polyvPlayerContext = this.player
-        console.log('this.player:', this.player, 'polyvPlayerContext:', polyvPlayerContext);
+        console.log('this.player:', this.player, 'polyvPlayerContext:', polyvPlayerContext)
         
-        this.player.HTML5.video.addEventListener("timeupdate", this.timeEvent);
-        this.player.on("s2j_onPlayStart", () => {
-          //开始播放每5秒提交一次观看时间
-          this.hasStart = true;
-          clearInterval(this.postTimer);
-          this.postTimer = setInterval(() => {
-            this.postStudyRecord(0, this.playSectionId, 5);
-          }, 30000);
-          if (this.recordObj.videoCurrentTime) {
-            this.showRecordStatus = true;
-            setTimeout(() => {
-              this.showRecordStatus = false;
-            }, 5000);
-          } else {
-            //新视频直接提交一条观看记录
-            // this.postStudyRecord(0);
-            this.showRecordStatus = false;
-          }
+        // this.player.HTML5.video.addEventListener("timeupdate", this.timeEvent);
+        this.player.on("s2j_onPlayStart", () => { // 视频初次播放时触发，参数返回vid
+          this.loadedmetadata()
         });
 
-        this.player.on("s2j_onVideoPause", () => {
-          clearInterval(this.postTimer);
-        });
+        this.player.on("s2j_onVideoPause", () => { // 视频暂停时触发
+          clearInterval(this.studyTimer)
+          clearInterval(this.timer)
+        })
 
-        this.player.on("s2j_onVideoPlay", () => {
-          if (this.postTimer) {
-            this.postTimer = setInterval(() => {
-              this.postStudyRecord(0, this.playSectionId, 5);
-            }, 30000);
+        this.player.on("s2j_onVideoPlay", () => { // 视频初次播放或由暂停恢复播放时触发
+          if (this.needSeek) {
+            if (this.recordObj.videoCurrentTime) {
+              this.seekTime = this.$method.secondToDate(this.recordObj.videoCurrentTime)
+              this.videoToastShow = true
+              this.toastTimer = setTimeout(() => {
+                this.videoToastShow = false
+              }, 3000)
+            }
+
+            this.needSeek = false
+            // 新增用户视频学习日志
+            this.studyLog()
           }
-        });
+          //开始播放
+          this.timer && clearInterval(this.timer)
+          this.timer = setInterval(this.timeEvent, 1000); //定时器
 
-        this.player.on("s2j_onPlayOver", () => {
-          this.hasStart = false;
-          clearInterval(this.postTimer);
+          this.studyTimer && clearInterval(this.studyTimer)
+          this.studyTimer = setInterval(() => {
+            this.postStudyRecord(0, this.playSectionId)
+          }, 15000)
+        })
+
+        this.player.on("s2j_onPlayOver", () => { // 当前视频播放完毕时触发
+          this.hasStart = false
+          clearInterval(this.studyTimer)
+          clearInterval(this.timer)
           uni.showToast({
             icon: "none",
             title: "播放完毕",
-          });
-          this.postStudyRecord(1);
-        });
-      });
-    },
+          })
+          this.postStudyRecord(1)
+          this.nextSection() // 播放下一节
+        })
 
+      })
+    },
+    clears() {
+      console.log('--h5h5h5h5h');
+      return new Promise((resolve, reject) => {
+        this.vid = ""
+        this.player && this.player.destroy()
+        resolve()
+      })
+    },
 
     // #endif
   },