feat: 视频播放的h5

common/httpList/polyvVideo.js

@@ -2,7 +2,7 @@ import {
 	myRequest
 } from '../request.js'
 export default {
-	//获取保利威视频小程序播放凭证
+	//获取保利威视频播放凭证
 	polyvVideoSign(data) {
 		return myRequest({
 			url: '/polyv/video/sign/' + data,
@@ -10,4 +10,10 @@ export default {
 			// noToken: true
 		})
 	},
+	obtainpolyvvideopcsign(data) {
+		return myRequest({
+			url: `/polyv/video/sign/pc/` + data,
+			method: 'get',
+		})
+	},
 }

components/course/courseModule.vue

@@ -91,7 +91,7 @@ export default {
 			default: 0
 		},
 		courseId: {
-			type: Number,
+			type: [Number, String],
 			default: 0
 		},
 		isBuy: { //是否是已购买商品

pages3/polyv/detail.vue

@@ -27,6 +27,7 @@
       </view>
       <view v-else>
         <!-- v-if="playVID" -->
+        <!-- #ifdef MP-WEIXIN -->
         <view
           class="video_box"
           style="width: 100%; height: 421rpx"
@@ -69,9 +70,18 @@
               >从头播放</cover-view
             >
           </cover-view>
-          <!-- 全屏时的目录 -->
-          
         </view>
+        <!-- #endif -->
+        <!-- #ifdef H5 -->
+        <view class="video_box" style="width: 100%; height: 421rpx">
+          <view v-show="vid" id="player"></view>
+          <cover-view class="video-toast__close" v-if="videoToastShow" @click="closeToast()">X</cover-view>
+          <cover-view class="video-toast" v-if="videoToastShow">
+            <cover-view class="video-toast__text">您上次看到 {{ seekTime }}，正在自动续播</cover-view>
+            <cover-view class="video-toast__btn" @click="restart()">从头播放</cover-view>
+          </cover-view>
+        </view>
+        <!-- #endif -->
         <view
           class="video_box"
           style="width: 100%; height: 421rpx"
@@ -713,7 +723,6 @@ export default {
       isAllowSeek: "no",
       playbackRate: [1.0],
       timer: null,
-      // answerTimer: null,
       goodsPhotographConfig: null,
       intervalTimeList: [], // 间隔拍照时长
       intervalTimeIndex: 0, //当前处于哪个时间段拍照
@@ -762,13 +771,11 @@ export default {
       toggleCourseShow: false, // 切换课程弹窗
       informId: '', //消息id,从公众号消息模板进来的才有
       courseList: [], // 课程列表
-      // courseTotal: 0,
       reStart: false, // 是否显示模块/章/节
       subList: [],
       subIndex: 0,
       goodsTeacher: [],
       teacherList: [],
-      // teaIndex: 0,
       teacherIndex: 0,
       newActiveSubjectId: "", //当前选中ID
       compareFaceData: 0, // 拍照匹配相似度
@@ -778,6 +785,9 @@ export default {
       menuAllList: [],
       popupPhotoShow: false,
       curPlayIndex: 0, // 正在播放的节的下标
+      // h5
+      vodPlayerJs: "https://player.polyv.net/script/player.js",
+      player: "",
     };
   },
   computed: {
@@ -2575,9 +2585,19 @@ export default {
       });
     },
     timeEvent() {
+      //  #ifdef MP-WEIXIN
       var polyvPlayerContext = this.selectComponent("#playerVideo");
+      // #endif
+      //  #ifdef H5
+      var polyvPlayerContext = this.player;
+      // #endif
       if (polyvPlayerContext != null) {
+        //  #ifdef MP-WEIXIN
         this.playTime = polyvPlayerContext.getCurrentTime(); //播放时刻
+        // #endif
+        //  #ifdef H5
+        var polyvPlayerContext = polyvPlayerContext.j2s_getCurrentTime()
+        // #endif
         // console.log('拍照啊', 789, this.photoHistoryList, 'this.photoList:', this.photoList)
         //判断是否需要拍照
         if (this.photoNum > 0) {
@@ -3164,7 +3184,93 @@ export default {
     },
     clickMulu() {
       this.muluStyle = !this.muluStyle
-    }
+    },
+    // #ifdef H5
+    loadPlayerScript(callback) {
+      if (!window.polyvPlayer) {
+        const myScript = document.createElement("script");
+        myScript.setAttribute("src", this.vodPlayerJs);
+        myScript.onload = callback;
+        document.body.appendChild(myScript);
+      } else {
+        callback();
+      }
+    },
+    // 播放视频
+    loadPlayer() {
+      const polyvPlayer = window.polyvPlayer;
+      console.log(polyvPlayer, this.recordObj.videoCurrentTime, 666);
+      this.$api.polyvvideosign(this.vid).then((res) => {
+        console.log(res, "res2");
+        this.player = polyvPlayer({
+          wrap: "#player",
+          width: '100%',
+          showLine: "off",
+          height: 218,
+          ban_history_time: "on",
+          vid: this.vid,
+          autoplay: this.autoplay, // 自动播放
+          ban_seek: this.isAllowSeek, // 是否禁止拖拽进度条
+          speed: this.playbackRate, // 倍数
+          teaser_show: 1,
+          tail_show: 1,
+          hideSwitchPlayer: true,
+          watchStartTime: this.recordObj.videoCurrentTime, // 播放开始时间，表示视频从第几秒开始播放，参数值需小于视频时长
+          ts: res.data.ts, // 移动播放加密视频需传入的时间戳。
+          sign: res.data.sign, // 移动端播放加密视频所需的签名
+          // playsafe: (vid, next) => { // PC端播放加密视频所需的授权凭证
+          //   this.$api.obtainpolyvvideopcsign(vid).then((res) => {
+          //     next(res.data);
+          //   });
+          // },
+        });
+
+        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.on("s2j_onVideoPause", () => {
+          clearInterval(this.postTimer);
+        });
+
+        this.player.on("s2j_onVideoPlay", () => {
+          if (this.postTimer) {
+            this.postTimer = setInterval(() => {
+              this.postStudyRecord(0, this.playSectionId, 5);
+            }, 30000);
+          }
+        });
+
+        this.player.on("s2j_onPlayOver", () => {
+          this.hasStart = false;
+          clearInterval(this.postTimer);
+          uni.showToast({
+            icon: "none",
+            title: "播放完毕",
+          });
+          this.postStudyRecord(1);
+        });
+      });
+    },
+
+
+    // #endif
   },
 };
 </script>