课件播放0.3

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

@@ -19,7 +19,7 @@ export default defineComponent({
       }
     }
   },
-  emits: ['loadedmetadata', 'togglePlay', 'ended', 'reset'],
+  emits: ['loadedmetadata', 'loaded', 'togglePlay', 'ended', 'reset'],
   setup(props, { emit, expose }) {
     const { item } = toRefs(props)
     const videoRef = ref()
@@ -112,11 +112,13 @@ export default defineComponent({
           if (videoItem.value) {
             videoItem.value.muted = false
           }
-          if (!item.value.isprepare) return
           changePlayBtn('')
           emit('togglePlay', videoItem.value?.paused)
         })
-        videoItem.value.on('pause', () => changePlayBtn('play'))
+        videoItem.value.on('pause', () => {
+          changePlayBtn('play')
+          emit('togglePlay', videoItem.value?.paused)
+        })
         videoItem.value.on('ended', (e: Event) => {
           emit('ended')
           changePlayBtn('play')

src/views/coursewarePlay/play.module.less

@@ -11,9 +11,7 @@
   position: relative;
   height: 100vh;
   margin: 0 auto;
-  transform-style: preserve-3d;
-  perspective: (32rem);
-  transition-timing-function: initial;
+  overflow: hidden;
 }
 
 .playModel {
@@ -82,8 +80,12 @@
   }
 }
 
-.swipeItem {
-  overflow: hidden;
+.wraps {
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  perspective: (32rem);
+  transition-timing-function: initial;
 }
 
 .itemDiv {

src/views/coursewarePlay/play.tsx

@@ -318,15 +318,19 @@ export default defineComponent({
     })
 
     /**停止所有的播放 */
-    const handleStop = (preIndex: number) => {
-      const activeItem = data.itemList[preIndex]
-      if (activeItem.type === 'VIDEO' && activeItem.videoEle) {
-        activeItem.videoEle.stop()
-      }
-      // console.log('🚀 ~ activeItem:', activeItem)
-      // 停止曲谱的播放
-      if (activeItem.type === 'SONG') {
-        activeItem.iframeRef?.contentWindow?.postMessage({ api: 'setPlayState' }, '*')
+    const handleStop = () => {
+      for (let i = 0; i < data.itemList.length; i++) {
+        const activeItem = data.itemList[i]
+        if (popupData.activeIndex !== i) {
+          if (activeItem.type === 'VIDEO' && activeItem.videoEle) {
+            activeItem.videoEle.stop()
+          }
+          // console.log('🚀 ~ activeItem:', activeItem)
+          // 停止曲谱的播放
+          if (activeItem.type === 'SONG') {
+            activeItem.iframeRef?.contentWindow?.postMessage({ api: 'setPlayState' }, '*')
+          }
+        }
       }
     }
     // 切换素材
@@ -464,10 +468,11 @@ export default defineComponent({
 
     // 轮播切换
     const handleSwipeChange = (index: number) => {
-      handleStop(popupData.activeIndex)
+      if(popupData.activeIndex == index) return;
       console.log('轮播切换')
       popupData.activeIndex = index
       setTimeout(() => {
+        handleStop()
         const item = data.itemList[index]
         if (item) {
           popupData.tabActive = item.knowledgePointId
@@ -477,9 +482,7 @@ export default defineComponent({
           if (item.type == 'SONG') {
             activeData.model = true
           }
-          // console.log('🚀 ~ VIDEO', item, item.type === 'VIDEO' && item.videoEle)
           if (item.type === 'VIDEO') {
-            // console.log("🚀 ~ item:",item, item.autoPlay, popupData.activeIndex)
             // 自动播放下一个视频
             clearTimeout(activeData.timer)
             closeToast()
@@ -511,77 +514,161 @@ export default defineComponent({
             Object.values(data.videoRefs).map((n: any) => n.toggleHideControl(activeData.model))
           }}
         >
-          <div class={styles.coursewarePlay} style={{ width: parentContainer.width }}>
-            {data.itemList.map((m: any, mIndex: number) => {
-              const isRender = m.isRender || Math.abs(popupData.activeIndex - mIndex) < 2
-              if (isRender) {
-                m.isRender = true
-              }
-              return isRender ? (
+          <div
+            class={styles.coursewarePlay}
+            style={{ width: parentContainer.width }}
+            onClick={(e: Event) => {
+              e.stopPropagation()
+              setModelOpen()
+            }}
+          >
+            <div class={styles.wraps}>
+              {data.itemList.map((m: any, mIndex: number) => {
+                const isRender = m.isRender || Math.abs(popupData.activeIndex - mIndex) < 2
+                if (isRender) {
+                  m.isRender = true
+                }
+                return isRender ? (
+                  <div
+                    key={'index' + mIndex}
+                    class={[
+                      styles.itemDiv,
+                      mIndex < popupData.activeIndex && styles.preItem,
+                      mIndex > popupData.activeIndex && styles.nextItem
+                    ]}
+                    style={{ zIndex: popupData.activeIndex == mIndex ? 10 : 1 }}
+                    onClick={(e: Event) => {
+                      e.stopPropagation()
+                      clearTimeout(activeData.timer)
+                      if (Date.now() - activeData.nowTime < 300) {
+                        handleDbClick(m)
+                        return
+                      }
+                      activeData.nowTime = Date.now()
+                      activeData.timer = setTimeout(() => {
+                        activeData.model = !activeData.model
+                        Object.values(data.videoRefs).map((n: any) =>
+                          n.toggleHideControl(activeData.model)
+                        )
+                        if (activeData.model) {
+                          setModelOpen()
+                        }
+                      }, 300)
+                    }}
+                  >
+                    {m.type === 'VIDEO' ? (
+                      <>
+                        <VideoPlay
+                          ref={(v: any) => (data.videoRefs[mIndex] = v)}
+                          item={m}
+                          onLoadedmetadata={(videoItem: any) => {
+                            m.videoEle = videoItem
+                          }}
+                          onTogglePlay={(paused: boolean) => {
+                            console.log('播放切换', paused)
+                            // 首次播放完成
+                            if (!m.isprepare) {
+                              m.isprepare = true
+                            }
+                            m.autoPlay = false
+                            if (paused || popupData.open || popupData.guideOpen) {
+                              clearTimeout(activeData.timer)
+                            } else {
+                              setModelOpen()
+                            }
+                          }}
+                          onEnded={() => handleSwipeChange(popupData.activeIndex + 1)}
+                          onReset={setModelOpen}
+                        />
+                        <Transition name="van-fade">
+                          {!m.isprepare && (
+                            <div class={styles.loadWrap}>
+                              <Vue3Lottie animationData={playLoadData}></Vue3Lottie>
+                            </div>
+                          )}
+                        </Transition>
+                      </>
+                    ) : m.type === 'IMG' ? (
+                      <img src={m.content} />
+                    ) : (
+                      <MusicScore
+                        data-vid={m.id}
+                        music={m}
+                        onSetIframe={(el: any) => {
+                          m.iframeRef = el
+                        }}
+                      />
+                    )}
+                  </div>
+                ) : null
+              })}
+            </div>
+            <Transition name="right">
+              {activeData.model && (
                 <div
-                  key={'index' + mIndex}
-                  class={[styles.itemDiv, mIndex < popupData.activeIndex && styles.preItem, mIndex > popupData.activeIndex && styles.nextItem]}
-                  style={{ zIndex: popupData.activeIndex == mIndex ? 10 : 1 }}
+                  class={styles.rightFixedBtns}
                   onClick={(e: Event) => {
                     e.stopPropagation()
                     clearTimeout(activeData.timer)
-                    if (Date.now() - activeData.nowTime < 300) {
-                      handleDbClick(m)
-                      return
-                    }
-                    activeData.nowTime = Date.now()
-                    activeData.timer = setTimeout(() => {
-                      activeData.model = !activeData.model
-                      Object.values(data.videoRefs).map((n: any) => n.toggleHideControl(activeData.model))
-                      if (activeData.model) {
-                        setModelOpen()
-                      }
-                    }, 300)
                   }}
                 >
-                  {m.type === 'VIDEO' ? (
-                    <>
-                      <VideoPlay
-                        ref={(v: any) => (data.videoRefs[mIndex] = v)}
-                        item={m}
-                        onLoadedmetadata={(videoItem: any) => {
-                          m.videoEle = videoItem
-                          m.isprepare = true
-                        }}
-                        onTogglePlay={(paused: boolean) => {
-                          console.log('paused', paused)
-                          m.autoPlay = false
-                          if (paused) {
-                            clearTimeout(activeData.timer)
-                          } else {
-                            setModelOpen()
-                          }
-                        }}
-                        onEnded={() => handleSwipeChange(popupData.activeIndex + 1)}
-                        onReset={setModelOpen}
-                      />
-                      <Transition name="van-fade">
-                        {!m.isprepare && (
-                          <div class={styles.loadWrap}>
-                            <Vue3Lottie animationData={playLoadData}></Vue3Lottie>
-                          </div>
-                        )}
-                      </Transition>
-                    </>
-                  ) : m.type === 'IMG' ? (
-                    <img src={m.content} />
-                  ) : (
-                    <MusicScore
-                      data-vid={m.id}
-                      music={m}
-                      onSetIframe={(el: any) => {
-                        m.iframeRef = el
-                      }}
-                    />
+                  <div class={styles.btnsWrap}>
+                    <div
+                      class={[styles.fullBtn, styles.point]}
+                      onClick={() => (popupData.open = true)}
+                    >
+                      <img src={iconMenu} />
+                      <span>知识点</span>
+                    </div>
+                  </div>
+
+                  <div class={[styles.btnsWrap, styles.btnsBottom]}>
+                    <div class={styles.fullBtn} onClick={() => (popupData.guideOpen = true)}>
+                      <img src={iconTouping} />
+                      <span>投屏</span>
+                    </div>
+                    {data.isCourse && (
+                      <>
+                        <div
+                          class={styles.fullBtn}
+                          onClick={() => gotoRollCall('student_roll_call')}
+                        >
+                          <img src={iconDian} />
+                          <span>点名</span>
+                        </div>
+                        <div class={styles.fullBtn} onClick={() => gotoRollCall('sign_out')}>
+                          <img src={iconPoint} />
+                          <span>签退</span>
+                        </div>
+                      </>
+                    )}
+                  </div>
+                </div>
+              )}
+            </Transition>
+
+            <Transition name="left">
+              {activeData.model && (
+                <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')}>
+                        <img src={iconUp} />
+                        <span style={{ textAlign: 'center' }}>上一个</span>
+                      </div>
+                    </div>
+                  )}
+                  {popupData.activeIndex != data.itemList.length - 1 && (
+                    <div class={styles.btnsWrap}>
+                      <div class={styles.fullBtn} onClick={() => handlePreAndNext('down')}>
+                        <span style={{ textAlign: 'center' }}>下一个</span>
+                        <img src={iconDown} />
+                      </div>
+                    </div>
                   )}
                 </div>
-              ) : null
-            })}
+              )}
+            </Transition>
           </div>
         </div>
 
@@ -599,67 +686,6 @@ export default defineComponent({
           {data.isCourse && <PlayRecordTime ref={playRef} list={data.itemList} />}
         </div>
 
-        <Transition name="right">
-          {activeData.model && (
-            <div class={styles.rightFixedBtns}>
-              <div class={styles.btnsWrap}>
-                <div
-                  class={[styles.fullBtn, styles.point]}
-                  onClick={() => {
-                    clearTimeout(activeData.timer)
-                    popupData.open = true
-                  }}
-                >
-                  <img src={iconMenu} />
-                  <span>知识点</span>
-                </div>
-              </div>
-
-              <div class={[styles.btnsWrap, styles.btnsBottom]}>
-                <div class={styles.fullBtn} onClick={() => (popupData.guideOpen = true)}>
-                  <img src={iconTouping} />
-                  <span>投屏</span>
-                </div>
-                {data.isCourse && (
-                  <>
-                    <div class={styles.fullBtn} onClick={() => gotoRollCall('student_roll_call')}>
-                      <img src={iconDian} />
-                      <span>点名</span>
-                    </div>
-                    <div class={styles.fullBtn} onClick={() => gotoRollCall('sign_out')}>
-                      <img src={iconPoint} />
-                      <span>签退</span>
-                    </div>
-                  </>
-                )}
-              </div>
-            </div>
-          )}
-        </Transition>
-
-        <Transition name="left">
-          {activeData.model && (
-            <div class={styles.leftFixedBtns}>
-              {popupData.activeIndex != 0 && (
-                <div class={[styles.btnsWrap,  styles.prePoint]}>
-                  <div class={styles.fullBtn} onClick={() => handlePreAndNext('up')}>
-                    <img src={iconUp} />
-                    <span style={{ textAlign: 'center' }}>上一个</span>
-                  </div>
-                </div>
-              )}
-              {popupData.activeIndex != data.itemList.length - 1 && (
-                <div class={styles.btnsWrap}>
-                  <div class={styles.fullBtn} onClick={() => handlePreAndNext('down')}>
-                    <span style={{ textAlign: 'center' }}>下一个</span>
-                    <img src={iconDown} />
-                  </div>
-                </div>
-              )}
-            </div>
-          )}
-        </Transition>
-
         <Popup
           class={styles.popup}
           overlayClass={styles.overlayClass}
@@ -667,6 +693,7 @@ export default defineComponent({
           round
           v-model:show={popupData.open}
           onClose={() => {
+            console.log('关闭')
             const item = data.itemList[popupData.activeIndex]
             if (item?.type == 'VIDEO') {
               setModelOpen()
@@ -694,6 +721,12 @@ export default defineComponent({
           position="right"
           round
           v-model:show={popupData.guideOpen}
+          onClose={() => {
+            const item = data.itemList[popupData.activeIndex]
+            if (item?.type == 'VIDEO') {
+              setModelOpen()
+            }
+          }}
         >
           <OGuide />
         </Popup>