通过 JS 一键滑动调节掌控视频播放速度,附完整代码！-网页技术-CodeUp Hub

前言

传统的视频播放器往往只提供几种固定的倍速选项

今天我们来实现一个通过滑动调节视频的播放倍速，这种方式极其优雅

优雅的背后更是对自身逻辑思维能力的一种考验，接下来就让我们一起探索一下吧

实现

实现效果

通过 JS 一键滑动调节掌控视频播放速度,附完整代码！

实现流程

页面代码分析

<div class="wrapper">
        <video src="./mv.mp4" controls width="765" height="430" class="video"></video>

        <div class="speed">
            <div class="speed-bar">1x</div>
        </div>
    </div>

<div>: 这是一个包裹整个视频播放区域的容器,用于布局和样式设置。
<video src="./mv.mp4" controls width="765" height="430"></video>: 这是一个标准的 HTML <video> 标签,用于插入一个视频文件。

src="./mv.mp4": 指定视频文件的路径和文件名。
controls: 为视频添加默认的播放控件,如播放/暂停、进度条、音量控制等。
width="765" height="430": 设置视频播放器的宽度和高度。
class="video": 为视频元素添加一个类名,用于后续的通过类名获取该元素。

<div>: 这是一个包含视频播放速度控制器的容器。
<div>1x</div>: 这是实际的速度控制条,初始显示为"1x"倍速

css代码比较简单就不做分析了，直接附上

* {
    margin: 0;
    padding: 0;
}

body {
    /* background: url(./背景图.jpg); */
    background-color: #e0effe;
}

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

.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代码分析(重点)

重点分析js部分的逻辑思维

怎么去实现，实现的思路？

首先，既然是根据滑块去获取倍速，那么鼠标的位置肯定是和视频播放的倍数是有关系的，通过逻辑关系与倍速实现滑动改变倍速

第一步，先获取三个元素，方便对其进行操作

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

既然是滑块，就必须获取鼠标的位置，可以通过addEventListener去监听mousemove事件，当监听到事件后，便会触发回调函数

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

    // 用js修改speed-bar容器的height
    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

})

重点分析回调函数

在回调函数当中，会传入对象e 事件对象，事件对象包含了与事件相关的各种信息

var y = e.pageY - speed.getBoundingClientRect().top: 计算鼠标指针相对于 "speed" 元素顶部的垂直距离。
var percent = y / speed.offsetHeight: 计算鼠标指针在 "speed" 元素高度上的百分比位置。
var height = Math.round(percent * 100) + '%': 根据百分比位置计算出一个新的高度值,并转换成字符串百分比格式。
speedBar.style.height = height: 将计算出的新高度值设置到 class 名为 "speed-bar" 的元素的 CSS 高度属性上,从而实现了速度条的滑动效果。
var min = 0.5, var max = 4: 定义了视频播放速度的最小值和最大值。
var playSpeed = percent * (max - min) + min: 根据鼠标位置的百分比,计算出一个介于最小值和最大值之间的播放速度值。
speedBar.textContent = playSpeed.toFixed(2) + 'x': 将计算出的播放速度值更新到 "speed-bar" 元素的文本内容上,显示当前的倍速。
video.playbackRate = playSpeed: 将计算出的播放速度值设置到 "video" 元素的 playbackRate 属性上,从而实现了视频播放速度的动态调整。

总结

本文展示了如何使用 HTML、CSS 和 JavaScript 结合起来,创建一个具有视频播放速度调节功能的视频播放器界面。这种交互设计有助于提高用户体验,让观看视频更加便捷灵活。

完整代码

欢迎大家给出建议和优化

播放的视频可随意，只需更改video的src地址即可

html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <div>
        <video src="./mv.mp4" controls width="765" height="430"></video>
        <div>
            <div>1x</div>
        </div>
    </div>
    <script src="./index.js"></script>
</body>
</html>

* {
    margin: 0;
    padding: 0;
}

body {
    /* background: url(./背景图.jpg); */
    background-color: #e0effe;
}

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

.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;
}

.input1 {
    width: 400px;
    height: 60px;
    border: 10;
    background-color: transparent;
    position: fixed;
    top: 8%;
    left: 40%;
}

.input2 {
    height: 45px;
    font-size: 20;
    border: 10;
    background-color: transparent;
    position: fixed;
    top: 8%;
    left: 66.5%;
}

// 获取白底容器
// 在白色容器上监听鼠标的移动事件
// 获取到鼠标移动的距离
// 根据鼠标移动的距离来设计彩色容器的高度
var speed = document.querySelector('.speed')
var video = document.querySelector('.video')
var speedBar = document.querySelector('.speed-bar')

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

    // 用js修改speed-bar容器的height
    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

})