想要追剧倍速无烦恼？那就来看看这个教你学会用html、css、js操控视频进度条！

前言

相信很多小伙伴在观看一些视频时都是用1.5倍速、2倍速来观看，有没有想过自己动手设计一个视频进度条来操控自己的视频播放倍速呢，今天小编就带大家来设计一个简易的视频进度条，利用html,css,js来实现交互式播放速度控制，来设置自己想要的播放速度。话不多说，开干！在开始给大家分享今天的内容之前，先给大家普及一些HTML中一些元素的特点和概念（大佬可直接略过哈）

块级元素

块级元素以块的形式显示在页面上，它们会独占一行或多行空间，并且默认情况下会在前后创建换行。块级元素可以设置宽度、高度、内外边距等样式属性。

特点

在页面上单独占据一行或多行的空间。
注意：块级元素的宽度默认是自动撑开到容器的宽度，而不是默认为100%
可以容纳内联元素和其他块元素。
默认情况下会在前后创建换行。
可以设置宽度、高度、内外边距等样式属性。

示例块级元素

<div>，<p>，<hr>，<h1>-<h6>，<header>，<footer>，<ul>，<li>，<dl>-<dt>-<dd>，<table>，<form>等。

行内块级元素

行内块级元素在同一行内显示，但是它们可以设置宽度和高度，并且可以像块级元素一样设置内外边距。它们不会强制换行，可以在一行内显示多个行内块级元素。

特点

在同一行内显示。
可以设置宽度和高度。
可以设置内外边距。
不会强制换行。

示例行内块级元素

<img>，<button>， <select>，<input>等。

行内元素

行内元素不会独占一行，它们会在同一行内显示，并且大小由内容决定，无法设置宽度和高度，其宽度随着内容增加，高度随字体大小而改变。通常情况下，行内元素不能设置上下内外边距，只能设置左右内外边距。

特点

多个行内在同一行内显示，里面一般仅放文本，但 a 标签除外。相邻的行内元素会排列在同一行里，直到一行排不下，才会换行。
行内元素的宽度由其中包含的内容决定，内容越多，宽度越大，可以随内容自动扩展，不需要设置宽度属性。行内元素只能容纳文本或者其他行内元素。
由于行内元素是在同一行内显示的，所以通常只能设置左右内外边距，上下内外边距在默认情况下是不起作用的。

示例行内元素

<a>，<strong>，<em>，<span>。

了解了这些元素之后，咱们就可以根据这些元素的属性和特点来选择相应的元素来设计我们的视频进度条啦。

一、html部分：

在head标签中添加<link rel="stylesheet" href="./style.css">用于引入css文件。
在body标签中，<video src="./mv.mp4" width="765" height="430" controls class="video"></video> 其中- <video>：这是用来定义视频播放器的标签。src="./mv.mp4"：指定视频文件的路径。- controls：这是一个布尔属性，表示在视频播放器中显示控件，包括播放/暂停按钮、音量控制、全屏按钮等。 class="video"：给视频播放器添加一个类名，可以用来在CSS中对视频进行样式设置或者在JavaScript中进行操作。
在div标签中设置视频进度条白色容器speed类、视频进度条彩色渐变容器speed-bar类。
<script src="./index.js"></script>，这个用于引入之后的js文件。

复制代码

<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 class="wrapper">
        <video src="./mv.mp4" width="765" height="430" controls class="video"></video>
        <div class="speed">
            <div class="speed-bar">1x </div>
        </div>
    </div>
    <script src = "./index.js"></script>
</body>
</html>

二、css部分：

* { margin: 0; padding: 0; }：通配符选择器，将所有HTML元素的内外边距都设为0，这样可以消除不同浏览器之间的默认样式差异。
position: fixed;：使用固定定位，让容器固定在浏览器窗口的位置。
left: 50%; top: 50%;：将容器元素的左上角定位在浏览器窗口的中心位置。
transform: translate(-50%, -50%);：通过transform属性的translate方法，将容器元素水平和垂直方向上分别向左和向上移动自身宽度和高度的一半，以使其完全居中。 - border-radius: 50px;：设置容器的边框半径为50像素，使其呈现圆形。
background: linear-gradient(to bottom, #3b3b43, #cd1292);：使用线性渐变背景，从上到下渐变的颜色是从深灰色到品红色。
display: flex; justify-content: center; align-items: center;：设置速度条的内部元素为Flex布局，使其内容水平和垂直居中。
cursor: pointer;：当鼠标移动到速度条上时，将光标样式设为手型，表示可以点击或者拖拽。

css 复制代码

*{
    margin: 0;
    padding: 0;
}
body{
    background-color: #aaa;
}


.wrapper{
    position: fixed;/*固定定位 */
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    display: flex;
}
.speed{
    width: 50px;
    height: 430px;
    background-color: aliceblue;
    /* display:inline block; */
    border-radius: 50px;
    overflow: hidden;
}
.speed-bar{
    width: 100%;
    height: 16%;
    background: linear-gradient(to bottom, #3b3b43, #cd1292);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

三、js部分：

var speed = document.querySelector('.speed')：通过CSS类名选择器.speed获取页面中具有该类名的元素，存储在变量speed中。
speed.addEventListener('mousemove', function(e) { ... })：给speed元素添加了一个鼠标移动事件监听器，当鼠标在该元素内移动时，会触发该事件处理函数。
console.log(e.pageY)：打印鼠标当前在页面中的纵坐标，即鼠标相对于整个页面顶部的位置。
var y = e.pageY - speed.getBoundingClientRect().top：计算鼠标在speed元素内的纵坐标，即鼠标相对于speed元素顶部的位置。
var percent = y / speed.offsetHeight：计算鼠标在speed元素内的位置占speed元素高度的百分比。
var height = Math.round(percent * 100) + '%'：根据百分比计算出speedBar元素的高度，并转换为字符串形式，以便用于设置元素的样式。
speedBar.style.height = height：通过修改speedBar元素的样式，实现动态改变speedBar的高度。
var min = 0.4; var max = 4; var playSpeed = min + (max - min) * percent：根据鼠标在speed元素内的位置百分比计算视频的播放速度。
speedBar.textContent = playSpeed.toFixed(2) + "x"：将播放速度显示在speedBar元素内部，保留两位小数，并添加"x"作为单位。
video.playbackRate = playSpeed：通过修改视频元素的playbackRate属性，实现改变视频的播放速度。

ini 复制代码

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


speed.addEventListener('mousemove',function(e){
    console.log(e.pageY);
    var y=e.pageY-speed.getBoundingClientRect().top;//
    var percent=y/speed.offsetHeight;//获取鼠标距离容器高度的百分比
    var height=Math.round(percent*100)+'%';//根据百分比计算出高度
    //用js修改speed-bar容器的高度
    speedBar.style.height=height;
    var min=0.4;
    var max=4;
    var playSpeed=min+(max-min)*percent;
    speedBar.textContent=playSpeed.toFixed(2)+"x";
    video.playbackRate=playSpeed;
})

效果展示：最后让我们来看看效果吧，当我们操控鼠标向下滑动进度条时，视频的播放速度也随之发生变化。怎么样，是不是感觉又可以提升自己的追剧体验啦！快去试试吧小伙伴们。

想要追剧倍速无烦恼？那就来看看这个 教你学会用html、css、js操控视频进度条！

前言