前言

不少小伙伴在追剧的时候总是反映2倍速，3倍速都不够快，那么有没有一种方式，让我们能够自己主动调节视频的播放速度，达到理想的N倍速呢？答案是肯定有的，接下来就让我们一起运用一些基础知识，来个N倍速畅游吧！

基础知识

了解相关html，css，js的一些基础，能够引入一个视频（html），放入播放条（css），通过鼠标的移动去控制倍速播放（js）。

html部分

这段代码就像是一位迷失在电脑世界中的摄影师，手持一台超大型相机，左顾右盼地寻找着最佳的拍摄角度。而那个控制播放速度的条，就像是一只“时间加速器”，让视频在你的掌控之下随心所欲地穿梭于快与慢之间，仿佛掌握了时间的魔法，是不是很有趣呢？

<!DOCTYPE html> <!-- 指定文档类型为HTML5 -->
<html lang="en"> <!-- 指定页面语言为英语 -->

<head>
  <meta charset="UTF-8"> <!-- 指定字符编码为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> <!-- 定义一个视频元素，指定视频文件路径、宽度、高度以及添加控制条，设置class为video以便样式定义 -->
    
    <!-- 控制视频播放速度的部分 -->
    <div class="speed"> <!-- 用于包裹播放速度条的容器 -->
      <div class="speed-bar">1x</div> <!-- 显示当前播放速度的文本，默认值为1x -->
    </div>

    <!-- 引入外部JavaScript文件 -->
    <script src="./index.js"></script> <!-- 引入JavaScript文件，用于处理视频播放速度的逻辑 -->

  </div>
</body>

</html>

我们创建了一个简单的网页，包含一个视频播放器和一个控制条。视频播放器具有控制功能，用户可以播放、暂停、调整音量和进度。控制条显示当前播放速度，并提供了一个滑动条用于调整播放速度。整体布局由CSS文件定义，JavaScript文件则负责处理视频播放器的交互逻辑，包括控制条的行为以及与播放器的交互。

css部分

这段CSS代码就像是给一位拿着迷你巧克力棒的小精灵做的服装，它在页面上舞动着，吸引着眼球。控制条就像是那支小巧的巧克力棒，隐藏着不同的“魔力速度”，而整个布局就像是一场悦动的视觉盛宴，引人驻足观看，想要一探究竟。

要理解这段CSS代码，你需要掌握以下基础知识：

CSS基础：了解CSS的基本语法和属性，如选择器、属性值等。
盒模型：了解元素的内容、内边距、边框和外边距，以及如何使用这些属性来控制元素的布局和外观。
定位和布局：理解CSS中的定位概念，如相对定位、绝对定位和固定定位，以及Flex布局和transform属性如何影响元素的位置和排列。
背景和渐变：了解如何使用CSS设置元素的背景色和背景图片，以及如何创建渐变背景色。
其他属性：理解overflow属性的作用，以及cursor属性如何改变鼠标指针的样式。

通过掌握以上基础知识，你就能够读懂并理解这段CSS代码，从而明白它是如何定义页面布局和样式的。

/* 重置所有元素的内外边距 */
* {
  margin: 0;
  padding: 0;
}

/* 定义包裹容器，用于居中视频和控制条 */
.wrapper {
  position: fixed; /* 将包裹容器固定在视窗中 */
  left: 50%; /* 使容器左边缘位于视窗中央 */
  top: 50%; /* 使容器上边缘位于视窗中央 */
  transform: translate(-50%, -50%); /* 使用transform属性将容器水平和垂直居中 */
  display: flex; /* 使用Flex布局 */
}

/* 定义控制条容器样式 */
.speed {
  width: 50px; /* 控制条容器宽度 */
  height: 430px; /* 控制条容器高度 */
  background-color: #fff; /* 控制条容器背景颜色 */
  display: inline-block; /* 将控制条显示为内联块元素 */
  border-radius: 50px; /* 设置控制条容器的圆角 */
  overflow: hidden; /* 设置溢出内容隐藏 */
}

/* 设置页面背景颜色 */
body {
  background-color: #aaa; /* 页面背景颜色 */
}

