fix

src/views/courseware-play/component/musicScore.tsx

@@ -7,6 +7,8 @@ import { Loading, Skeleton } from 'vant';
 import { usePageVisibility } from '@vant/use';
 import { useRoute } from 'vue-router';
 import { browser } from '@/helpers/utils';
+import { storage } from '@/helpers/storage';
+import { ACCESS_TOKEN } from '@/store/mutation-types';
 
 export default defineComponent({
   name: 'musicScore',
@@ -63,11 +65,9 @@ export default defineComponent({
     const isLoaded = ref(false);
     const renderError = ref(false);
     const renderSuccess = ref(false);
-    const Authorization =
-      sessionStorage.getItem('Authorization') ||
-      'bearer 529d1359-20c6-4ea2-b2ba-2694cdeda8a4';
+    const Authorization = storage.get(ACCESS_TOKEN);
     const origin = /(localhost|192)/.test(location.host)
-      ? 'https://dev.kt.colexiu.com'
+      ? 'https://test.lexiaoya.cn'
       : location.origin;
     let src = qs.stringifyUrl({
       url: origin + '/instrument',

src/views/courseware-play/component/video-item/index.tsx

@@ -87,10 +87,10 @@ export default defineComponent({
     /** 加载成功 */
     const onLoadedmetadata = () => {
       data.duration = elRef.value.duration;
-      // 加载成功后台, 如果是第一次加载, 且是show状态, 则播放
-      if (props.show) {
-        onToggleAudio('play');
-      }
+      // // 加载成功后台, 如果是第一次加载, 且是show状态, 则播放
+      // if (props.show) {
+      //   onToggleAudio('play');
+      // }
       emit('loadedmetadata');
     };
 
@@ -117,6 +117,7 @@ export default defineComponent({
         <div class={styles.content}>
           <div ref={contetRef} class={styles.contentWrap}>
             <video
+              poster={props.item.coverImg}
               src={isEmtry.value ? '' : item.value.content}
               ref={elRef}
               loop={data.loop}

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

@@ -1,181 +0,0 @@
-import { defineComponent, nextTick, onMounted, toRefs } from 'vue'
-import 'plyr/dist/plyr.css'
-import Plyr from 'plyr'
-import { ref } from 'vue'
-import styles from './video.module.less'
-
-import iconLoop from '../image/icon-loop.svg'
-import iconLoopActive from '../image/icon-loop-active.svg'
-import iconplay from '../image/icon-play.svg'
-import iconpause from '../image/icon-pause.svg'
-import { watch } from 'vue'
-
-export default defineComponent({
-  name: 'video-play',
-  props: {
-    item: {
-      type: Object,
-      default: () => {
-        return {}
-      }
-    },
-    isEmtry: {
-      type: Boolean,
-      default: false
-    },
-    show: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: ['loadedmetadata', 'togglePlay', 'ended', 'reset'],
-  setup(props, { emit, expose }) {
-    const { item, isEmtry } = toRefs(props)
-    const videoRef = ref()
-    const videoItem = ref<Plyr>()
-    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)
-    const toggleHideControl = (isShow: false) => {
-      videoItem.value?.toggleControls(isShow)
-    }
-    const togglePlay = (e: Event) => {
-      e.stopPropagation()
-      videoItem.value?.togglePlay()
-    }
-    const toggleLoop = (e: Event) => {
-      const loopBtn = document.getElementById(loopBtnId)
-      if (!loopBtn || !videoItem.value) return
-      const isLoop = videoItem.value.loop
-      if (isLoop) {
-        loopBtn.classList.remove(styles.active)
-      } else {
-        loopBtn.classList.add(styles.active)
-      }
-      videoItem.value.loop = !videoItem.value.loop
-    }
-    const onDefault = () => {
-      document.getElementById(controlID)?.addEventListener('click', (e: Event) => {
-        e.stopPropagation()
-        emit('reset')
-      })
-      document.getElementById(playBtnId)?.addEventListener('click', togglePlay)
-      document.getElementById(loopBtnId)?.addEventListener('click', toggleLoop)
-    }
-
-    const changePlayBtn = (code: string) => {
-      const playBtn = document.getElementById(playBtnId)
-      if (!playBtn) return
-      if (code == 'play') {
-        playBtn.classList.remove(styles.btnPause)
-        playBtn.classList.add(styles.btnPlay)
-      } else {
-        playBtn.classList.remove(styles.btnPlay)
-        playBtn.classList.add(styles.btnPause)
-      }
-    }
-    const controls = `
-            <div id="${controlID}" class="plyr__controls bottomFixed ${styles.controls}">
-                <div class="${styles.time}">
-                    <div class="plyr__time plyr__time--current" aria-label="Current time">00:00</div>
-                    <div class="plyr__time plyr__time--duration" aria-label="Duration">00:00</div>
-                </div>
-                <div class="${styles.slider}">
-                    <div class="plyr__progress">
-                        <input data-plyr="seek" type="range" min="0" max="100" step="0.01" value="0" aria-label="Seek">
-                        <progress class="plyr__progress__buffer" min="0" max="100" value="0">% buffered</progress>
-                        <span role="tooltip" class="plyr__tooltip">00:00</span>
-                    </div>
-                </div>
-                <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>  
-                            <img class="${styles.playIcon}" src="${iconplay}" />
-                            <img class="${styles.playIcon}" src="${iconpause}" />
-                        </button>
-                        <button id="${loopBtnId}" class="${styles.actionBtn} ${styles.loopBtn}">
-                            <img class="loop" src="${iconLoop}" />
-                            <img class="loopActive" src="${iconLoopActive}" />
-                        </button>
-                    </div>
-                    <div>${item.value.name}</div>
-                </div>
-            </div>`
-
-    onMounted(() => {
-      console.log('onMounted')
-      videoItem.value = new Plyr(videoRef.value, {
-        autoplay: props.item.autoPlay,
-        controls: controls,
-        autopause: true, // 一次只允许
-        ratio: '16:9', // 强制所有视频的纵横比
-        hideControls: false, // 在 2 秒没有鼠标或焦点移动、控制元素模糊（制表符退出）、播放开始或进入全屏时自动隐藏视频控件。只要移动鼠标、聚焦控制元素或暂停播放，控件就会立即重新出现。
-        clickToPlay: false, // 单击（或点击）视频容器将切换播放/暂停
-        fullscreen: { enabled: false, fallback: false, iosNative: false } // 不适用全屏
-      })
-      if (videoItem.value) {
-        videoItem.value.on('play', () => {
-          if (videoItem.value) {
-            videoItem.value.muted = false
-            videoItem.value.volume = 1
-          }
-            
-          // console.log('开始播放', item.value)
-          if (!item.value.autoPlay && !item.value.isprepare && videoItem.value) {
-            // 加载完成后,取消静音播放
-            videoItem.value.pause()
-          }
-          changePlayBtn('')
-          emit('togglePlay', videoItem.value?.paused)
-        })
-        videoItem.value.on('pause', () => {
-          changePlayBtn('play')
-          emit('togglePlay', videoItem.value?.paused)
-        })
-        videoItem.value.on('ended', (e: Event) => {
-          emit('ended')
-          changePlayBtn('play')
-        })
-        videoItem.value.once('loadedmetadata', (e: Event) => {
-          console.log('loadedmetadata')
-          changePlayBtn('play')
-          if (item.value.autoPlay && videoItem.value) {
-            videoItem.value.play()
-          }
-          emit('loadedmetadata', videoItem.value)
-        })
-
-        nextTick(() => {
-          onDefault()
-        })
-      }
-    })
-    expose({
-      changePlayBtn,
-      toggleHideControl
-    })
-
-    /** 监听当前元素是否显示 */
-    watch(
-      () => props.show,
-      val => {
-        if (val) {
-          videoItem.value?.play();
-        } else {
-          videoItem.value?.pause()
-        }
-      }
-    );
-    return () => (
-      <div class={styles.videoWrap}>
-        <video
-          style={{ width: '100%', height: '100%' }}
-          src={isEmtry.value ? '' : item.value.content}
-          ref={videoRef}
-          playsinline="false"
-        ></video>
-      </div>
-    )
-  }
-})

src/views/courseware-play/component/video.module.less

@@ -1,133 +0,0 @@
-.videoWrap {
-    width: 100%;
-    height: 100%;
-
-    :global {
-        .plyr--video {
-            width: 100%;
-            height: 100%;
-        }
-
-        .plyr__time {
-            display: block !important;
-        }
-        .plyr__video-wrapper{
-            pointer-events: none;
-        }
-    }
-}
-
-:global(.bottomFixed).controls {
-    width: 100%;
-    background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), transparent);
-    padding: 0 !important;
-    flex-direction: column;
-    transition: all 0.5s;
-
-    .time {
-        display: flex;
-        justify-content: space-between;
-        width: 100%;
-        color: #fff;
-        font-size: 10px;
-        padding: 4px 20px;
-
-        :global {
-            .plyr__time+.plyr__time:before {
-                content: '';
-            }
-        }
-    }
-
-    .slider {
-        width: 100%;
-        padding: 0 20px;
-
-        :global {
-            .van-slider__button {
-                background: var(--van-primary);
-            }
-
-            .van-loading {
-                width: 100%;
-                height: 100%;
-            }
-        }
-    }
-
-    .actions {
-        display: flex;
-        justify-content: space-between;
-        width: 100%;
-        color: #fff;
-        font-size: 12px;
-        padding: 0 20px;
-        align-items: center;
-
-        .actionWrap {
-            display: flex;
-        }
-
-        .actionBtn {
-            display: flex;
-            width: 38px;
-            height: 38px;
-            padding: 4px 0;
-            background: transparent;
-        }
-
-        .actionBtn>img {
-            width: 100%;
-            height: 100%;
-        }
-
-        :global {
-            .van-loading__circular {
-                width: 100%;
-                height: 100%;
-            }
-        }
-
-        .playIcon {
-            display: none;
-        }
-
-        .btnPlay img:nth-child(2) {
-            display: block;
-        }
-
-        .btnPause img:nth-child(3) {
-            display: block;
-        }
-
-        .btnPlay,
-        .btnPause {
-            :global {
-                .van-loading {
-                    display: none;
-                }
-            }
-        }
-        .loopBtn{
-            :global{
-                .loop{
-                    display: block;
-                }
-                .loopActive{
-                    display: none;
-                }
-            }
-        }
-        .loopBtn.active{
-            :global{
-                .loop{
-                    display: none;
-                }
-                .loopActive{
-                    display: block;
-                }
-            }
-        }
-
-    }
-}

src/views/courseware-play/index.tsx

@@ -30,7 +30,6 @@ import { browser, getSecondRPM } from '@/helpers/utils';
 import { Vue3Lottie } from 'vue3-lottie';
 import playLoadData from './datas/data.json';
 import { usePageVisibility } from '@vant/use';
-import VideoPlay from './component/video-play';
 import AudioItem from './component/audio-item';
 import { api_lessonCoursewareKnowledgeDetailDetail } from './api';
 import VideoItem from './component/video-item';
@@ -137,7 +136,7 @@ export default defineComponent({
           ...m,
           iframeRef: null,
           videoEle: null,
-          autoPlay: index === 0, //加载完成是否自动播放
+          autoPlay: false, //加载完成是否自动播放
           isprepare: false, // 视频是否加载完成
           isRender: false // 是否渲染了
         };