前言

我们在电脑桌面上播放一段mv时，是否考虑过将这段视频放在网页上，设置自己想要调节的倍速。

今天我们将介绍前端知识中的使用HTML、CSS和JavaScript实现交互式播放速度控制

正文

1.我们在vs中创建文件夹，将视频放到文件中后，可以先设置视口的大小和初始缩放比例

js 复制代码

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">

width=device-width 让页面的宽度与设备的宽度相匹配

initial-scale=1.0 则设置初始的缩放比例为 1.0，即不缩放。

注意 link rel="stylesheet" href="./style.css"这行代码是 HTML 中的一个链接元素，用于将外部样式表文件 style.css 引入到当前 HTML 文档中。- <link>: 这是 HTML 中的链接元素，用于定义文档与外部资源之间的关系。在这个情况下，它定义了文档与外部样式表的关系。

rel="stylesheet": 这个属性指定了链接的关系类型，表示当前文档与外部资源是样式表的关系。这告诉浏览器加载并应用所链接的样式表文件。
href="./style.css": 这个属性指定了所链接资源的路径，即外部样式表文件的位置。在这个例子中，style.css 文件位于当前 HTML 文档所在目录下。

在编写前端任务时，我们可以将CSS和js文件已外部样式引入html文件中，这样做有几点好处，如：

可维护性： 分离文件可以使代码更易于维护。当你需要修改其中一个文件时，你只需要打开对应的文件进行编辑，而不必同时处理其他两种类型的代码。这样可以提高代码的可读性和可维护性，减少出错的可能性。

代码组织： 将 HTML、CSS 和 JavaScript 分开编辑可以更好地组织代码。每个文件都专注于特定的功能，使代码结构更清晰、更模块化，易于管理和扩展。

团队协作： 在团队开发中，将不同类型的代码分开可以使团队成员更容易协作。不同的开发者可以专注于不同的文件，而不会相互干扰，从而提高开发效率。

缓存和性能： 浏览器在加载网页时会对不同类型的文件进行并行加载，这样可以加快网页加载速度。将 CSS 和 JavaScript 文件分开编辑可以使浏览器更有效地缓存这些文件，提高页面加载速度和性能。

语义化和结构化： 分离文件可以帮助你更好地遵循语义化的原则，使 HTML 文件只包含文档结构，CSS 文件只包含样式规则，JavaScript 文件只包含交互逻辑。这样可以提高代码的可读性和可维护性，使代码更易于理解和维护。

\]2. 我们需要设置一个视频播放器和一个用于控制播放速度的条
复制代码
```
  <div class="speed">
      <div class="speed-bar">1x</div>
  </div>
```

复制代码

* `<div class="wrapper">`: 这是一个容器，用来包裹视频播放器和速度控制条，以便它们能够在页面中居中显示。
* `<video src="./mv.mp4" width="765" height="430" controls class="video"></video>`: 这是一个视频播放器元素。其中 `src` 属性指定了视频文件的路径，`width` 和 `height` 属性定义了播放器的宽度和高度，`controls` 属性添加了控制按钮，`class="video"` 是一个类名，用于后续的 JavaScript 操作。
* `<div class="speed">`: 这是一个用于控制播放速度的容器。
* `<div class="speed-bar">1x</div>`: 这是播放速度控制条的显示部分，其中 "1x" 表示当前的播放速度为正常速度。

这个结构简单清晰，使用户能够方便地观看视频并调整播放速度。

* [ ] 3. 这时我们点开我们的css文件并进行编辑

