Update index.tsx

src/views/coursewarePlay/component/video-item/index.tsx

@@ -3,7 +3,7 @@ import 'plyr/dist/plyr.css'
 import Plyr from 'plyr'
 import styles from './index.module.less'
 
-import { iconVideoBg, iconLoop, iconLoopActive, iconPlay,  iconPause } from '../../image/icons.json'
+import { iconVideoBg, iconLoop, iconLoopActive, iconPlay, iconPause } from '../../image/icons.json'
 
 export default defineComponent({
   name: 'video-play',
@@ -32,6 +32,47 @@ export default defineComponent({
     const playBtnId = 'play' + Date.now() + Math.floor(Math.random() * 100)
     const loopBtnId = 'loop' + Date.now() + Math.floor(Math.random() * 100)
 
+    /**
+     * 格式化视屏播放有效时间 - 合并区间
+     * @param intervals [[], []]
+     * @example [[4, 8],[0, 4],[10, 30]]
+     * @returns [[0, 8], [10, 30]]
+     */
+    const formatEffectiveTime = (intervals: any[]) => {
+      const res: any = []
+      intervals.sort((a, b) => a[0] - b[0])
+      let prev = intervals[0]
+      for (let i = 1; i < intervals.length; i++) {
+        const cur = intervals[i]
+        if (prev[1] >= cur[0]) {
+          // 有重合
+          prev[1] = Math.max(cur[1], prev[1])
+        } else {
+          // 不重合，prev推入res数组
+          res.push(prev)
+          prev = cur // 更新 prev
+        }
+      }
+      res.push(prev)
+      // console.log(res, 'formatEffectiveTime')
+
+      return res
+    }
+    /**
+     * 获取数据有效期
+     * @param intervals [[], []]
+     * @returns 0s
+     */
+    const formatTimer = (intervals: any[]) => {
+      const afterIntervals = formatEffectiveTime(intervals)
+      // console.log(afterIntervals, 'afterIntervals')
+      let time = 0
+      afterIntervals.forEach((t: any) => {
+        time += t[1] - t[0]
+      })
+      return time
+    }
+
     const togglePlay = (e: Event) => {
       e.stopPropagation()
       if (!data.videoContianerRef.paused) {
@@ -144,7 +185,11 @@ export default defineComponent({
       }
     )
     let videoTimer = null as any
+    let videoTimerErrorCount = 0
     const handlePlayVideo = () => {
+      if (videoTimerErrorCount > 5) {
+        return
+      }
       clearTimeout(videoTimer)
       nextTick(() => {
         data.videoContianerRef.play().catch((err) => {
@@ -157,6 +202,7 @@ export default defineComponent({
           }, 1000)
         })
       })
+      videoTimerErrorCount++
     }
 
     let videoErrorTimer = null as any
@@ -178,8 +224,9 @@ export default defineComponent({
       videoErrorCount++
     }
     const getVideoRef = () => {
-      return data.videoContianerRef;
+      return data.videoContianerRef
     }
+
     expose({
       getVideoRef
     })
@@ -223,6 +270,18 @@ export default defineComponent({
             changePlayBtn('play')
             emit('ended')
           }}
+          onSeeked={() => {
+            changePlayBtn('play')
+            data.videoItem?.pause()
+          }}
+          onSeeking={() => {
+            changePlayBtn('play')
+            data.videoItem?.pause()
+          }}
+          onWaiting={() => {
+            changePlayBtn('play')
+            data.videoItem?.pause()
+          }}
           onError={handleErrorVideo}
         ></video>
       </div>