一键掌控视频播放速度,滑动调节轻松实现！！

前言

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

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

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

实现

实现效果

实现流程

页面代码分析

<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>

1. <div class="wrapper">: 这是一个包裹整个视频播放区域的容器,用于布局和样式设置。

2. <video src="./mv.mp4" controls width="765" height="430" class="video"></video>: 这是一个标准的 HTML <video> 标签,用于插入一个视频文件。

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

3. <div class="speed">: 这是一个包含视频播放速度控制器的容器。

4. <div class="speed-bar">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%