vue3+vite+ChimeePlayer 视频播放器使用el-slider自定义播放进度条

1、第一步在index.html引入视频组件

<link crossorigin="anonymous" href="https://lib.baomitu.com/chimee-player/1.4.8/chimee-player.browser.css" rel="stylesheet">
<script crossorigin="anonymous" src="https://lib.baomitu.com/chimee-player/1.4.8/chimee-player.browser.js"></script>

2、创建公共组件videoItem.vue，el-slider必须使用@mousedown，@mouseup鼠标方法，使用el-slider自带的@change，@input方法无法修改视频播放时间

<template>
  <div class="videoPlayer">
    <div class="wrapper" :id="id"></div>
    <div class="vm-btn-block flexLayout">
      <div class="time">{{ sliderMInText }}/{{ playTimeFormat(sliderMax) }}</div>
      <el-slider v-model="playTime"
                 :format-tooltip="playTimeFormat"
                 :min="sliderMIn"
                 :max="sliderMax"
                 @mousedown="getNowWh($event, playTime)"
                 @mouseup="playTimeChange($event, playTime)"
      />
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, inject, reactive, nextTick, onMounted } from "vue";
import { VideoPlay } from '@element-plus/icons-vue'
import {ElMessage} from "element-plus";
import moment from "moment";

interface Props {
  id: string
  itemData: VmData,
  url: string,
  videoPlayTime: any
}
const props = defineProps<Props>()

const emits = defineEmits<{
  (e: 'playVm', value: any): void;
  (e: 'TimeChange', value: any): void;
}>()

let chimee: any = null
 //视频总时长
const sliderMax = ref<any>(props.videoPlayTime[0] + props.videoPlayTime[1])
const sliderMInText = ref<any>(0)
const sliderMIn = ref<any>(0)
const playTime = ref<any>(null)
const marks = ref( {
  0: '00:00', 3600: '01:00', 7200: '02:00', 10800: '03:00', 14400: '04:00', 18000: '05:00', 21600: '06:00', 25200: '07:00', 28800: '08:00',
  32400: '09:00', 36000: '10:00', 39600: '11:00', 43200: '12:00', 46800: '13:00', 50400: '14:00', 54000: '15:00', 57600: '16:00',
  61200: '17:00', 64800: '18:00', 68400: '19:00', 72000: '20:00', 75600: '21:00', 79200: '22:00', 82800: '23:00', 86400: '24:00',
})
const timer = ref<any>(null)

//这里自动播放
onMounted(() => {
  Player()
})
const Player = () => {
  const { ChimeePlayer } = window as any;
  nextTick(() => {
    chimee = new ChimeePlayer({
      wrapper: document.getElementById(props.id),  // video dom容器
      language:'zh-CN',
      textTrackDisplay: true,
      errorDisplay: true,
      controlBar: true,  //自带操作按钮
      controls: true, //是否展示控制条
      autoplay: false, //自动播放，但是使用无效
      muted: true, //是否静音
      isLive: true,  //true 直播流
    });
    chimee?.load(props.url);
    //测试地址，网上拷贝的
    // chimee?.load('https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/IronMan.mp4');

    const playPromise = chimee?.play();
    if (playPromise) {
      playPromise.then(() => {
        console.log("done.", props.url);
      }).catch((e) => {})
    }
    //播放
    chimee?.on('play', async () => {
      console.log('play', chimee.currentTime >= sliderMax.value)
      //播放时间大于等于视频总时间停止计时器
      if (chimee.currentTime >= sliderMax.value) {
        clearInterval(timer.value);
        timer.value = null;
        return
      }
      timer.value = setInterval(initTime, 60);
    })
    //暂停
    chimee?.on('pause', async () => {
      clearInterval(timer.value);
      timer.value = null;
    })
  })
}

const initTime = () => {
  sliderMInText.value = playTimeFormat(chimee.currentTime)
  playTime.value = chimee.currentTime
}

//触发滑块 鼠标放开
const playTimeChange = async (e, val) => {
  chimee.currentTime = val
  timer.value = setInterval(initTime, 60);
  console.log(val, chimee.currentTime)

}
//鼠标按下
const getNowWh = (e, val) => {
  console.log('getNowWh', e)
  //阻止事件冒泡
  if (e.preventDefault) {
    e.preventDefault();
  } else {
    e.returnValue = false;
  }
  clearInterval(timer.value);
  timer.value = null;
}

//时间格式化
const playTimeFormat = (val: any) =>{
  let h: any = parseInt((val/3600).toString());
  let m: any = parseInt(((val - h*3600)/60).toString());
  let s: any = parseInt((val - h*3600 - m*60).toString());
  m = m >= 10 ? m : "0" + m;
  s = s >= 10 ? s : "0" + s;
  if (h === 0) {
    return m + ":" + s;
  }
  return h + ":" + m + ":" + s
}

</script>