更新

src/views/coursewarePlay/coursewarePlay.vue

@@ -103,7 +103,7 @@ import { checkWebCourse_gyt } from "@/api/coursewarePlay.api"
 import { httpAjaxErrMsg, httpAjaxLoadingErrMsg } from "@/plugin/httpAjax"
 import userStore from "@/store/modules/user"
 import { useRoute } from "vue-router"
-import { shallowRef, ref, computed, watchEffect, onUnmounted, onMounted } from "vue"
+import { shallowRef, ref, computed, onUnmounted, onMounted, watch } from "vue"
 import { ElMessageBox } from "element-plus"
 import courseCollapse from "./components/courseCollapse"
 import pen from "./components/pen"
@@ -129,8 +129,7 @@ const activeCoursewareIndex = ref(0)
 const drawerShow = ref(false)
 // 课程总时间
 const coursewareTotalTIme = ref(0)
-
-watchEffect(() => {
+watch(activeCourseware, () => {
    activeCourseware.value && videoPlayDom.value?.playVideo({ src: activeCourseware.value.content })
 })
 onMounted(() => {

src/views/coursewarePlay/videoPlay/videoPlay.vue

@@ -14,17 +14,17 @@
       <video class="videoPlayBox" @click="handlePlay" :id="videoId" preload="auto" playsinline webkit-playsinline></video>
       <div class="videoController" @click.stop>
          <div class="timeController">{{ `${formatTime(timeController.currentTime)} / ${formatTime(timeController.duration)}` }}</div>
-         <el-slider
+         <n-slider
             class="sliderController"
-            @change="handleTimeChange"
-            @mousedown="handleSilderMousedown"
-            v-model="timeController.currentTimeSilder"
+            :keyboard="false"
+            :value="timeController.currentTimeSilder"
+            :tooltip="isShowController"
+            @update:value="handleSilderChange"
+            :on-dragend="handleTimeChange"
             :max="timeController.duration"
-            :format-tooltip="
-               (value:number) => {
+            :format-tooltip="(value:number) => {
                   return formatTime(value)
-               }
-            "
+            }"
          />
          <div class="playController">
             <div class="leftPlayController">
@@ -43,19 +43,21 @@
                >
                   <div class="sliderSpeedCon">
                      <img @click="handlePalySpeed(playController.speedStep)" src="./img/jia.png" />
-                     <el-slider
-                        tooltip-class="sliderSpeedTitTooltip"
+                     <n-slider
                         class="sliderSpeed"
-                        @change="handlePalySpeedChange"
-                        v-model="playController.palySpeed"
+                        :tooltip="false"
+                        :keyboard="false"
+                        :value="playController.palySpeed"
+                        @update:value="handlePalySpeedChange"
                         vertical
                         :step="playController.speedStep"
                         :max="playController.maxSpeed"
                         :min="playController.minSpeed"
-                        :format-tooltip="(num:number) => {
-                           return num.toFixed(1)
-                        }"
-                     />
+                     >
+                        <template #thumb>
+                           <div class="thumb">{{ playController.palySpeed.toFixed(1) + "X" }}</div>
+                        </template>
+                     </n-slider>
                      <img @click="handlePalySpeed(-playController.speedStep)" src="./img/jian.png" />
                   </div>
                </el-popover>
@@ -73,7 +75,7 @@ import "tcplayer.js/dist/tcplayer.min.css"
 import { onMounted, onUnmounted, ref, reactive, watch } from "vue"
 import { UUID } from "@/libs/tools"
 import { formatTime } from "./tools"
-import { addClass, removeClass, setStyle } from "@/libs/tools"
+import { NSlider } from "naive-ui"
 
 const props = defineProps<{
    listenWinEvents?: boolean
@@ -82,7 +84,6 @@ const emits = defineEmits<{
    (e: "ready"): void //播放器初始化完成
    (e: "ended"): void //播放结束
 }>()
-
 const videoId = "video" + UUID()
 let playerVm: Record<string, any>
 
@@ -97,32 +98,6 @@ const timeController = reactive({
 const btnSpendDom = ref()
 const popoverSpendDom = ref()
 let _popoverSpendTime: any
-let _sliderSpeedTitTime: any
-const body = document.querySelector("body")
-const name = "_sliderSpeedTit"
-function handleSliderSpeedTitShow() {
-   const sliderSpeedTitTooltipDom = document.querySelector(".sliderSpeedTitTooltip.el-popper")
-   sliderSpeedTitTooltipDom?.setAttribute("data-popper-placement", "top")
-   setStyle(
-      document.querySelector(".sliderSpeedTitTooltip.el-popper .el-popper__arrow") as any,
-      {
-         transform: `translate(15px, 0)`
-      } as any
-   )
-   setStyle(
-      sliderSpeedTitTooltipDom as any,
-      {
-         "z-index": "3000",
-         inset: "auto auto 0px 0px",
-         transform: `translate(172px, ${-156 - (playController.palySpeed - 0.5) * 10 * 15}px)`
-      } as any
-   )
-   addClass(body, name)
-   clearTimeout(_sliderSpeedTitTime)
-   _sliderSpeedTitTime = setTimeout(() => {
-      removeClass(body, name)
-   }, 800)
-}
 // 定时隐藏
 function handlePopoverTimeHide() {
    _popoverSpendTime && clearTimeout(_popoverSpendTime)
@@ -219,12 +194,13 @@ function playVideo({ src }: { src: string }) {
 }
 
 /* 时间控制器 */
-function handleTimeChange(value: number | number[]) {
-   playerVm.currentTime(value || 0)
+function handleTimeChange(value?: number) {
+   playerVm.currentTime(value || timeController.currentTimeSilder)
    timeController.isDrag = false
 }
-function handleSilderMousedown() {
+function handleSilderChange(value: number) {
    timeController.isDrag = true
+   timeController.currentTimeSilder = value
 }
 // 快进或者快退
 function speedCurrentTime(type: "fast" | "slow") {
@@ -241,11 +217,14 @@ function pauseVideo() {
    playerVm.pause()
    showController()
 }
+// 循环播放
 function handleLoop() {
    playController.loop ? playerVm.loop(false) : playerVm.loop(true)
    playController.loop = playerVm.loop()
 }
-function handlePalySpeedChange(value: number | number[]) {
+// 播放速度
+function handlePalySpeedChange(value: number) {
+   playController.palySpeed = value
    playerVm.playbackRate(value)
 }
 function handlePalySpeed(value: number) {
@@ -253,11 +232,8 @@ function handlePalySpeed(value: number) {
    if (palySpeed > playController.maxSpeed || palySpeed < playController.minSpeed) {
       return
    }
-   playController.palySpeed = palySpeed
    handlePalySpeedChange(palySpeed)
-   handleSliderSpeedTitShow()
 }
-/* 是否显示控制器 */
 function handleVideoKeydown(e: KeyboardEvent) {
    const key = e.key
    if (key === " ") {
@@ -268,6 +244,7 @@ function handleVideoKeydown(e: KeyboardEvent) {
       speedCurrentTime("fast")
    }
 }
+/* 是否显示控制器 */
 function handleVideoMousemove() {
    showController()
 }
@@ -287,13 +264,6 @@ defineExpose({
 })
 </script>
 
-<style lang="scss">
-body._sliderSpeedTit {
-   .sliderSpeedTitTooltip {
-      display: initial !important;
-   }
-}
-</style>
 <style lang="scss" scoped>
 .videoPlay {
    width: 100%;
@@ -325,27 +295,20 @@ body._sliderSpeedTit {
       background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), transparent);
       color: #fff;
       transition: all 0.5s;
+      &:hover {
+         opacity: initial !important;
+         transform: initial !important;
+      }
       .timeController {
          font-weight: 500;
          font-size: 20px;
          color: #ffffff;
          line-height: 30px;
       }
-      & > :deep(.sliderController.el-slider) {
-         --el-slider-button-wrapper-offset: -12px;
-         --el-slider-button-wrapper-size: 28px;
-         --el-slider-button-size: 20px;
-         --el-slider-height: 4px;
-         --el-slider-border-radius: 2px;
-         --el-slider-main-bg-color: #ff8057;
-         --el-slider-runway-bg-color: rgba(255, 255, 255, 0.5);
-         height: 28px;
-         .el-slider__button {
-            border: none;
-            &:hover {
-               transform: scale(1.1);
-            }
-         }
+      & > :deep(.sliderController.n-slider) {
+         --n-rail-color: #c9c9cb !important;
+         --n-fill-color: #ff8057 !important;
+         --n-fill-color-hover: #ff8057 !important;
       }
       .playController {
          display: flex;
@@ -384,21 +347,24 @@ body._sliderSpeedTit {
                      width: 30px;
                      height: 31px;
                   }
-                  .sliderSpeed.el-slider {
+                  .sliderSpeed.n-slider {
                      flex-grow: 1;
-                     padding: 10px 0;
-                     --el-slider-button-wrapper-offset: -9px;
-                     --el-slider-button-wrapper-size: 24px;
-                     --el-slider-button-size: 16px;
-                     --el-slider-height: 6px;
-                     --el-slider-border-radius: 4px;
-                     --el-slider-main-bg-color: #ff8057;
-                     --el-slider-runway-bg-color: rgba(255, 255, 255, 0.5);
-                     .el-slider__button {
-                        border: none;
-                        &:hover {
-                           transform: scale(1.1);
-                        }
+                     padding: 6px 0;
+                     --n-rail-width-vertical: 5px !important;
+                     --n-rail-color: #c9c9cb !important;
+                     --n-fill-color: #ff8057 !important;
+                     --n-fill-color-hover: #ff8057 !important;
+                     .thumb {
+                        height: 22px;
+                        padding: 0 6px;
+                        background: #ffffff;
+                        box-shadow: 0px 2px 4px 0px rgba(102, 102, 102, 0.77);
+                        border-radius: 11px;
+                        text-align: center;
+                        line-height: 22px;
+                        font-weight: 500;
+                        font-size: 15px;
+                        color: #ff8057;
                      }
                   }
                }