封装一个支持长按选择加速倍率的视频组件

说在前面

在短视频兴起的时代，很多的视频软件都有视频加速的功能，只需轻轻长按屏幕，视频便会根据预设的速度模式进行倍速播放，这是很常用而且很实用的一个功能，今天就让我们来简单实现一个组件，支持长按屏幕加速，且可以滑动选择加速倍率。

效果展示

pc端

移动端

体验地址

http://jyeontu.xyz/jvuewheel/#/JVideoSpeedView

组件实现

1、组件属性（props）

width

视频播放器的宽度，可传入如 "300px"、"50%" 等合法的 CSS 宽度值。默认值为"300px"。

height

视频播放器的高度，接受合法的 CSS 高度值。默认为"200px"。

videoUrl

视频的源地址，需为有效的视频文件 URL，本地视频或线上链接都行。

videoUrl: require("../../assets/video/密码箱.mp4"),
videoUrl: "http://jyeontu.xyz/video/202112250058.mp4",

loop

是否循环播放视频，默认为false。

timeIntervalLimit

长按事件的时间间隔限制（单位：毫秒），用于判断长按操作的触发条件，默认为1500，即长按屏幕1.5就会触发长按加速事件。

speedChooseList

可选的播放速度列表，数组元素为数字，表示倍速，默认为 [2, 3, 4]。

2、获取video位置尺寸

获取视频元素和组件容器的位置和尺寸信息，存储在 videoContentInfo 中，用于后续的长按位置计算和速度调节。

initVideoContentInfo() {
   
    const JVideoSpeedBox = this.$refs[this.uid + "-JVideoSpeed"];
    const videoContent = this.$refs[this.uid + "-video"];
    const videoContentInfo = {
   
        offSetTop: videoContent.offsetTop || JVideoSpeedBox.offsetTop,
        offsetLeft:
            videoContent.offsetLeft || JVideoSpeedBox.offsetLeft,
        height:
            videoContent.offsetHeight || JVideoSpeedBox.offsetHeight,
        width: videoContent.offsetWidth || JVideoSpeedBox.offsetWidth,
    };
    this.videoContentInfo = videoContentInfo;
},

3、video点击事件

处理视频的点击事件，实际上调用 videoMouseUp 方法，用于统一处理视频播放状态的切换逻辑，避免在点击和其他操作（如长按后松开）时出现不一致的播放状态。

videoClick(e) {
   
    this.videoMouseUp(e);
},

4、鼠标按下事件

处理鼠标按下事件，记录按下时间 downTime，并在 timeIntervalLimit 后判断是否为长按操作，如果视频未暂停，则执行 videoLongPress 方法展示速度选择面板并进行速度调节。

videoMouseDown(e) {
   
    this.downTime = new Date().getTime();
    setTimeout(() => {
   
        const videoContent = this.$refs[this.uid + "-video"];
        if (videoContent.paused) {
   
            this.downTime = null;
            return;
        }
        if (!