（html + css + js）实现视频的倍速播放

前言

相信大家都有过看视频想要按照自己所想的去调倍速的冲动，那么今天它就来了。我会带大家去实现这个功能，话不多说，先给大家展示一下效果。

一、页面展示

相信看到效果的小伙伴已经感兴趣了，那么接下来给大家讲解一下如何去实现

二、网页实现

1.找到自己想播放的视屏地址，把它放进容器中

代码如下（html）：

<div id="wrapper">
    <video width="765" height="430" src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" controls class="flex">video>
    <div class="speed">
        <div class="speed-bar">1xdiv>
    div>
div>

2.把视屏放在一个合适的位置

这就需要大家用css去定义了
代码如下（css）：

*{
     
    margin: 0;
    padding: 0;
}

body{
     
    min-height: 100vh;/*相对于浏览器的高度 */
    background: #4c4c4c url('https://unsplash.it/1500/900?image=1021');/*如果图片没有加载出来就会优先显示颜色 */
    background-size: cover;
    display: flex;/*把父容器设置为弹性*/
    justify-content: center;/*在X轴上居中*/
    align-items: center;/*在Y轴上居中 */
}

#wrapper{
     
    width: 850px;
    display: flex;
}

3.在视屏旁边创建一个倍速的拉动框

.speed{
     
    flex: 1;/* 等比继承*/
    margin: 10px;
    background-color: white;
    border-radius: 50px;
    display: flex;
    overflow: hidden;
    align-items: flex-start;/*从弹性开始的地方去布局*/
}
.speed-bar{
     
    width: 100%;
    height: 16.3%;
    background: linear-gradient(-170deg,#2376ae 0%, #c16ecf 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;/*把鼠标变成手的样子*/
}

好了，这样整体的布局已经全部做好了，接下来就是要去实现鼠标移动，视屏的倍速也跟着移动。那么大家可以先思考一下如何去实现。

4.用js去实现鼠标监听事件

代码如下（js）：

var speed = document.querySelector('.speed')//querySelector获取类名的方法
var bar = document.querySelector('.speed-bar')
var video = document.querySelector('.flex')

// 监听什么什么事件(鼠标滑动)  里面的function是监听函数
speed.addEventListener('mousemove',function(e){
     
    console.log(e);
    var y = e.pageY - speed.offsetTop // offsetTop是获取某个dom结构到浏览器顶部的距离
    var percent = y / speed.offsetHeight // offsetHeight是获取某个dom结构自身的高度
    var min = 0.4
    var max = 4
    var height = Math.round(percent*100) + '%' // Math.round() 取整
    var palybackRate = percent * (max - min) + min
    bar.style.height = height;
    bar.textContent = palybackRate.toFixed(2) + 'X' // toFixed(2)保留2位小数
    video.playbackRate = palybackRate // video.playbackRate控制video播放速度
})

总结

以上就是今天要跟大家分享的内容，本文制作比较简单，代码还是不太成熟。希望大家都能看懂。也希望大佬们多多指点。我已经附上了全部代码，很高兴大家能快速的刷着视频。