/* 定义控制条样式 */
.speed-bar {
  width: 100%; /* 控制条宽度占满父容器 */
  height: 20%; /* 控制条高度占父容器高度的20% */
  background: linear-gradient(to bottom, #2376ae, red); /* 使用渐变背景色 */
  display: flex; /* 使用Flex布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  cursor: pointer; /* 设置鼠标指针为手型 */
}

我们实现了一个简单的垂直控制条样式，用于控制视频播放速度。其中，控制条容器被固定在页面中央，具有圆形边框和白色背景，内部包含一个渐变色的条形元素，表示不同的播放速度选项。用户可以点击控制条上的不同部分来选择所需的播放速度，从而改变视频播放的速度。

js部分

在这段代码里，视频的播放速度由鼠标在速度条上的位置决定，是不是觉得像是给鼠标加了个油门？只要把鼠标往上推，视频就像是开到了满速，往下拉，就像是进入了缓冲模式。也许这是唯一一个可以通过鼠标“加速”的方式了，比电脑游戏里的任何东西都简单！

要理解这段代码，你需要对以下几个方面有基本的了解：

HTML结构： 代码中使用了类名为 .speed、.speed-bar 和 .video 的元素，这些元素在HTML文档中应该有对应的结构。
JavaScript事件处理： 通过 addEventListener 方法给 .speed 元素添加了一个 mousemove 事件监听器，当鼠标在该元素上移动时会触发相应的函数。
DOM操作： 使用 document.querySelector 方法选取文档中对应类名的元素，以及使用 speed.getBoundingClientRect() 方法获取元素的位置信息。
计算百分比： 通过计算鼠标相对于 .speed 元素顶部的位置，然后将其转换为相对于 .speed 元素高度的百分比，用于控制 .speed-bar 的高度。
视频播放速度控制： 根据百分比计算出播放速度，并将其应用到视频的 playbackRate 属性上，实现了根据鼠标位置改变视频播放速度的功能。
字符串操作和数字处理： 使用 toFixed() 方法保留两位小数，并添加单位作为速度条的文本内容。
数学运算： 使用了数学运算来计算鼠标位置所对应的播放速度，以及将百分比转换为对应的高度值。

如果你对这些方面都有一定的了解，那么理解这段代码应该不会太困难。

// 选取页面中类名为 'speed' 的元素
var speed = document.querySelector('.speed')

// 选取页面中类名为 'speed-bar' 的元素
var speedBar = document.querySelector('.speed-bar')

// 选取页面中类名为 'video' 的元素
var video = document.querySelector('.video')

// 给 'speed' 元素添加鼠标移动事件监听器
speed.addEventListener('mousemove', function (e) {
  // 计算鼠标相对于 'speed' 元素顶部的距离
  var y = e.pageY - speed.getBoundingClientRect().top

  // 计算鼠标相对于 'speed' 元素高度的百分比
  var percent = y / speed.offsetHeight

  // 根据百分比计算 'speed-bar' 的高度
  var height = Math.round(percent * 100) + '%'

  // 设置 'speed-bar' 的高度
  speedBar.style.height = height

  // 设置 'speed-bar' 的文本内容为高度百分比
  speedBar.textContent = height

  // 设置播放速度的最小值和最大值
  var min = 0.4
  var max = 4

  // 根据百分比计算播放速度
  var playSpeed = percent * (max - min) + min

  // 将播放速度保留两位小数，并添加单位
  speedBar.textContent = playSpeed.toFixed(2) + 'px'

  // 设置视频播放速度
  video.playbackRate = playSpeed
})

我们实现了一个功能，即根据鼠标在速度条上的位置控制视频的播放速度。当鼠标在 .speed 元素上移动时，通过监听 mousemove 事件，计算鼠标相对于 .speed 元素顶部的位置，并将其转换为百分比。然后根据百分比计算出对应的播放速度，并将其应用到视频的 playbackRate 属性上。同时，通过调整 .speed-bar 元素的高度来显示当前播放速度的可视化效果。这段代码结合了事件处理、DOM操作、数学计算和样式调整等技术，实现了一个简单但实用的功能。

实现效果图

微信截图_20240419162532.png

写在最后

我们通过学习一些基础知识能够让自己去自由控制视频的播放速度，当然，这还只是一个小小的开始，今后让我们一起学习更多知识，了解更多网页底层的秘密吧！

追剧嫌慢？看这里，让N倍速不再是梦想

前言