Merge branch 'iteration_0307' into jenkins

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

@@ -1,20 +1,25 @@
-import { defineComponent, onMounted, reactive } from 'vue'
+import { defineComponent, nextTick, onMounted, reactive, watch } from 'vue'
 import styles from '../video.module.less'
 import { Button } from 'vant'
 import { browser } from '@/helpers/utils'
 import Plyr from 'plyr'
 import 'plyr/dist/plyr.css'
 import { useRoute } from 'vue-router'
+import deepClone from '@/helpers/deep-clone'
 
 export default defineComponent({
   name: 'pre-register',
   emits: ['tabChange'],
   setup(props, { emit }) {
     const route = useRoute()
+    const video = route.query.v ? JSON.parse(route.query.v as any) : []
     const forms = reactive({
       coverImg: route.query.coverImg,
-      introductionVideo: route.query.introductionVideo,
-      player: null as any
+      introductionVideo: route.query.introductionVideo as any,
+      id: null as any,
+      videoDetails: deepClone(video),
+      player: null as any,
+      currentTime: 0
     })
 
     /**
@@ -55,8 +60,28 @@ export default defineComponent({
         }
       }
 
+      const times: any = []
+      deepClone(forms.videoDetails).forEach((item: any) => {
+        times.push({
+          time: item.startNode,
+          label: item.desc
+        })
+      })
+      params.markers = { enabled: true, points: times }
+
       forms.player = new Plyr('#register-video', params)
 
+      forms.player.on('loadedmetadata', () => {
+        checkVideoDetails(forms.player.currentTime)
+      })
+
+      // 如何视频在缓存不会触发
+      forms.player.on('timeupdate', (e: any) => {
+        // 时间变化时更新每一段的状态
+        console.log(forms.player.currentTime, 'forms.player.currentTime', e)
+        checkVideoDetails(forms.player.currentTime)
+      })
+
       forms.player.on('enterfullscreen', () => {
         console.log('fullscreen')
         const i = document.createElement('i')
@@ -76,8 +101,17 @@ export default defineComponent({
       })
     }
 
+    const checkVideoDetails = (time: number) => {
+      forms.videoDetails.forEach((item: any) => {
+        if (item.startNode <= time && time <= item.endNode) {
+          forms.id = item.id
+        }
+      })
+    }
     onMounted(() => {
-      _init()
+      nextTick(() => {
+        _init()
+      })
     })
 
     const onSubmit = () => {
@@ -91,13 +125,27 @@ export default defineComponent({
             <video
               id="register-video"
               class={styles['video']}
-              src={forms.introductionVideo + '?time' + Date.now()}
+              src={forms.introductionVideo}
               playsinline={true}
               poster={forms.coverImg as any}
               preload="auto"
             ></video>
           </div>
         </div>
+        <div class={styles.videoCount}>
+          <div class={styles.videoCountContent}>
+            {forms.videoDetails.map((item: any) => (
+              <span
+                class={[item.id === forms.id ? styles.active : '']}
+                onClick={() => {
+                  forms.player.currentTime = item.startNode
+                }}
+              >
+                {item.desc}
+              </span>
+            ))}
+          </div>
+        </div>
         <div class={styles.messageContainer}>
           <div class={styles.messageContent}>
             <p>家长您好！</p>