网课倍速痛点解决：一套前端代码实现自由控速播放器

前言

刷网课、看解说视频时，系统自带的倍速菜单是不是总让你抓狂？想调到 1.5 倍得点三四次，想慢放 0.6 倍还要翻半天菜单，自由度低到离谱。

今天咱们就不靠播放器原生控件，用HTML 搭骨架、CSS 做颜值、JS 写交互，从零自制一个垂直调速滑块：鼠标在白色滑块区域上下移动，实时改变视频播放速度，最低 0.4 倍慢放、最高 4 倍快进，速度数字实时显示，丝滑又好玩。

一、HTML：搭建页面的 "房子骨架"

HTML 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频倍速播放</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div class="wrapper">
        <video class="video" src="https://media.w3.org/2010/05/sintel/trailer.mp4" controls></video>
        <!-- 滑块 -->
        <div class="speed">
            <div class="speed-bar">1x</div>
        </div>
    </div>
    <script src="./index.js"></script>
</body>
</html>

结构逻辑很清晰： 外层 wrapper 包裹视频和调速滑块，.speed是白色可滑动区域，内部.speed-bar是会跟着鼠标拉伸的渐变进度条，同时承载倍速文字。

二、CSS：给页面穿上好看的 "花衣服"

如果 HTML 是骨架，CSS 就是装修工具，负责居中布局、配色、圆角、弹性布局排版，把简陋的标签变得好看好用。

CSS 复制代码

body {
    width: 100vw;
    height: 100vh;
    background: #4c4c4c url('https://unsplash.it/1500/900?image=1021');
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wrapper {
    display: flex;
    width: 850px;
    border: 1px solid #000;
}

.video {
    width: 765px;
    height: 430px;
}

.speed {
    flex: 1;
    /* 因为父容器是flex布局，又因为 video 指明要 765 px 的宽度， 所以 speed 设置 flex: 1, 就会自动占满剩余空间 */
    background: #fff;
    border-radius: 100px;
    margin: 10px;
    overflow: hidden;
    cursor: pointer;
}

.speed-bar {
    width: 100%;
    height: 16.3%;
    background: linear-gradient(to bottom, #ec3b3b, #dd0fc5);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
}

重点小细节： .speed设置flex:1，在 wrapper 弹性容器里会自动占满视频剩下的宽度；overflow:hidden裁剪渐变条超出容器的部分，搭配超大圆角实现竖条胶囊外观。

三、JS：赋予页面 "灵魂交互"，实现鼠标控倍速

HTML 和 CSS 只能看不能动，JavaScript 就是浏览器里的交互脚本，能抓取页面上所有 DOM 元素，监听鼠标、键盘等行为，实现实时逻辑变化。

JavaScript 复制代码

// 鼠标控制视频倍速播放
// 1. 鼠标控制滑块的高度
// 2. 获取到滑块这个容器
// 3. 鼠标移动，控制滑块的高度 
// 4. 监听鼠标在白色容器中的移动事件

const speedBar = document.querySelector('.speed-bar');
const speed = document.querySelector('.speed');
const video = document.querySelector('.video');

speed.addEventListener('mousemove', function (e) {
    // 修改 bar 的高度
    // 获取鼠标在 Y 轴坐标的变化
    const y = e.pageY - speed.offsetTop;  // 鼠标在白色容器中移动的距离
    const persent = y / speed.offsetHeight    // 鼠标在白色容器中移动的距离占白色容器高度的比例
    const height = Math.round(persent * 100) + '%';

    speedBar.style.height = height;
    // 文本修改
    const min = 0.4
    const max = 4
    const playbackRate = persent * (max - min) + min;
    // console.log(persent);

    speedBar.textContent = playbackRate.toFixed(2) + 'x';

    // 视频播放速速
    video.playbackRate = playbackRate;
})

核心公式拆解：

鼠标在滑块最底部：percent=1 → 1*(4-0.4)+0.4 = 4，4 倍极速快进
鼠标在滑块最顶部：percent=0 → 0*(4-0.4)+0.4 = 0.4，0.4 倍慢速回放
鼠标在滑块中间：自动线性换算中间档位，不存在固定档位限制，调速丝滑无卡顿

四、看看效果

大家可以自己去试试😄

结语

看完整套代码就能发现，前端三件套分工特别清晰：HTML 搭结构、CSS 做美化、JS 写交互，三者组合就能实现很多播放器原生做不到的自定义效果。