空间播放收起时间调整到4s，切换过快同时播放问题

src/teacher/screen-projection/index.module.less

@@ -14,3 +14,13 @@
   height: 100vh;
   overflow-y: auto;
 }
+.container{
+  padding-bottom: 14px;
+}
+.playBtn{
+  position: fixed;
+  bottom: 30px;
+  left: 50%;
+  width: 60vw;
+  transform: translateX(-50%);
+}

src/teacher/screen-projection/index.tsx

@@ -2,7 +2,7 @@ import OEmpty from '@/components/o-empty'
 import OHeader from '@/components/o-header'
 import request from '@/helpers/request'
 import { state } from '@/state'
-import { Cell, CellGroup, Image, Popup } from 'vant'
+import { Button, Cell, CellGroup, Image, Popup } from 'vant'
 import { defineComponent, onMounted, reactive, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import Guide from './guide'
@@ -13,8 +13,9 @@ export default defineComponent({
   name: 'screen-projection',
   setup(props, { emit }) {
     const icons = {
-      music: getImage('icon-music.png'),
-      video: getImage('icon-video.png')
+      SONG: getImage('icon-music.png'),
+      VIDEO: getImage('icon-video.png'),
+      IMG: getImage('icon-img.png')
     }
     const route = useRoute()
     const router = useRouter()
@@ -47,18 +48,18 @@ export default defineComponent({
     })
 
     // 去课时播放
-    const hanldeOpenPlay = (n: any) => {
+    const hanldeOpenPlay = (n?: any) => {
       router.push({
         path: '/coursewarePlay',
         query: {
           ...query,
           id: query.lessonCoursewareDetailId,
-          kId: n.id
+          kId: n?.id
         }
       })
     }
     return () => (
-      <div>
+      <div class={styles.screenProjection}>
         <OHeader
           desotry={false}
           rightText="投屏帮助"
@@ -67,7 +68,7 @@ export default defineComponent({
             data.guideOpen = true
           }}
         />
-        <div>
+        <div class={styles.container}>
           {data.name && (
             <div class={styles.tips}>
               <div class={styles.line}></div>
@@ -75,20 +76,6 @@ export default defineComponent({
             </div>
           )}
           <CellGroup inset>
-            {/* <Cell
-              title="胜强测试"
-              isLink
-              center
-              onClick={() => {
-                location.href = `http://192.168.3.114:1000/#/coursewarePlay?id=${query.lessonCoursewareDetailId}&courseId=${query.courseId}`
-              }}
-            >
-              {{
-                icon: () => (
-                  <Image style={{ marginRight: '12px' }} width={36} height={36} src={icons.music} />
-                )
-              }}
-            </Cell> */}
             {data.knowledgePointList.map((item: any) => {
               return (
                 <>
@@ -102,7 +89,7 @@ export default defineComponent({
                                 style={{ marginRight: '12px' }}
                                 width={36}
                                 height={36}
-                                src={['VIDEO', 'IMG'].includes(n.type) ? icons.video : icons.music}
+                                src={icons[n.type]}
                               />
                             )
                           }}
@@ -116,6 +103,9 @@ export default defineComponent({
         </div>
         {!data.loading && !data.knowledgePointList.length && <OEmpty />}
 
+        <Button class={styles.playBtn} block type="primary" round onClick={() => hanldeOpenPlay()}>
+          播放课件
+        </Button>
         <Popup
           v-model:show={data.guideOpen}
           position="right"

src/views/coursewarePlay/index.tsx

@@ -251,7 +251,11 @@ export default defineComponent({
     // 停止所有的播放
     const handleStopVideo = () => {
       data.itemList.forEach((m: any) => {
-        m.videoEle?.pause()
+        const item = data.itemList[popupData.activeIndex]
+        if (item?.id != m.id){
+          m.autoPlay = false
+          m.videoEle?.pause()
+        }
       })
     }
     // 停止曲谱的播放
@@ -274,7 +278,7 @@ export default defineComponent({
       closeToast()
       activeData.timer = setTimeout(() => {
         activeData.model = false
-      }, 3000)
+      }, 4000)
     }
     // 轮播切换
     const handleSwipeChange = (val: any) => {
@@ -295,11 +299,8 @@ export default defineComponent({
           clearTimeout(activeData.timer)
           closeToast()
           item.currentTime = 0
-          item.autoPlay = true
           item.videoEle && (item.videoEle.currentTime = 0)
-          nextTick(() => {
-            item.videoEle?.play()
-          })
+          item.autoPlay = true
         }
       }
     }
@@ -368,30 +369,8 @@ export default defineComponent({
     const handleEnded = (m: any) => {
       // console.log(m)
       if (popupData.activeIndex != data.itemList.length - 1) {
-        // popupData.activeIndex++
         swipeRef.value?.next()
-        // const nextItem = data.itemList[popupData.activeIndex]
-
-        // console.log('🚀 ~ nextItem', nextItem)
-      }
-    }
-
-    //加载第一帧
-    const handleFirstFrame = (video: HTMLVideoElement) => {
-      // console.log("🚀 ~ 加载第一帧", video.videoWidth, video.videoHeight)
-      const captureImage = function () {
-        var canvas = document.createElement('canvas')
-        canvas.width = video.videoWidth
-        canvas.height = video.videoHeight
-        canvas?.getContext('2d')?.drawImage(video, 0, 0, canvas.width, canvas.height)
-        canvas.toBlob((blob) => {
-          // console.log("🚀 ~ blob", blob)
-          const imgUrl = URL.createObjectURL(blob as any)
-          // console.log("🚀 ~ imgUrl", imgUrl)
-          video.setAttribute('poster', imgUrl)
-        })
       }
-      captureImage()
     }
 
     return () => (
@@ -444,7 +423,6 @@ export default defineComponent({
                             m.duration = videoEle.duration
                             m.videoEle = videoEle
                             m.isprepare = true
-                            console.log('视频准备完成')
                           }}
                           onTimeupdate={(e: Event) => {
                             if (!m.isprepare) return
@@ -453,7 +431,6 @@ export default defineComponent({
                             m.progress = Number(
                               ((videoEle.currentTime / m.duration) * 100).toFixed(1)
                             )
-                            // console.log('播放',videoEle.currentTime,  m.progress)
                           }}
                           onPlay={() => {
                             // 播放