加载条

src/views/coursewarePlay/coursewarePlay.vue

@@ -5,7 +5,7 @@
 -->
 <template>
    <div class="coursewarePlay">
-      <videoPlay ref="videoPlayDom" @ready="handleVideoReady" :listen-win-events="true">
+      <videoPlay ref="videoPlayDom" @ready="handleVideoReady" @ended="handleChangeCourseware(1)" :listen-win-events="true">
          <div class="leftTools posTools">
             <div v-if="activeCoursewareIndex > 0" class="posBtn" @click="handleChangeCourseware(-1)">
                <img src="@/img/coursewarePlay/shang.png" />

src/views/coursewarePlay/videoPlay/videoPlay.vue

@@ -44,6 +44,9 @@
                         :step="playController.speedStep"
                         :max="playController.maxSpeed"
                         :min="playController.minSpeed"
+                        :format-tooltip="(num:number) => {
+                           return num.toFixed(1)
+                        }"
                      />
                      <img @click="handlePalySpeed(-playController.speedStep)" src="./img/jian.png" />
                   </div>
@@ -68,6 +71,7 @@ const props = defineProps<{
 }>()
 const emits = defineEmits<{
    (e: "ready"): void //播放器初始化完成
+   (e: "ended"): void //播放结束
 }>()
 
 const videoId = "video" + UUID()
@@ -149,6 +153,10 @@ function initVideo() {
    playerVm.on("pause", () => {
       playController.type = "pause"
    })
+   // 播放结束
+   playerVm.on("ended", () => {
+      emits("ended")
+   })
 }
 /**
  * 播放  需要在ready之后调用
@@ -259,6 +267,7 @@ defineExpose({
       & > :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;
@@ -311,8 +320,9 @@ defineExpose({
                   .sliderSpeed.el-slider {
                      flex-grow: 1;
                      padding: 14px 0;
-                     --el-slider-button-wrapper-offset: -11px;
+                     --el-slider-button-wrapper-offset: -10px;
                      --el-slider-button-wrapper-size: 26px;
+                     --el-slider-button-size: 18px;
                      --el-slider-height: 6px;
                      --el-slider-border-radius: 4px;
                      --el-slider-main-bg-color: #ff8057;