自定义节奏：通过滑动条打自由度更高的倍速播放体验（源码附上，小白可用）

前言：

随着广大观众对于视频观看体验的不断追求与提高，视频播放速度的调整也成为了许多人关注的焦点。但是，目前主流的视频播放器支持的倍速播放却只有寥寥几样，属实难以满足各位大佬的观影需求。而通过滑动条实现视频变速播放，正是一个便捷、高效的解决方案。废话不多说，直接源码奉上

正文：

页面效果大致如下

有一张平铺整个页面的背景图，正中间是视频播放区域，右侧有一个滑动条，当鼠标悬停在滑动条的不同位置时会有不同的倍速效果且为线性变化，不再是单纯的1.25或1.5等

代码如下

首先自然是html部分，这里写了一个warpper容器用来装整个视频和和滑动条，滑动条有两层，结构为白底和渐变色的面，当用户选择不同倍速是，渐变色的面会覆盖相对应的白底，能让用户更直接观察到当前倍速与最大倍速之间的关系

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./1.css">//引入同目录下名为1.css的css文件
</head>

<body>
    <div class="warpper">
        <video class="flex" width="765" height="430" controls
            src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4">//src后面的是视频地址，可以自己选择网络资源或者自己电脑上的视频
            </video>
        <!-- 滑块 -->
        <div class="speed">//整个速度滑块
            <div class="speed-bar">//用户自己选择的速度的区块
                1x
            </div>
        </div>

    </div>
    <script src="./1.js"></script>//引入同目录下名为1.js的js文件
</body>

</html>

接下来是略微复杂的css部分：

css 复制代码

* {
    /* *代表所有 */
    margin: 0;
    padding: 0;
    
}

这里设置的目的是去掉页面body自带的边框，因为不同浏览器的边框不一样，为了用户能在不同浏览器上获得相同的体验，我们这里会直接设置为0

css 复制代码

body {
    height: 100vh;
    background: grey url('https://img0.baidu.com/it/u=3371150166,1094527291&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500');
    /* 这里是背景图，url（''）内可以接任意图片地址（别整那些不能播的） */
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}

这里是背景图，url（''）内可以接任意图片地址（别整那些不能播的），height：100vh是为了让body占据整个页面，，其余代码作用分别为：让照片不重复（当照片不够大时会重复照片以填满整个页面），照片平铺，弹性布局，位置居中

css 复制代码

.warpper {
    display: flex;
    width: 850px;
}

.speed {

    flex: 1;
    /* width: 50px; */
    background: white;
    /* height: 430px; */
    margin: 10px;
    border-radius: 50px;
    overflow: hidden;
}

.speed-bar {
    width: 100%;
    height: 16.3%;
    background: linear-gradient(-170deg, #2376ae, #c16ecf 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;

}

这里的background设置的为线性渐变色，后面的四个参数分别为渐变的角度，起始色彩，渐变后的色彩以及渐变后的色彩在哪里显示

最后是一些JS用于实现用户交互后的变速效果

js 复制代码

var speed = document.querySelector('.speed')
var bar = document.querySelector('.speed-bar')
var video = document.querySelector('.flex')
speed.addEventListener('mousemove', function (e) {


    var y = e.y - speed.offsetTop
    var perence = y / speed.offsetHeight
    var height = Math.round(perence * 100) + "%"
    bar.style.height = height


    var min = 0.4;
    var max = 4;
    var playbackRate = perence * (max - min) + min
    bar.textContent = playbackRate.toFixed(2) + 'x'


    video.playbackRate = playbackRate
})

前三行通过class名拿到html中的speed，speed-bar和flex结构，随后定义了一个名为mousemove的函数用于监听鼠标的移动，再通过计算鼠标在speed内的位置得出当前的视频播放速度，这里的min和max分别表示最小播放速率和最大播放速率，可以根据您的需求自己改动，但需要注意的是目前绝大多数浏览器最大支持倍速为16倍，因此即使max设置为更大的数字，最后的实际播放效果可能也只有16倍。

总结：

总之，通过滑动条实现视频变速播放的功能，是一种非常有用的视频观看技巧。通过灵活的变速调整，能够让我们更好地掌控视频播放过程，提高观看效率，同时也能更好地理解视频内容。