修改时间

public/project/css/preRegister.css

@@ -113,6 +113,7 @@ span {
   display: flex;
   justify-content: center;
   align-items: center;
+  text-shadow: 0px 2px 3px #50AEEC;
   z-index: 1;
 }
 

public/project/preRegister.html

@@ -569,4 +569,4 @@
   </script>
 </body>
 
-</html>
+</html>

src/student/pre-register-active/video.module.less

@@ -12,7 +12,7 @@
   background: url('./images/video-bg.png') no-repeat center;
   background-size: contain;
   min-height: 265px;
-  overflow: hidden;
+
 }
 
 .video-content {
@@ -22,7 +22,9 @@
   width: 310px;
   height: 182px;
   border-radius: 30px;
-  margin: 28px auto;
+  padding-top: 28px;
+  padding-bottom: 28px;
+  margin: 0 auto;
 
   video {
     width: 100%;
@@ -34,6 +36,10 @@
       border-radius: 30px;
     }
 
+    .plyr__video-wrapper {
+      border-radius: 30px;
+    }
+
     .video-back {
       position: absolute;
       left: 20px;
@@ -60,6 +66,26 @@
     .plyr--video .plyr__control:hover {
       background-color: transparent !important;
     }
+
+    .plyr__menu {
+      &>.plyr__control[data-plyr="settings"] {
+        font-size: 0;
+        padding: 0;
+
+        &::before {
+          content: ' ';
+          display: inline-block;
+          background: url('./images/video-speed1.png') no-repeat center;
+          background-size: contain;
+          width: 32px;
+          height: 32px;
+        }
+
+        svg {
+          display: none !important;
+        }
+      }
+    }
   }
 
   .video {
@@ -84,7 +110,7 @@
   min-height: 440px;
 
   .messageContent {
-    padding: 26px 32px;
+    padding: 32px 32px 26px;
     font-size: 14px;
     color: #2D1A18;
     line-height: 26px;

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

@@ -1,6 +1,6 @@
 import { defineComponent, onMounted, reactive, ref, watch } from 'vue'
 import styles from './video.module.less'
-import poster from './images/video_bg.png'
+// import poster from './images/video_bg.png'
 import { Button, Loading } from 'vant'
 import { browser } from '@/helpers/utils'
 import Plyr from 'plyr'
@@ -122,24 +122,26 @@ export default defineComponent({
         forms.player.currentTime = forms.videoBrowsePoint
       })
 
-      // forms.player.on('seeking', (val: any) => {
-      //   console.log('seeking')
-      // })
+      forms.player.on('seeking', (val: any) => {
+        // console.log('seeking')
+        videoIntervalRef.isActive.value && videoIntervalRef.pause()
+      })
 
-      // // // 拖动结束时
-      // forms.player.on('seeked', (val: any) => {
-      //   console.log('seeked')
-      // })
+      // // 拖动结束时
+      forms.player.on('seeked', (val: any) => {
+        // console.log('seeked')
+        videoIntervalRef.isActive.value && videoIntervalRef.pause()
+      })
 
       // 正在搜索中
       forms.player.on('waiting', () => {
-        console.log('waiting')
-        videoIntervalRef.pause()
+        // console.log('waiting pause')
+        videoIntervalRef.isActive.value && videoIntervalRef.pause()
       })
 
       // 如何视频在缓存不会触发
       forms.player.on('timeupdate', () => {
-        console.log('timeupdate', forms.player.currentTime)
+        // console.log('timeupdate', forms.player.currentTime)
 
         // 判断视频计时器是否暂停，如果暂停则恢复
         // 添加 「forms.player.playing」 是由会跳转到上次播放时间，会触发些方法
@@ -148,12 +150,14 @@ export default defineComponent({
           forms.player.currentTime > 0 &&
           forms.player.playing
         ) {
+          console.log('timeupdate play')
           videoIntervalRef.resume()
         }
       })
 
       // 开始播放
       forms.player.on('play', () => {
+        console.log('play')
         // 判断视频计时器是否暂停，如果暂停则恢复
         if (!videoIntervalRef.isActive.value) {
           videoIntervalRef.resume()
@@ -189,6 +193,8 @@ export default defineComponent({
     // 保存零时时间
     const moreTime: any = ref([]) // 多个观看时间段
     let tempTime: any = [] // 临时存储时间
+
+    const currentTimer = useInterval(1000, { controls: true })
     // 监听播放状态，
     watch(
       () => videoIntervalRef.isActive.value,
@@ -204,10 +210,15 @@ export default defineComponent({
         } else {
           tempTime[1] = Math.round(forms.player.currentTime)
         }
-        console.log(tempTime.length, 'tempTime.length')
+
         if (tempTime.length >= 2) {
-          moreTime.value.push(tempTime)
+          // console.log(tempTime, 'tempTime', moreTime.value)
+          // 处理在短时间内的时间差 【视屏拖动，点击可能会导致时间差太大】
+          const diffTime = tempTime[1] - tempTime[0] - currentTimer.counter.value > 5
+          // 结束时间，如果 大于开始时间则清除
+          if (tempTime[1] >= tempTime[0] && !diffTime) moreTime.value.push(tempTime)
           tempTime = []
+          currentTimer.counter.value = 0
         }
 
         // console.log('观看的时间', moreTime)
@@ -219,7 +230,8 @@ export default defineComponent({
       try {
         const videoBrowseData = moreTime.value.length > 0 ? formatEffectiveTime(moreTime.value) : []
         const time = moreTime.value.length > 0 ? formatTimer(moreTime.value) : 0
-        const rate = Math.floor((time / forms.player.duration) * 100)
+        const rate = Math.floor((time / Math.floor(forms.player.duration)) * 100)
+
         await request.post('/api-student/open/studentBrowseRecord/updateStat', {
           data: {
             id: forms.saveId,
@@ -241,6 +253,7 @@ export default defineComponent({
       try {
         // 暂停回调
         forms.intervalFnRef?.pause()
+        currentTimer.pause()
         // 页面计时暂停
         pageTimer.pause()
         await updateStat()
@@ -266,6 +279,7 @@ export default defineComponent({
         // 还原
         forms.intervalFnRef?.resume()
         pageTimer.resume()
+        currentTimer.resume()
       }
     }
 
@@ -317,6 +331,9 @@ export default defineComponent({
               id="register-video"
               class={styles['video']}
               src={forms.introductionVideo + '?time' + Date.now()}
+              // src={
+              //   'https://cloud-coach.ks3-cn-beijing.ksyuncs.com/1684981545808.mp4?time' + Date.now()
+              // }
               playsinline={true}
               poster={forms.coverImg}
               preload="auto"