feat: 保利威播放器小程序和h5兼容

pages3/polyv/detail.vue

@@ -801,7 +801,12 @@ export default {
       if (n) {
         // var polyvPlayerContext = this.selectComponent("#playerVideo")
         if (polyvPlayerContext) {
+          // #ifdef MP-WEIXIN
           polyvPlayerContext.pause()
+          // #endif
+          // #ifdef H5
+          polyvPlayerContext.j2s_pauseVideo() // 暂停播放视频
+          // #endif
         }
       }
     },
@@ -1064,8 +1069,14 @@ export default {
         // var polyvPlayerContext = this.selectComponent("#playerVideo");
         if (polyvPlayerContext) {
           //解决同个节视频切换问题
+          // #ifdef MP-WEIXIN
           polyvPlayerContext.seek(0);
-          polyvPlayerContext.pause();
+          polyvPlayerContext.pause()
+          // #endif
+          // #ifdef H5
+          polyvPlayerContext.j2s_seekVideo(0)
+          polyvPlayerContext.j2s_pauseVideo() // 暂停播放视频
+          // #endif
         }
         //清除直播
         this.$store.commit("setPlayChannelId", { playChannelId: 0 });
@@ -1377,7 +1388,12 @@ export default {
         if (this.handoutTipLength == 0 && this.goodsPlayConfig.autoPlay > 0) {
           this.autoplay = true
           // var polyvPlayerContext = this.selectComponent("#playerVideo")
-          polyvPlayerContext.play()
+          // #ifdef MP-WEIXIN
+          polyvPlayerContext.play();
+          // #endif
+          // #ifdef H5
+          polyvPlayerContext.j2s_resumeVideo()
+          // #endif
         }
       }
     },
@@ -1401,7 +1417,12 @@ export default {
           if (this.goodsPlayConfig.autoPlay > 0) {
             this.autoplay = true
             // var polyvPlayerContext = this.selectComponent("#playerVideo")
+            // #ifdef MP-WEIXIN
             polyvPlayerContext.play()
+            // #endif
+            // #ifdef H5
+            polyvPlayerContext.j2s_resumeVideo()
+            // #endif
           }
         }
 			})
