还在为没有会员无法倍速播放视频而烦恼吗？今天手把手带你自己制作一个倍速视频播放器，做到看片不求人！

效果图

实现思路：

首先需要一个盒子装用户输入url地址和提交按钮

<div>
        <input type="text" name="" id="input1" value="请输入在线视频播放地址" class="input1">
        <input type="submit" name="" id="input2" 确定 class="input2">
</div>

需要一个盒子来装视频和右边的倍速播放滑块，但是滑块由2层构成，一层为白底条，一层为彩色条

// 大盒子
<div class="wrapper">
// 视频
        <video src="" controls width="765" height="430" class="video"></video>
//2个小盒子 一个白底条 一个彩色条
        <div class="speed">
            <div class="speed-bar">1x</div>
        </div>
    </div>

骨架有了，让我们对各个部分进行初步渲染(css)

首先用适配符将所有标签的内边距外边距更改为0
选一张你喜欢的背景图，让你的视频看的舒心

* {
    margin: 0;
    padding: 0;
}

body {
    background: url(./背景图.jpg);
}

通过固定定位的方式把大容器移动到中间，距离左边50%，但是这会让你的左边距为百分之五十，因此需要通过平移的方式往回走自身的百分之五十，这样就能正好处于中间位置。
更改为弹性盒子布局，防止块级元素挤占一行，影响美观

.wrapper {
    position: fixed;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 50%;
    display: flex;
}

右边盒子中装了两个div，一个白底一个彩色条
更改圆形边界
当彩色条覆盖白色时做一个溢出隐藏，防止圆形边界被覆盖
彩色条做渐变色，从顶部开始向底部逐渐变色，由#2376ae色变为#c16ecf色
彩色条中的倍速文本(1x\2x...)做居中显示处理
当鼠标放到彩色条上时变为点击时图标(小手)

.speed {
    width: 50px;
    height: 430px;
    background-color: #fff;
    /*display: inline-block;*/
    border-radius: 50px;
    overflow: hidden;
}

.speed-bar {
    width: 100%;
    height: 16%;
    background: linear-gradient(to bottom, #2376ae, #c16ecf);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

目前已经完成了静态的初步显示，接下来用js进行动作指导（当然两个input盒子没给出css代码，可以自己设置成想要的样子）

要对元素进行操作，首先获取元素，这里通过类名获取方式document.querySelector()
添加事件监听器，当我们点击白底容器时，获取到鼠标具体坐标，这里需要减去白底盒子距离页面顶部的距离才是真正的y长，再通过y长除以白底盒子高度便可以得到一个百分比，这个百分比需要四舍五入，防止循环
得到百分比后便可以修改彩色条长度了
设置你想要的倍速范围，例如(0.5x~4x),通过一个数学公式得到倍速播放比例(可以自己思考一下这个公式)
得到的倍数也可能是个循环小数，再做一次四舍五入
修改彩色条显示的倍速文字，保留两位小数speedBar.textContent = playSpeed.toFixed(2) + 'x'
最后video.playbackRate = playSpeed设置倍速

var speed = document.querySelector('.speed')
var video = document.querySelector('.video')

speed.addEventListener('click', function (e) {
    var y = e.pageY - speed.getBoundingClientRect().top
    var percent = y / speed.offsetHeight
    var height = Math.round(percent * 100) + '%'

    // 用js修改speed-bar容器的height
    var speedBar = document.querySelector('.speed-bar')
    speedBar.style.height = height
    // 修改倍速文字
    var min = 0.5
    var max = 4
    var playSpeed = percent * (max - min) + min
    speedBar.textContent = playSpeed.toFixed(2) + 'x'

    // 更改视频播放速度

    video.playbackRate = playSpeed

})

获取用户传来的input内容并通过监听器更改vedio的src

var input1 = document.querySelector('.input1')
var input2 = document.querySelector('.input2')
input2.addEventListener('click', function (e) {
    url = input1.value
    // 测试是否取到用户传的url
    //console.log(url);
    video.src = url;

})

测试

这里我准备好了一个本地视频，放在index.html的同级目录中名字为mv.mp4，因此输入地址为./mv.mp4

这样一个简易的视频倍速播放器就制作完成了

结语

快去动手制作一个专属视频播放器吧，当然此处通过文本框传入的视频不能是随意url，有些在线地址做了加密处理，本文未做视频解析处理。

前端助力，视频倍速播放随心控

效果图

实现思路：

测试

结语