课件播放优化

src/views/courseList/index.tsx

@@ -3,9 +3,10 @@ import { state } from '@/state'
 import { Button, Empty, Grid, GridItem, Icon, showToast } from 'vant'
 import { defineComponent, onMounted, reactive } from 'vue'
 import styles from './index.module.less'
-import iconLook from './image/look.svg'
 import { useRoute, useRouter } from 'vue-router'
 import { postMessage } from '@/helpers/native-message'
+import iconLook from './image/look.svg'
+import iconCourse from './image/icon-course.png'
 export default defineComponent({
   name: 'lessonCourseware',
   setup() {
@@ -87,14 +88,9 @@ export default defineComponent({
               <GridItem>
                 <div
                   class={styles.gridItem}
-                  style={{
-                    background: item.coverImg
-                      ? ''
-                      : `hsla(${Math.floor(Math.random() * 360)},50%,50%,.8)`
-                  }}
                   onClick={() => handleClick(item)}
                 >
-                  {/* <img src={item.coverImg} class={styles.cover} /> */}
+                  <img src={iconCourse} class={styles.cover} />
                   <div class={styles.title}>
                     <div>{item.coursewareDetailName}</div>
                     {route.query.code !== 'select' && <div>已使用 {item.useNum} 次</div>}

src/views/coursewarePlay/component/musicScore.tsx

@@ -8,23 +8,34 @@ export default defineComponent({
     music: {
       type: Object,
       default: () => {}
-    }
+    },
   },
-  setup(props, {}) {
+  emits: ['setIframe'],
+  setup(props, { emit }) {
+    const iframeRef = ref()
     const Authorization = sessionStorage.getItem('Authorization') || ''
     const origin = /(localhost|192)/.test(location.host)
-      ? 'https://ponline.colexiu.com'//'http://192.168.3.114:3000'
+      ? 'http://192.168.3.114:3000'
       : location.origin
     const query = qs.stringify({
       id: props.music.content,
       modelType: 'practice',
+      headerHeight: 32,
       Authorization: Authorization
     })
     let src = `${origin}/orchestra-music-score/?` + query
     console.log('src', src)
     return () => (
       <div class={styles.musicScore}>
-        <iframe class={[styles.container, 'musicIframe']} frameborder="0" src={src}></iframe>
+        <iframe
+          ref={iframeRef}
+          onLoad={() => {
+            emit('setIframe', iframeRef.value)
+          }}
+          class={[styles.container, 'musicIframe']}
+          frameborder="0"
+          src={src}
+        ></iframe>
       </div>
     )
   }

src/views/coursewarePlay/index.module.less

@@ -113,7 +113,6 @@
   bottom: 0;
   z-index: 10;
   background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), transparent);
-  backdrop-filter: blur(2px);
   .time {
     display: flex;
     justify-content: space-between;

src/views/coursewarePlay/index.tsx

@@ -39,6 +39,7 @@ import iconplay from './image/icon-play.svg'
 import iconpause from './image/icon-pause.svg'
 import Points from './component/points'
 import { getSecondRPM } from '@/helpers/utils'
+import { useRect } from '@vant/use'
 
 export default defineComponent({
   name: 'CoursewarePlay',
@@ -66,17 +67,16 @@ export default defineComponent({
     handleInit()
     onUnmounted(() => {
       handleInit(1)
+      window.removeEventListener('message', iframeHandle)
     })
 
     const route = useRoute()
+    const headeRef = ref()
     const data = reactive({
       detail: null,
-      active: '',
-      itemActive: '',
       knowledgePointList: [] as any,
       itemList: [] as any,
-      showHead: true,
-      players: [] as any
+      showHead: true
     })
     const activeData = reactive({
       nowTime: 0,
@@ -87,6 +87,13 @@ export default defineComponent({
       timer: null as any,
       item: null as any
     })
+    watch(() => activeData.model, () => {
+      const videoItem = data.itemList.find(n => n.id === popupData.itemActive)
+      // 阴影切换的时候,具体去切换某个视频的控件
+      if (videoItem && videoItem.type === 'VIDEO'){
+        videoItem.playModel = activeData.model
+      }
+    })
     const getItemList = () => {
       const list: any = []
       for (let i = 0; i < data.knowledgePointList.length; i++) {
@@ -108,17 +115,19 @@ export default defineComponent({
               paused: true,
               loop: false,
               videoEle: null,
-              timer: null
+              timer: null,
+              playModel: true
             }
           }
           list.push({
             ...material,
-            ...videoItem
+            ...videoItem,
+            iframeRef: null
           })
         }
       }
-      console.log('🚀 ~ list', list)
-      return list
+      // console.log('🚀 ~ list', list)
+      data.itemList = list
     }
     const getDetail = async () => {
       try {
@@ -133,12 +142,20 @@ export default defineComponent({
             n.index = 0
             return n
           })
-          data.itemList = getItemList()
+          getItemList()
         }
       } catch (error) {}
     }
+    // ifram事件处理
+    const iframeHandle = (ev: MessageEvent) => {
+      // console.log(ev.data)
+      if (ev.data?.api === 'headerTogge') {
+        activeData.model = ev.data.show
+      }
+    }
     onMounted(() => {
       getDetail()
+      window.addEventListener('message', iframeHandle)
     })
     // 返回
     const goback = () => {
@@ -156,8 +173,9 @@ export default defineComponent({
       itemName: ''
     })
     // 设置当前的激活状态
-    const setActiveData = () => {
+    const setActiveData = (val: any, oldVal: any) => {
       handleStopVideo()
+      handleStopMusicScore()
     }
     watch(() => popupData.activeIndex, setActiveData)
 
@@ -167,6 +185,12 @@ export default defineComponent({
         m.videoEle?.pause()
       })
     }
+    // 停止曲谱的播放
+    const handleStopMusicScore = () => {
+      data.itemList.forEach((m: any) => {
+        m.iframeRef?.contentWindow?.postMessage({ api: 'setPlayState' }, '*')
+      })
+    }
     // 获取name
     const setAllName = () => {
       const item = data.itemList.find((n: any) => n.id == popupData.itemActive)
@@ -240,15 +264,6 @@ export default defineComponent({
       }
     }
 
-    // 视频播放
-    const handleVideoPlay = (e: Event) => {
-      const videoEle = e.target! as unknown as HTMLVideoElement
-      // console.log(videoEle.paused, videoEle.currentTime, videoEle.duration)
-      if (videoEle.paused) return
-      activeData.currentTime = videoEle.currentTime
-      activeData.duration = videoEle.duration
-    }
-
     // 调整播放进度
     const handleChangeSlider = (val: any, m: any) => {
       if (m?.videoEle) {
@@ -289,7 +304,7 @@ export default defineComponent({
                     {m.type === 'VIDEO' ? (
                       <>
                         <video
-                          preload='auto'
+                          preload="auto"
                           class="player"
                           data-vid={m.id}
                           src={m.content}
@@ -297,7 +312,7 @@ export default defineComponent({
                           onLoadedmetadata={(e: Event) => {
                             const videoEle = e.target as unknown as HTMLVideoElement
                             // console.log('video加载成功', videoEle)
-                            videoEle.currentTime = .5
+                            videoEle.currentTime = 0.5
                             m.currentTime = videoEle.currentTime
                             m.duration = videoEle.duration
                             m.videoEle = videoEle
@@ -320,7 +335,7 @@ export default defineComponent({
                           <source src={m.content} type="video/mp4" />
                         </video>
                         <Transition name="bottom">
-                          {activeData.model && (
+                          {m.playModel && (
                             <div class={styles.bottomFixedContainer}>
                               <div class={styles.time}>
                                 <span>{getSecondRPM(m.currentTime)}</span>
@@ -391,7 +406,13 @@ export default defineComponent({
                     ) : m.type === 'IMG' ? (
                       <img src={m.content} />
                     ) : (
-                      <MusicScore music={m} />
+                      <MusicScore
+                        data-vid={m.id}
+                        music={m}
+                        onSetIframe={(el: any) => {
+                          m.iframeRef = el
+                        }}
+                      />
                     )}
                     {/* <Transition name="van-fade">
                       {activeData.model && <div class={styles.playModel}></div>}
@@ -405,7 +426,7 @@ export default defineComponent({
 
         <Transition name="top">
           {activeData.model && (
-            <div class={styles.headerContainer}>
+            <div class={styles.headerContainer} ref={headeRef}>
               <div class={styles.backBtn} onClick={() => goback()}>
                 <Icon name={iconBack} />
                 返回