课件播放0.5

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

@@ -19,15 +19,14 @@ export default defineComponent({
       }
     }
   },
-  emits: ['loadedmetadata', 'loaded', 'togglePlay', 'ended', 'reset'],
+  emits: ['loadedmetadata', 'togglePlay', 'ended', 'reset'],
   setup(props, { emit, expose }) {
     const { item } = toRefs(props)
     const videoRef = ref()
     const videoItem = ref<Plyr>()
-    const controlID = 'v' + Date.now() + Math.floor(Math.random() * 1000)
-    const playBtnId = 'play' + Date.now() + Math.floor(Math.random() * 1000)
-    const loopBtnId = 'loop' + Date.now() + Math.floor(Math.random() * 1000)
-    const playIcon = 'icon' + Date.now() + Math.floor(Math.random() * 1000)
+    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)
     }
@@ -40,9 +39,9 @@ export default defineComponent({
       if (!loopBtn || !videoItem.value) return
       const isLoop = videoItem.value.loop
       if (isLoop) {
-        loopBtn.innerHTML = `<img src="${iconLoop}" />`
+        loopBtn.classList.remove(styles.active)
       } else {
-        loopBtn.innerHTML = `<img src="${iconLoopActive}" />`
+        loopBtn.classList.add(styles.active)
       }
       videoItem.value.loop = !videoItem.value.loop
     }
@@ -59,9 +58,11 @@ export default defineComponent({
       const playBtn = document.getElementById(playBtnId)
       if (!playBtn) return
       if (code == 'play') {
-        playBtn.innerHTML = `<img class="${playIcon}" src="${iconplay}" />`
+        playBtn.classList.remove(styles.btnPause)
+        playBtn.classList.add(styles.btnPlay)
       } else {
-        playBtn.innerHTML = `<img class="${playIcon}" src="${iconpause}" />`
+        playBtn.classList.remove(styles.btnPlay)
+        playBtn.classList.add(styles.btnPause)
       }
     }
     const controls = `
@@ -81,9 +82,12 @@ export default defineComponent({
                     <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}">
-                            <img src="${iconLoop}" />
+                        <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>

src/views/coursewarePlay/component/video.module.less

@@ -7,7 +7,8 @@
             width: 100%;
             height: 100%;
         }
-        .plyr__time{
+
+        .plyr__time {
             display: block !important;
         }
     }
@@ -16,9 +17,10 @@
 :global(.bottomFixed).controls {
     width: 100%;
     background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), transparent);
-    padding: 0;
+    padding: 0 !important;
     flex-direction: column;
     transition: all 0.5s;
+
     .time {
         display: flex;
         justify-content: space-between;
@@ -58,7 +60,8 @@
         font-size: 12px;
         padding: 0 20px;
         align-items: center;
-        .actionWrap{
+
+        .actionWrap {
             display: flex;
         }
 
@@ -73,14 +76,55 @@
         .actionBtn>img {
             width: 100%;
             height: 100%;
-            display: block;
-            
         }
-        :global{
-            .van-loading__circular{
+
+        :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/coursewarePlay/play.tsx

@@ -107,7 +107,6 @@ export default defineComponent({
         },
         () => {
           console.log(234)
-          
         }
       )
       // 头,包括返回箭头
@@ -584,7 +583,11 @@ export default defineComponent({
                             }
                           }}
                           onEnded={() => handleSwipeChange(popupData.activeIndex + 1)}
-                          onReset={setModelOpen}
+                          onReset={() => {
+                            if (!m.videoEle?.paused) {
+                              setModelOpen()
+                            }
+                          }}
                         />
                         <Transition name="van-fade">
                           {!m.isprepare && (