更新播放

src/views/coursewarePlay/component/video-play.tsx

@@ -22,7 +22,7 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
-    isActive:{
+    isActive: {
       type: Boolean,
       default: false
     }
@@ -31,7 +31,7 @@ export default defineComponent({
   setup(props, { emit, expose }) {
     const { item, isEmtry } = toRefs(props)
     const videoRef = ref()
-    const videoItem = ref<Plyr>()
+    const videoItem: any = ref()
     const controlID = 'v' + Date.now() + Math.floor(Math.random() * 100)
     const playBtnId = 'play' + Date.now() + Math.floor(Math.random() * 100)
     const loopBtnId = 'loop' + Date.now() + Math.floor(Math.random() * 100)
@@ -89,7 +89,7 @@ export default defineComponent({
                 <div class="${styles.actions}">
                     <div class="${styles.actionWrap}">
                         <button id="${playBtnId}" class="${styles.actionBtn}">
-                            <div class="van-loading van-loading--circular" aria-live="polite" aria-busy="true"><span class="van-loading__spinner van-loading__spinner--circular" style="color: rgb(255, 255, 255);"><svg class="van-loading__circular" viewBox="25 25 50 50"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>  
+                            <div class="van-loading van-loading--circular" aria-live="polite" aria-busy="true"><span class="van-loading__spinner van-loading__spinner--circular" style="color: rgb(255, 255, 255);"><svg class="van-loading__circular" viewBox="25 25 50 50"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
                             <img class="${styles.playIcon}" src="${iconplay}" />
                             <img class="${styles.playIcon}" src="${iconpause}" />
                         </button>
@@ -118,13 +118,12 @@ export default defineComponent({
             videoItem.value.muted = false
             videoItem.value.volume = 1
           }
-            
+
           // console.log('开始播放', item.value)
           if (!item.value.autoPlay && !item.value.isprepare && videoItem.value) {
             // 加载完成后,取消静音播放
-            
-            console.log(videoItem.value)
             videoItem.value.pause()
+            console.log(videoItem.value.paused, 'video status')
           }
           changePlayBtn('')
           emit('togglePlay', videoItem.value?.paused)
@@ -143,6 +142,10 @@ export default defineComponent({
             videoItem.value.play()
           }
           emit('loadedmetadata', videoItem.value)
+          videoItem.value.currentTime = 0
+        })
+        videoItem.value.on('timeupdate', (e: Event) => {
+          // console.log(videoItem.value?.currentTime, '111')
         })
 
         nextTick(() => {
@@ -154,11 +157,14 @@ export default defineComponent({
       changePlayBtn,
       toggleHideControl
     })
-    watch(() => props.isActive, (val) => {
-      if (!val) {
-        videoItem.value?.pause()
+    watch(
+      () => props.isActive,
+      (val) => {
+        if (!val) {
+          videoItem.value?.pause()
+        }
       }
-    })
+    )
     return () => (
       <div class={styles.videoWrap}>
         <video

src/views/coursewarePlay/index.tsx

@@ -64,6 +64,7 @@ import Tool, { ToolItem, ToolType } from './component/tool'
 import Tools from './component/tools/pen'
 import Pen from './component/tools/pen'
 import iconPen from './image/icon-pen.png'
+import { useThrottle, useThrottleFn, useDebounceFn } from '@vueuse/core'
 
 export default defineComponent({
   name: 'CoursewarePlay',
@@ -625,6 +626,18 @@ export default defineComponent({
       )
     }
 
+    const onChangeSwiper = useDebounceFn((type: string, itemActive?: any) => {
+      if (type === 'up') {
+        handlePreAndNext('up')
+      }
+      if (type === 'down') {
+        handlePreAndNext('down')
+      }
+      if (type === 'change') {
+        popupData.open = false
+        toggleMaterial(itemActive)
+      }
+    }, 200)
     /** 是否有转场动画 */
     const checkedAnimation = (index: number, nextIndex?: number) => {
       const item = data.itemList[index]
@@ -717,8 +730,8 @@ export default defineComponent({
           >
             <div class={styles.wraps}>
               {data.itemList.map((m: any, mIndex: number) => {
-                const isRender = Math.abs(popupData.activeIndex - mIndex) < 5
-                const isEmtry = Math.abs(popupData.activeIndex - mIndex) > 3
+                const isRender = Math.abs(popupData.activeIndex - mIndex) < 4
+                const isEmtry = Math.abs(popupData.activeIndex - mIndex) > 2
                 // if (isRender) {
                 //   m.isRender = true
                 // }
@@ -871,7 +884,15 @@ export default defineComponent({
                 <div class={styles.leftFixedBtns} onClick={(e: Event) => e.stopPropagation()}>
                   {popupData.activeIndex != 0 && (
                     <div class={[styles.btnsWrap, styles.prePoint]}>
-                      <div class={styles.fullBtn} onClick={() => handlePreAndNext('up')}>
+                      <div
+                        class={styles.fullBtn}
+                        onClick={() => {
+                          // useThrottleFn(() => {
+                          //   handlePreAndNext('up')
+                          // }, 300)
+                          onChangeSwiper('up')
+                        }}
+                      >
                         <img src={iconUp} />
                         <span style={{ textAlign: 'center' }}>上一个</span>
                       </div>
@@ -879,7 +900,17 @@ export default defineComponent({
                   )}
                   {popupData.activeIndex != data.itemList.length - 1 && (
                     <div class={styles.btnsWrap}>
-                      <div class={styles.fullBtn} onClick={() => handlePreAndNext('down')}>
+                      <div
+                        class={styles.fullBtn}
+                        onClick={() => {
+                          // console.log('click down')
+                          // useThrottleFn(() => {
+                          //   console.log('click down pass')
+                          //   handlePreAndNext('down')
+                          // }, 300)
+                          onChangeSwiper('down')
+                        }}
+                      >
                         <span style={{ textAlign: 'center' }}>下一个</span>
                         <img src={iconDown} />
                       </div>
@@ -969,8 +1000,9 @@ export default defineComponent({
             tabActive={popupData.tabActive}
             itemActive={popupData.itemActive}
             onHandleSelect={(res: any) => {
-              popupData.open = false
-              toggleMaterial(res.itemActive)
+              onChangeSwiper('change', res.itemActive)
+              // popupData.open = false
+              // toggleMaterial(res.itemActive)
             }}
           />
         </Popup>