知识点自动播放和kid

src/views/coursewarePlay/component/musicScore.tsx

@@ -8,14 +8,14 @@ export default defineComponent({
     music: {
       type: Object,
       default: () => {}
-    },
+    }
   },
   emits: ['setIframe'],
   setup(props, { emit }) {
     const iframeRef = ref()
     const Authorization = sessionStorage.getItem('Authorization') || ''
     const origin = /(localhost|192)/.test(location.host)
-      ? 'http://192.168.3.114:3000'
+      ? 'https://ponline.colexiu.com'//'http://192.168.3.114:3000'
       : location.origin
     const query = qs.stringify({
       id: props.music.content,

src/views/coursewarePlay/component/points.tsx

@@ -47,9 +47,19 @@ export default defineComponent({
                       <>
                         {Array.isArray(item?.materialList) &&
                           item.materialList.map((n: any) => {
-                            return <div class={[styles.item, props.itemActive == n.id ? styles.itemActive : '']} onClick={() => {
-                              emit('handleSelect', {itemActive: n.id, tabActive: item.id})
-                            }}>{n.name}</div>
+                            return (
+                              <div
+                                class={[
+                                  styles.item,
+                                  props.itemActive == n.id ? styles.itemActive : ''
+                                ]}
+                                onClick={() => {
+                                  emit('handleSelect', { itemActive: n.id, tabActive: item.id, tabName: item.name })
+                                }}
+                              >
+                                {n.name}
+                              </div>
+                            )
                           })}
                       </>
                     ),

src/views/coursewarePlay/index.tsx

@@ -120,25 +120,22 @@ export default defineComponent({
     const getItemList = async () => {
       const list: any = []
       const browserInfo = browser()
+      let _item = null
       for (let i = 0; i < data.knowledgePointList.length; i++) {
         const item = data.knowledgePointList[i]
+        const itemLength = item.materialList.length - 1
         for (let j = 0; j < item.materialList.length; j++) {
           const material = item.materialList[j]
-          if (browserInfo.isApp && ['VIDEO', 'IMG'].includes(material.type)){
+          //请求本地缓存
+          if (browserInfo.isApp && ['VIDEO', 'IMG'].includes(material.type)) {
             const localData = await getCacheFilePath(material)
-            if (localData?.content?.localPath){
+            if (localData?.content?.localPath) {
               material.url = material.content
               material.content = localData.content.localPath
               // console.log("🚀 ~ material", material)
             }
           }
-          if (popupData.itemActive === '') {
-            popupData.tabName = item.name
-            popupData.tabActive = material.knowledgePointId
-            popupData.itemActive = material.id
-            popupData.itemName = material.name
-            popupData.activeIndex = 0
-          }
+
           let videoItem = {}
           if (material.type === 'VIDEO') {
             videoItem = {
@@ -154,10 +151,28 @@ export default defineComponent({
           list.push({
             ...material,
             ...videoItem,
-            iframeRef: null
+            iframeRef: null,
+            tabName: item.name,
+            autoPlay: j === itemLength
           })
         }
       }
+
+      let item: any = null
+      if (route.query.kId) {
+        item = list.find((n: any) => n.id == route.query.kId)
+        const _firstIndex = list.findIndex((n: any) => n.id == route.query.kId)
+        popupData.firstIndex = _firstIndex > -1 ? _firstIndex : 0
+      } else {
+        item = list[0] || {}
+      }
+      if (item) {
+        popupData.tabName = item.tabName
+        popupData.tabActive = item.knowledgePointId
+        popupData.itemActive = item.id
+        popupData.itemName = item.name
+        popupData.activeIndex = popupData.firstIndex
+      }
       console.log('🚀 ~ list', list)
       data.itemList = list
     }
@@ -197,6 +212,7 @@ export default defineComponent({
 
     const swipeRef = ref()
     const popupData = reactive({
+      firstIndex: 0,
       open: false,
       activeIndex: -1,
       tabActive: '',
@@ -223,24 +239,12 @@ export default defineComponent({
         m.iframeRef?.contentWindow?.postMessage({ api: 'setPlayState' }, '*')
       })
     }
-    // 获取name
-    const setAllName = () => {
-      const item = data.itemList.find((n: any) => n.id == popupData.itemActive)
-      const tab = data.knowledgePointList.find((n: any) => n.id == popupData.tabActive)
-      if (item) {
-        popupData.itemName = item.name
-      }
-      if (tab) {
-        popupData.tabName = tab.name
-      }
-    }
     // 切换素材
     const toggleMaterial = () => {
       const index = data.itemList.findIndex((n: any) => n.id == popupData.itemActive)
       if (index > -1) {
         popupData.activeIndex = index
         swipeRef.value?.swipeTo(index)
-        setAllName()
       }
     }
     // 轮播切换
@@ -250,7 +254,8 @@ export default defineComponent({
       if (item) {
         popupData.tabActive = item.knowledgePointId
         popupData.itemActive = item.id
-        setAllName()
+        popupData.itemName = item.name
+        popupData.tabName = item.tabName
       }
     }
     // 上一个知识点, 下一个知识点
@@ -292,7 +297,7 @@ export default defineComponent({
         item.timer = setTimeout(() => {
           activeData.model = false
         }, 3000)
-        console.dir(videoEle)
+        // console.dir(videoEle)
       }
     }
 
@@ -303,6 +308,23 @@ export default defineComponent({
       }
     }
 
+    //当前视频播放完
+    const handleEnded = (m: any) => {
+      // console.log(m)
+      // 自动播放下一个知识点
+      if (m.autoPlay){
+        if (popupData.activeIndex != data.itemList.length - 1) {
+          popupData.activeIndex++
+          swipeRef.value?.next()
+          const nextItem = data.itemList[popupData.activeIndex]
+          nextTick(() => {
+            nextItem.videoEle?.play()
+          })
+          console.log("🚀 ~ nextItem", nextItem)
+        }
+      }
+    }
+
     return () => (
       <div class={styles.coursewarePlay}>
         <Swipe
@@ -312,6 +334,7 @@ export default defineComponent({
           loop={false}
           vertical
           lazyRender={true}
+          initialSwipe={popupData.firstIndex}
           onChange={handleSwipeChange}
         >
           {data.itemList.map((m: any, mIndex: number) => {
@@ -344,7 +367,6 @@ export default defineComponent({
                           loop={m.loop}
                           onLoadedmetadata={(e: Event) => {
                             const videoEle = e.target as unknown as HTMLVideoElement
-                            // videoEle.currentTime = 0.5
                             m.currentTime = videoEle.currentTime
                             m.duration = videoEle.duration
                             m.videoEle = videoEle
@@ -354,12 +376,15 @@ export default defineComponent({
                             m.currentTime = videoEle.currentTime
                           }}
                           onPlay={() => {
+                            // 播放
                             m.paused = false
                           }}
                           onPause={() => {
+                            //暂停
                             clearTimeout(m.timer)
                             m.paused = true
                           }}
+                          onEnded={() => handleEnded(m)}
                         >
                           <source src={m.content} type="video/mp4" />
                         </video>
@@ -389,7 +414,7 @@ export default defineComponent({
                                       onClick={(e: Event) => {
                                         e.stopPropagation()
                                         clearTimeout(m.timer)
-                                        console.log('点击播放', m.videoEle)
+                                        closeToast()
                                         m.videoEle?.play()
                                         m.paused = false
                                         m.timer = setTimeout(() => {
@@ -494,14 +519,21 @@ export default defineComponent({
         <Transition name="left">
           {activeData.model && (
             <div class={styles.leftFixedBtns}>
-              <div class={[styles.fullBtn, styles.prePoint]} onClick={() => handlePreAndNext('up')}>
-                <img src={iconUp} />
-                <span style={{ textAlign: 'center' }}>上一个</span>
-              </div>
-              <div class={styles.fullBtn} onClick={() => handlePreAndNext('down')}>
-                <span style={{ textAlign: 'center' }}>下一个</span>
-                <img src={iconDown} />
-              </div>
+              {popupData.activeIndex != 0 && (
+                <div
+                  class={[styles.fullBtn, styles.prePoint]}
+                  onClick={() => handlePreAndNext('up')}
+                >
+                  <img src={iconUp} />
+                  <span style={{ textAlign: 'center' }}>上一个</span>
+                </div>
+              )}
+              {popupData.activeIndex != data.itemList.length - 1 && (
+                <div class={styles.fullBtn} onClick={() => handlePreAndNext('down')}>
+                  <span style={{ textAlign: 'center' }}>下一个</span>
+                  <img src={iconDown} />
+                </div>
+              )}
             </div>
           )}
         </Transition>
@@ -521,6 +553,7 @@ export default defineComponent({
               // console.log(res)
               popupData.tabActive = res.tabActive
               popupData.itemActive = res.itemActive
+              popupData.tabName = res.tabName
               popupData.open = false
               toggleMaterial()
             }}