前言：

HTML是前端的一部分，这里长安先稍微诉说一下几个小概念吧。【大佬们可以直接翻篇，进入下一页。】

1. 块级元素是HTML 中的一种元素类型，它们以块的形式显示在页面上，通常会在页面上显示为一块独立的内容，它们会独占一行或者多行空间。常见的块级元素包括 <div>、<p>、<h1> 到 <h6>、<ul>、<ol>、<li> 等等块级元素的特点包括：

1. 独占一行或多行空间
2. 可以设置宽度和高度
3. 可以容纳内联元素和其他块级元素
4. 常用于页面结构：

2. 在 HTML 中，”行内”和”块级”是元素的两种显示方式。行内元素（inline elements）在文本行内显示，不会导致换行，而块级元素（block elements）则会在页面上显示为一个独立的块，通常会从新的一行开始。

然而，有时候我们希望某个元素表现为行内元素的特性（不换行，与其他行内元素在同一行显示），但同时又具备块级元素的性质（可以设置宽度、高度、margin、padding等），这就是所谓的”行内块级元素“（inline-block elements）。

行内块级元素的特点包括：

1. 不会导致换行
2. 可以设置宽度和高度
3. 可以包含内联元素

常见的行内块级元素包括 <span> 和一些 HTML5 新增的元素（比如 <nav>、<article> 等），以及通过 CSS 设置 display: inline-block; 的元素。

3. 行内元素是 HTML 中的一种元素类型，它们会在文本行内显示，不会导致换行，可以与其他行内元素共享同一行。常见的行内元素包括 <span>、<a>、<strong>、<em>、<img>、<input> 等等。

行内元素的特点包括：

1. 在同一行内显示行内元素会在文本行内水平排列，不会独占一行，除非遇到换行标签或者父元素的宽度不足以容纳。
2. 默认宽度与高度由内容决定
3. 不能设置上下边距和宽高
4. 可以包含其他行内元素

千说万说，不如小伙伴们自己动动手实操一下，亲自感受下页面的布局吧！

Step1

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

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

小伙伴们自行上传自己库存的视频吧，建议使用google加载效果，方便且迅捷！

Step2.

基于CSS条件下布局进度条框架，【插诉一下：CSS真的很重要，长安希望能和小伙伴们一起领略CSS的大门之中】构建可控制播放速度的进度条

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

1. transform: translate(-50%, -50%);：通过 transform 属性的 translate 函数，将元素在水平和垂直方向上分别向左和向上平移自身宽度和高度的一半，这样可以使元素的中心点与浏览器窗口的中心点对齐，实现元素在浏览器窗口的居中显示。
2. display: flex;：将该元素设置为一个弹性布局容器，其子元素将按照弹性布局规则进行排列，可以通过设置子元素的 flex 属性来控制它们的布局行为。

综合起来，这段代码的作用是将 .wrapper 元素固定定位在浏览器窗口的中心，且使用 Flexbox 布局方式。

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

1. border-radius: 50px;：设置元素的边框半径为 50 像素，使其呈现出圆形。
2. overflow: hidden;：设置元素的溢出内容隐藏，即超出元素框的内容不可见。

这段代码的作用是创建一个高度为 430 像素、宽度为 50 像素的元素，并将其背景色设为白色，同时使其呈现为一个圆形。通过设置 overflow: hidden;，任何溢出该元素的内容都会被隐藏起来。

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

1. background: linear-gradient(to bottom, #2376ae, #c16ecf);：使用线性渐变作为背景，从上至下渐变，颜色从 #2376ae（深蓝） 到 #c16ecf（淡紫）。
2. display: flex;：将该元素设置为一个弹性布局容器，其子元素将按照弹性布局规则进行排列。
3. justify-content: center;：水平居中对齐其子元素。
4. align-items: center;：垂直居中对齐其子元素。
5. cursor: pointer;：鼠标悬停在该元素上时，鼠标指针将显示为一个手形指针，表示该元素是可点击的。

综合起来，这段代码的作用是创建一个高度为其父元素高度的16%，宽度为其父元素宽度的100%的元素，具有渐变背景，并水平垂直居中其子元素，同时在鼠标悬停时显示为可点击的手形指针。

此处实现了进度条的外形和位置，以及确认了鼠标的位置坐标。

Step3

用JS语法解析进度条容器的拖曳速度和具体高度的控制，【此处高度的位置不好缀诉，长安就在此用代码实现效果的展示吧】

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

speed.addEventListener('mousemove', function (e) {
    // console.log(speed.getBoundingClientRect());

    var y = e.pageY - speed.getBoundingClientRect().top
    var percent = y / speed.offsetHeight
    var height = Math.round(percent * 100) + '%'
    // console.log(height);
    // 用js修改speed-bar容器的高度
    speedBar.style.height = height
    var min = 0.4
    var max = 4
    var palySpeed = percent * (max - min) + min
    speedBar.textContent = palySpeed.toFixed(2) + 'x'

    video.playbackRate = palySpeed
})

此处代码可能有些复杂，长安在这里一一为大家解释一下

1. 使用 document.querySelector('.speed') 获取具有类名为 .speed 的元素，保存在 speed 变量中。
2. 使用 document.querySelector('.speed-bar') 获取具有类名为 .speed-bar 的元素，保存在 speedBar 变量中。
3. 使用 document.querySelector('.video') 获取具有类名为 .video 的视频元素，保存在 video 变量中。
4. 给 speed 元素添加了一个 mousemove 事件监听器，当鼠标在该元素上移动时触发回调函数。
5. 在回调函数中，通过 event.pageY 和 speed.getBoundingClientRect().top 计算鼠标相对于 .speed 元素顶部的垂直距离，并根据该距离计算出百分比。
6. 根据百分比计算 .speed-bar 元素的高度，并将其应用到该元素的样式中。
7. 计算视频的播放速度，根据垂直位置百分比映射到指定的速度范围，并将其应用到视频元素的 playbackRate 属性中。
8. 最后，将播放速度显示在 .speed-bar 元素中，保留两位小数。

总而言之：这段 JavaScript 代码实现了一个功能：当鼠标在具有类名为 .speed 的元素上移动时，根据鼠标在该元素内的垂直位置，改变一个具有类名为 .speed-bar 的元素的高度，并根据高度计算视频的播放速度。

OK！现在请你跟随长安的步伐一起实现操控视频播放的魔法吧！效果图不好展示，就请原谅一下长安不能展示吧！

原文链接：https://juejin.cn/post/7359084604664119348 作者：长安故里_