@@ -1855,7 +1876,7 @@ export default {
       return {};
     },
 		loadedmetadata(event) {
-      console.log('------: loadedmetadata', this.hasStart);
+      console.log('------: loadedmetadata', this.hasStart, polyvPlayerContext);
       if (this.hasStart) { // 防止loadedmetadata事件第二次触发
         return
       }
@@ -1875,6 +1896,7 @@ export default {
 			if(!this.recordObj.videoCurrentTime) { //新视频直接提交一条观看记录
 				this.postStudyRecord(0)
 			}
+      this.studyTimer && clearInterval(this.studyTimer)
       this.studyTimer = setInterval(() => {
         this.postStudyRecord(0)
       }, 15000)
@@ -1915,7 +1937,12 @@ export default {
         let currentTime = 0;
         // var polyvPlayerContext = this.selectComponent("#playerVideo");
         if (polyvPlayerContext) {
+          // #ifdef MP-WEIXIN
           currentTime = polyvPlayerContext.getCurrentTime();
+          // #endif
+          // #ifdef H5
+          currentTime = polyvPlayerContext.j2s_getCurrentTime();
+          // #endif
         }
         let self = this;
         let photoIndex = self.photoIndex;
@@ -1964,8 +1991,14 @@ export default {
     //配置随机拍照时间
     configPhoto() {
       // var polyvPlayerContext = this.selectComponent("#playerVideo");
+      // #ifdef MP-WEIXIN
       let totalVideoTime = polyvPlayerContext.getDuration();
       let duration = polyvPlayerContext.getCurrentTime();
+      // #endif
+      // #ifdef H5
+      let totalVideoTime = polyvPlayerContext.j2s_getDuration();
+      let duration = polyvPlayerContext.j2s_getCurrentTime();
+      // #endif
       let photoNum = this.photoNum;
       if (!this.photoConfig) {
         this.photoConfig = true;
@@ -2216,25 +2249,26 @@ export default {
       if (this.timer) {
         clearInterval(this.timer);
       }
+      // #ifdef H5
+      await this.clears()
+      // #endif
       if (this.vid) {
         //切换视频
-        // var polyvPlayerContext = this.selectComponent("#playerVideo");
         polyvPlayerContext && polyvPlayerContext.changeVid(item.recordingUrl);
       } else {
         this.vid = item.recordingUrl;
       }
       this.recordObj = null;
       this.recordObj = await this.getRecordLast();
-      // 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)
+      await this.loadPlayerScript(this.loadPlayer)
       // #endif
       // 提交学习记录
+      // #ifdef MP-WEIXIN
       this.postStudyRecord(0)
+      // #endif
       //获取节笔记
       this.getNoteList();
     },
@@ -2269,9 +2303,15 @@ export default {
         //正在看当前笔记视频
         this.$u.toast("即将跳到笔记位置");
         //跳到笔记时刻
-        // var polyvPlayerContext = this.selectComponent("#playerVideo");
+        // var polyvPlayerContext = this.selectComponent("#playerVideo");        
+        // #ifdef MP-WEIXIN
         polyvPlayerContext.seek(item.noteSecond);
         polyvPlayerContext.play();
+        // #endif
+        // #ifdef H5
+        polyvPlayerContext.j2s_seekVideo(0)
+        polyvPlayerContext.j2s_resumeVideo()
+        // #endif
       }
     },
     postNote() {
@@ -2290,11 +2330,21 @@ export default {
       }
       // var polyvPlayerContext = this.selectComponent("#playerVideo");
       let noteDate = this.$method.getZeroTime();
+      // #ifdef MP-WEIXIN
       let noteSecond = polyvPlayerContext.getCurrentTime();
+      // #endif
+      // #ifdef H5
+      let noteSecond = polyvPlayerContext.j2s_getCurrentTime();
+      // #endif
       if (!noteSecond) {
         if (noteSecond == 0) {
           //播放结束
+          // #ifdef MP-WEIXIN
           noteSecond = polyvPlayerContext.getDuration();
+          // #endif
+          // #ifdef H5
+          noteSecond = polyvPlayerContext.j2s_getCurrentTime();
+          // #endif
         }
         if (!noteSecond) {
           this.$u.toast("视频暂未开始");
@@ -2443,14 +2493,21 @@ export default {
       this.postAnswer();
     },
     postStudyRecord(status = 0, sectionId = this.playSectionId) {
-      // console.log('学习记录接口的playSectionId', sectionId);
+      console.log('学习记录接口的playSectionId', sectionId, polyvPlayerContext);
       let currentTime = 0;
       let PlayDuration = 0;
       // var polyvPlayerContext = this.selectComponent("#playerVideo");
       if (polyvPlayerContext) {
-        currentTime = polyvPlayerContext.getCurrentTime(); //总的视频播放时刻
+        // #ifdef MP-WEIXIN
+        currentTime = polyvPlayerContext.getCurrentTime(); //获取视频当前的播放时刻
         PlayDuration = polyvPlayerContext.getVideoPlayDuration(); //本次看的时长
+        // #endif
+        // #ifdef H5
+        currentTime = polyvPlayerContext.j2s_getCurrentTime(); //当前视频播放时刻
+        PlayDuration = polyvPlayerContext.j2s_realPlayVideoTime(); //本次看的时长
+        // #endif
       }
+      console.log('---学习记录：currentTime', polyvPlayerContext, currentTime);
       if (this.playChannelId > 0) {
         currentTime = 2; //直播无法获取，无论开始结束都传2秒
       }
@@ -2644,6 +2701,7 @@ export default {
                 // #endif
                 // #ifdef H5
                 polyvPlayerContext.j2s_pauseVideo();
+                polyvPlayerContext.toggleFullscreen()
                 // #endif
                 this.photoIndex = i;
                 if (uni.getStorageSync(`tabkePhotoShow${this.goodsId}`) == this.goodsId) {
@@ -2665,7 +2723,12 @@ export default {
     },
     restart() {
       // var polyvPlayerContext = this.selectComponent("#playerVideo");
+      // #ifdef MP-WEIXIN
       polyvPlayerContext.seek(0);
+      // #endif
+      // #ifdef H5
+      polyvPlayerContext.j2s_seekVideo(0)
+      // #endif
       clearTimeout(this.toastTimer);
       this.videoToastShow = false;
     },
@@ -2802,7 +2865,14 @@ export default {
     openPhoto() {
       // var polyvPlayerContext = this.selectComponent("#playerVideo");
       if (polyvPlayerContext) {
+        // #ifdef MP-WEIXIN
         polyvPlayerContext.exitFullScreen();
+        // #endif
+        // #ifdef H5
+        if (this.isFullScreen()) {
+          this.exitFullscreen();
+        }
+        // #endif
       }
 
       this.enableAutoRotation = false;
@@ -2906,7 +2976,12 @@ export default {
             this.enableAutoRotation = true;
             // var polyvPlayerContext = this.selectComponent("#playerVideo");
             if (polyvPlayerContext != null) {
+              // #ifdef MP-WEIXIN
               polyvPlayerContext.play();
+              // #endif
+              // #ifdef H5
+              polyvPlayerContext.j2s_resumeVideo()
+              // #endif
             }
           })
           .catch((err) => {
@@ -3224,7 +3299,6 @@ export default {
     clickMulu() {
       this.muluStyle = !this.muluStyle
     },
-    // #ifdef H5
     loadPlayerScript(callback) {
       if (!window.polyvPlayer) {
         const myScript = document.createElement("script");
@@ -3255,8 +3329,8 @@ export default {
           tail_show: 1,
           hideSwitchPlayer: true,
           watchStartTime: this.recordObj.videoCurrentTime, // 播放开始时间，表示视频从第几秒开始播放，参数值需小于视频时长
-          ts: res.data.ts, // 移动播放加密视频需传入的时间戳。
-          sign: res.data.sign, // 移动端播放加密视频所需的签名
+          ts: res.data.data.ts, // 移动播放加密视频需传入的时间戳。
+          sign: res.data.data.sign, // 移动端播放加密视频所需的签名
           // playsafe: (vid, next) => { // PC端播放加密视频所需的授权凭证
           //   this.$api.obtainpolyvvideopcsign(vid).then((res) => {
           //     next(res.data);
@@ -3266,18 +3340,20 @@ export default {
 
         polyvPlayerContext = this.player
         console.log('this.player:', this.player, 'polyvPlayerContext:', polyvPlayerContext)
-        
-        // this.player.HTML5.video.addEventListener("timeupdate", this.timeEvent);
-        this.player.on("s2j_onPlayStart", () => { // 视频初次播放时触发，参数返回vid
+        this.postStudyRecord(0)
+        this.player.on("s2j_onPlayStart", (vid) => { // 视频初次播放时触发
+          console.log('视频初次播放时触发: vid', vid);
           this.loadedmetadata()
         });
 
         this.player.on("s2j_onVideoPause", () => { // 视频暂停时触发
+          console.log('视频暂停时触发');
           clearInterval(this.studyTimer)
           clearInterval(this.timer)
         })
 
         this.player.on("s2j_onVideoPlay", () => { // 视频初次播放或由暂停恢复播放时触发
+        console.log('视频初次播放或由暂停恢复播放时触发');
           if (this.needSeek) {
             if (this.recordObj.videoCurrentTime) {
               this.seekTime = this.$method.secondToDate(this.recordObj.videoCurrentTime)
@@ -3299,6 +3375,7 @@ export default {
           this.studyTimer = setInterval(() => {
             this.postStudyRecord(0, this.playSectionId)
           }, 15000)
+
         })
 
         this.player.on("s2j_onPlayOver", () => { // 当前视频播放完毕时触发
@@ -3312,19 +3389,47 @@ export default {
           this.postStudyRecord(1)
           this.nextSection() // 播放下一节
         })
-
+        console.log('借宿结束结束');
       })
     },
     clears() {
-      console.log('--h5h5h5h5h');
       return new Promise((resolve, reject) => {
         this.vid = ""
         this.player && this.player.destroy()
         resolve()
       })
     },
+    /**
+     * 退出全屏
+     */
+    exitFullscreen() {
+      try {
+        var de = document;
+        // console.log(de);
+        if (de.exitFullscreen) {
+          de.exitFullscreen();
+        } else if (de.mozCancelFullScreen) {
+          de.mozCancelFullScreen();
+        } else if (de.webkitCancelFullScreen) {
+          de.webkitCancelFullScreen();
+        }
+      } catch (err) {}
+    },
 
-    // #endif
+    fullele() {
+      return (
+        document.fullscreenElement ||
+        document.webkitFullscreenElement ||
+        document.msFullscreenElement ||
+        document.mozFullScreenElement ||
+        null
+      );
+    },
+
+    //判断是否全屏
+    isFullScreen() {
+      return !!(document.webkitIsFullScreen || this.fullele());
+    },
   },
 };
 </script>