修改视屏播放逻辑

src/student/pre-register-active/video.tsx

@@ -1,6 +1,5 @@
 import { defineComponent, onMounted, onUnmounted, reactive, ref, watch } from 'vue'
 import styles from './video.module.less'
-// import poster from './images/video_bg.png'
 import { Button, Loading } from 'vant'
 import { browser } from '@/helpers/utils'
 import Plyr from 'plyr'
@@ -131,20 +130,20 @@ export default defineComponent({
           forms.playerSpeed < forms.player.speed ? forms.player.speed : forms.playerSpeed
       })
 
-      forms.player.on('seeking', (val: any) => {
-        // console.log('seeking')
+      forms.player.on('seeking', () => {
+        console.log('seeking')
         videoIntervalRef.isActive.value && videoIntervalRef.pause()
       })
 
       // // 拖动结束时
-      forms.player.on('seeked', (val: any) => {
-        // console.log('seeked')
+      forms.player.on('seeked', () => {
+        console.log('seeked')
         videoIntervalRef.isActive.value && videoIntervalRef.pause()
       })
 
       // 正在搜索中
       forms.player.on('waiting', () => {
-        // console.log('waiting pause')
+        console.log('waiting pause')
         videoIntervalRef.isActive.value && videoIntervalRef.pause()
       })
 
@@ -173,14 +172,12 @@ export default defineComponent({
       forms.player.on('play', () => {
         console.log('play')
         // 判断视频计时器是否暂停，如果暂停则恢复
-        if (!videoIntervalRef.isActive.value) {
-          videoIntervalRef.resume()
-        }
+        videoIntervalRef.resume()
       })
 
       // 暂停播放
       forms.player.on('pause', () => {
-        console.log('pause')
+        console.log('pause', videoIntervalRef.isActive.value)
 
         videoIntervalRef.pause()
       })
@@ -213,35 +210,39 @@ export default defineComponent({
     watch(
       () => videoIntervalRef.isActive.value,
       (newVal: boolean) => {
-        // console.log(newVal, 'videoIntervalRef.isActive.value in')
-        // console.log('watch', forms.player.currentTime)
-        // console.log('保留两个小数：', forms.player.currentTime.toFixed(2))
-        // console.log('向下取整：', Math.floor(forms.player.currentTime))
-        // console.log('向上取整：', Math.ceil(forms.player.currentTime))
-        // console.log('四舍五入：', Math.round(forms.player.currentTime))
-        if (newVal) {
-          tempTime[0] = Math.floor(forms.player.currentTime)
-        } else {
-          tempTime[1] = Math.floor(forms.player.currentTime)
-        }
-        // console.log(forms.player.speed, 'speed')
-
-        if (tempTime.length >= 2) {
-          // console.log(tempTime, 'tempTime', moreTime.value)
-          // 处理在短时间内的时间差 【视屏拖动，点击可能会导致时间差太大】
-          const diffTime =
-            tempTime[1] - tempTime[0] - currentTimer.counter.value * forms.playerSpeed > 2
-          // console.log(diffTime, 'diffTime', currentTimer.counter.value, 'value')
-          // 结束时间，如果 大于开始时间则清除
-          if (tempTime[1] >= tempTime[0] && !diffTime) moreTime.value.push(tempTime)
-          tempTime = []
-          currentTimer.counter.value = 0
-        }
-
-        // console.log('观看的时间', moreTime)
+        initVideoCount(newVal)
       }
     )
 
+    const initVideoCount = (newVal: any) => {
+      // console.log(newVal, 'videoIntervalRef.isActive.value in')
+      // console.log('watch', forms.player.currentTime)
+      // console.log('保留两个小数：', forms.player.currentTime.toFixed(2))
+      // console.log('向下取整：', Math.floor(forms.player.currentTime))
+      // console.log('向上取整：', Math.ceil(forms.player.currentTime))
+      // console.log('四舍五入：', Math.round(forms.player.currentTime))
+      if (newVal) {
+        tempTime[0] = Math.floor(forms.player.currentTime)
+      } else {
+        tempTime[1] = Math.floor(forms.player.currentTime)
+      }
+      // console.log(forms.player.speed, 'speed')
+
+      if (tempTime.length >= 2) {
+        // console.log(tempTime, 'tempTime', moreTime.value)
+        // 处理在短时间内的时间差 【视屏拖动，点击可能会导致时间差太大】
+        const diffTime =
+          tempTime[1] - tempTime[0] - currentTimer.counter.value * forms.playerSpeed > 2
+        // console.log(diffTime, 'diffTime', currentTimer.counter.value, 'value')
+        // 结束时间，如果 大于开始时间则清除
+        if (tempTime[1] >= tempTime[0] && !diffTime) moreTime.value.push(tempTime)
+        tempTime = []
+        currentTimer.counter.value = 0
+      }
+
+      // console.log('观看的时间', moreTime)
+    }
+
     watch(pageVisibility, (value: any) => {
       if (value == 'hidden') {
         forms.player.pause()
@@ -256,9 +257,6 @@ export default defineComponent({
         // const videoCountTime = videoIntervalRef?.counter.value
         const videoDuration = forms.player.duration
         // 判断如何视屏播放时间大于视屏播放有效时间则说明数据有问题，进行重置数据
-        // if (time > videoCountTime && time < videoDuration) {
-        //   time = videoCountTime
-        // }
         const rate = Math.floor((time / Math.floor(videoDuration)) * 100)
 
         await request.post('/api-student/open/studentBrowseRecord/updateStat', {
@@ -280,27 +278,31 @@ export default defineComponent({
     // 提交
     const onSubmit = async () => {
       try {
-        forms.intervalFnRef?.pause()
+        forms.player.pause() // 视屏
+        forms.intervalFnRef?.pause() // 页面订时器
         currentTimer.pause()
+        videoIntervalRef.pause()
         // 页面计时暂停
         pageTimer.pause()
+        initVideoCount(videoIntervalRef.isActive.value)
+
         await updateStat()
+        // window.location.href =
+        //   window.location.origin +
+        //   window.location.pathname +
+        //   '/project/preRegister.html?' +
+        //   qs.stringify({
+        //     orchestraId: forms.orchestraId,
+        //     openId: forms.openId
+        //   })
 
         window.location.href =
           window.location.origin +
-          window.location.pathname +
           '/project/preRegister.html?' +
           qs.stringify({
             orchestraId: forms.orchestraId,
             openId: forms.openId
           })
-        // window.location.href =
-        //   window.location.origin +
-        //   '/project/preRegister.html?' +
-        //   qs.stringify({
-        //     orchestraId: forms.orchestraId,
-        //     openId: forms.openId
-        //   })
       } catch (e) {
         console.log(e, 'e')
         // 还原
@@ -402,17 +404,7 @@ export default defineComponent({
             </p>
           </div>
 
-          <Button
-            class={styles.submitBtn}
-            onClick={() => {
-              // 暂停回调
-              forms.player.pause()
-              videoIntervalRef.pause()
-              setTimeout(() => {
-                onSubmit()
-              }, 100)
-            }}
-          ></Button>
+          <Button class={styles.submitBtn} onClick={onSubmit}></Button>
         </div>
       </div>
     )