修改视频播放器

src/student/pre-register-active/video.module.less

@@ -12,7 +12,6 @@
   background: url('./images/video-bg.png') no-repeat center;
   background-size: contain;
   min-height: 265px;
-
 }
 
 .video-content {
@@ -37,15 +36,6 @@
   }
 
   :global {
-    .plyr {
-      height: 100%;
-      border-radius: 18px;
-    }
-
-    .plyr__video-wrapper {
-      border-radius: 18px;
-    }
-
     .video-back {
       position: absolute;
       left: 20px;
@@ -60,6 +50,15 @@
       padding: 4px 5px 4px 3px;
     }
 
+
+    .video-js {
+      width: 100%;
+      height: 100%;
+      border-radius: 30px;
+      overflow: hidden;
+    }
+
+
     .plyr__poster {
       background-size: cover;
     }
@@ -73,33 +72,23 @@
       background-color: transparent !important;
     }
 
-    .plyr__menu {
-      &>.plyr__control[data-plyr="settings"] {
-        font-size: 0;
-        padding: 0;
-        background-color: transparent;
-
-        &::before {
-          content: ' ';
-          display: inline-block;
-          background: url('./images/video-speed1.png') no-repeat center;
-          background-size: contain;
-          width: 32px;
-          height: 32px;
-        }
-
-        svg {
-          display: none !important;
-        }
-      }
-    }
-
     .video-js {
       width: 100%;
       height: 100%;
-      border-radius: 30px;
-      overflow: hidden;
     }
+
+    .tcp-skin .vjs-play-progress {
+      background-color: var(--van-primary) !important;
+    }
+
+    .vjs-slider:focus {
+      box-shadow: none !important;
+    }
+
+    .video-js .vjs-progress-control:hover .vjs-progress-holder {
+      font-size: 1em !important;
+    }
+
   }
 
   .video {

src/views/courseList/index.tsx

@@ -1,31 +1,7 @@
 import request from '@/helpers/request'
 import { state } from '@/state'
-import {
-  Button,
-  Cell,
-  CellGroup,
-  Dialog,
-  Empty,
-  Grid,
-  GridItem,
-  Icon,
-  Image,
-  Loading,
-  showConfirmDialog,
-  showToast,
-  Skeleton,
-  SkeletonImage,
-  Space
-} from 'vant'
-import {
-  defineComponent,
-  onMounted,
-  reactive,
-  onUnmounted,
-  nextTick,
-  Transition,
-  TransitionGroup
-} from 'vue'
+import { Button, Cell, CellGroup, Dialog, Icon, showConfirmDialog } from 'vant'
+import { defineComponent, onMounted, reactive, onUnmounted, TransitionGroup } from 'vue'
 import styles from './index.module.less'
 import { useRoute, useRouter } from 'vue-router'
 import {
@@ -171,11 +147,11 @@ export default defineComponent({
 
       if (!item.hasCache) {
         const hasFree = String(item.accessScope) === '0'
-        if (!hasFree){
+        if (!hasFree) {
           const hasVip = handleCheckVip()
           if (!hasVip) return
         }
-        
+
         // 下载中不提示
         if (item.downloadStatus == 1) {
           return
@@ -328,7 +304,8 @@ export default defineComponent({
               <div key="list" class={styles.periodList}>
                 <CellGroup inset>
                   {data.list.map((item: any) => {
-                    let isLock = item.lockFlag ||
+                    const isLock =
+                      item.lockFlag ||
                       ((route.query.code == 'select' || state.platformType == 'STUDENT') &&
                         !item.unlock)
                     const isSelect = route.query.code === 'select'
@@ -344,8 +321,10 @@ export default defineComponent({
                           icon: () => (
                             <div class={styles.periodItem}>
                               <div class={styles.periodItemModel}>
-                                <img src={ isLock ? iconCourseLock : iconCourse} />
-                                {!isLock && String(item.accessScope) === '0' && <img class={styles.periodTip} src={iconTip} />}
+                                <img src={isLock ? iconCourseLock : iconCourse} />
+                                {!isLock && String(item.accessScope) === '0' && (
+                                  <img class={styles.periodTip} src={iconTip} />
+                                )}
                               </div>
                             </div>
                           ),

src/views/coursewarePlay/index.tsx

@@ -409,7 +409,6 @@ export default defineComponent({
           activeItem.videoEle?.pause()
           // activeItem.videoEle?.stop()
         }
-        // console.log('🚀 ~ activeItem:', activeItem)
         // 停止曲谱的播放
         if (activeItem.type === 'SONG') {
           activeItem.iframeRef?.contentWindow?.postMessage({ api: 'setPlayState' }, '*')

src/views/exercise-after-class/video-class.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, onMounted, ref, watch, Transition, toRefs } from 'vue'
+import { defineComponent, onMounted, ref, watch, Transition, toRefs, nextTick } from 'vue'
 import styles from './index.module.less'
 import { Slider } from 'vant'
 import iconplay from '../coursewarePlay/image/icon-play.svg'
@@ -29,14 +29,19 @@ export default defineComponent({
 
     const __init = () => {
       if (videoItem.value) {
+        nextTick(() => {
+          videoItem.value?.pause()
+        })
+        console.log(props.item, item.value)
         videoItem.value.poster(props.item.coverImg) // 封面
-        videoItem.value.src(item.value.content) // url 播放地址
+        videoItem.value.src(props.item.content) // url 播放地址
+        videoItem.value.loop(props.item.loop)
+        videoItem.value.muted(props.item.muted)
+        videoItem.value.autoplay(props.item.autoplay)
 
         // 初步加载时
         videoItem.value.one('loadedmetadata', (e: any) => {
-          // console.log(' Loading metadata')
-
-          if (item.value.autoPlay && videoItem.value) {
+          if (item.value.autoplay && videoItem.value) {
             videoItem.value?.play()
           }
           // 获取时长
@@ -64,18 +69,17 @@ export default defineComponent({
           console.log('暂停')
           //暂停
           item.value.paused = true
+          item.value.videoEle?.pause()
         })
 
         videoItem.value.on('play', () => {
-          console.log('播放')
-          // 播放
           item.value.paused = false
+          // 播放
           if (item.value.muted) {
             item.value.muted = false
-            videoItem.value.muted(false)
-            videoItem.value.volume(1)
-            // item.value.videoEle.pause()
-            videoItem.value.pause()
+            item.value.videoEle?.muted(false)
+            item.value.videoEle?.volume(1)
+            item.value.videoEle?.pause()
           }
         })