vue3+vite+ChimeePlayer 视频播放器使用el-slider自定义播放进度条_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>
1
2

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133