```js
.speed {
    height: 430px; /* 设置速度控制条的高度为 430 像素 */
    background-color: #000000b6; /* 设置速度控制条的背景颜色为半透明黑色 */
    border-radius: 50px; /* 设置速度控制条的圆角半径为 50 像素 */
    overflow: hidden; /* 设置超出速度控制条范围的内容隐藏 */
}

.speed-bar {
    width: 100%; /* 设置速度控制条的宽度为 100% */
    height: 16%; /* 设置速度控制条指示器的高度为控制条高度的 16% */
    background-color: linear-gradient(to bottom, #2376ae, #c16ecf); /* 设置速度控制条指示器的背景颜色为从上到下的渐变色 */
    display: flex; /* 将速度控制条指示器设置为弹性布局 */
    justify-content: center; /* 水平居中对齐速度控制条指示器 */
    align-items: center; /* 垂直居中对齐速度控制条指示器 */
    cursor: pointer; /* 鼠标移动到速度控制条指示器上时显示光标为手型 */
}

通过这些样式规则，可以实现以下效果：

height 属性设置了速度控制条的高度为 430 像素，并且指示器的高度为控制条高度的 16%。
background-color 属性设置了速度控制条的背景颜色为半透明黑色，速度控制条指示器的背景颜色为渐变色。
border-radius 属性设置了速度控制条的圆角边框，使其更加圆润。
overflow 属性设置了当速度控制条指示器超出控制条范围时进行隐藏。
display: flex 属性使得速度控制条指示器可以使用弹性布局，从而水平和垂直居中对齐。
cursor: pointer 属性在鼠标悬停在速度控制条指示器上时显示手型光标，表示可以进行交互操作。

总的来说，用于设置速度控制条的外观和行为

3.在完成css文件的编辑后，我们迎来了重头戏：js文件的编辑。我们该如何让播放速度条检测到我们的鼠标，如何感受并确定鼠标在y轴的变化从而改变播放速度以及其颜色变化呢？

js 复制代码

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

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

这段 JavaScript 代码使用了 DOM 查询和事件监听，以便实现对播放速度控制条的交互操作。

var speed = document.querySelector('.speed'): 这行代码使用 document.querySelector() 方法查询文档中第一个类名为 speed 的元素，并将其赋值给变量 speed。这个元素是速度控制条的容器。

var speedBar = document.querySelector('.speed-bar'): 这行代码使用相同的方法查询文档中第一个类名为 speed-bar 的元素，并将其赋值给变量 speedBar。这个元素是速度控制条中的指示器。
var video = document.querySelector('.video'): 这行代码查询文档中第一个类名为 video 的元素，并将其赋值给变量 video。这个元素是视频播放器。
speed.addEventListener('mousemove', function(e) { ... }: 这行代码添加了一个鼠标移动事件监听器到速度控制条上。当鼠标在速度控制条上移动时，会触发这个事件，并执行指定的回调函数。
4.接下来我们需要写件监听器回调函数的继续部分，让我解释一下它的功能：

js 复制代码

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

var y = e.pageY - speed.getBoundingClientRect().top: 这行代码计算了鼠标在速度控制条内部的垂直偏移量。e.pageY 表示了鼠标相对于文档顶部的垂直位置，而 speed.getBoundingClientRect().top 表示了速度控制条相对于视口顶部的垂直位置，二者相减就得到了鼠标在速度控制条内部的相对位置。
var percent = y / speed.offsetHeight: 这行代码计算了鼠标在速度控制条内部的相对位置占速度控制条高度的百分比。y 是鼠标的垂直偏移量，speed.offsetHeight 是速度控制条的高度。
var height = Math.round(percent * 100) + '%': 这行代码将计算出的百分比转换为速度控制条指示器的高度，并将其设置为字符串形式的百分比值。Math.round() 方法用于四舍五入取整。
speedBar.style.height = height: 这行代码将计算得到的高度应用到速度控制条指示器上，从而实现了动态改变速度控制条指示器的高度。
var min = 0.4 和 var max = 4: 这两行代码定义了播放速度的最小值和最大值，分别为 0.4 和 4。
var palySpeed = percent * (max - min) + min: 这行代码根据鼠标在速度控制条上的位置百分比，计算出对应的播放速度值。速度的变化范围在最小值和最大值之间。
speedBar.textContent = palySpeed.toFixed(2) + 'x': 这行代码将计算出的播放速度值应用到速度控制条指示器的文本内容上，并添加 'x' 单位。
video.playbackRate = palySpeed: 这行代码将计算出的播放速度值应用到视频播放器的 playbackRate 属性上，从而实现了动态改变视频的播放速度。根据鼠标的位置来调整播放速度条的高度，并相应地改变视频的播放速度。

最后我们来看看效果吧，当我们拖动右边的播放速度条时，视频的播放速度会随之变化并且速度条的颜色会进而发生改变

总结

通过这个项目，我们展示了如何使用 HTML、CSS 和 JavaScript 来创建一个交互式的视频播放器，以及一个用于控制播放速度的功能。通过这个简单而有效的工具，我们不仅提供了用户友好的视频观看体验，还为用户提供了更大的自由度和个性化选择。希望这个项目能够激发更多创意和想法，并为未来的 Web 开发工作带来新的可能性。让我们一起期待未来的发展，不断探索和创新！

"提升视频体验：使用HTML、CSS和JavaScript实现交互式播放速度控制"——小白请看

前言

正文

总结