BUG收容所所长 用 JS 玩转视频播放速度：打造你的专属“倍速播放器”
前端小白也能轻松上手的交互小项目，带你用 JS、HTML、CSS 实现酷炫视频倍速调节！
一、前言：
在这个“时间就是金钱，效率就是生命”的时代，谁还不是个倍速党？今天就带大家用最简单的代码，撸一个可以随心所欲调节视频播放速度的小工具。别眨眼，干货马上来！
二、基础知识小科普
1. 元素类型三兄弟
- 块级元素：天生霸道，独占一行，宽高随便你设。
- 行内元素：低调内敛，无法设置宽高，可以设置 margin 和 padding，但死活不换行。
- 行内块元素：集两家之所长，既能设置宽高，也能和别人肩并肩。
这三兄弟的性格，直接影响了你布局的“人生走向”。
三、项目结构一览
├── index.html // 页面结构
├── style.css // 页面样式
└── index.js // 交互逻辑
四、HTML：结构简单明了
<div class="wrapper">
<video class="flex" src="https://media.w3.org/2010/05/sintel/trailer.mp4" controls></video>
<div class="speed">
<div class="speed-bar">1x</div>
</div>
</div>
- 一个视频播放器 + 一个白色的速度控制条，极简风，程序员的浪漫！
五、CSS：颜值即正义
.flex {
width: 765px;
height: 430px;
}
.speed {
background: white;
border-radius: 50px;
overflow: hidden;
}
.speed-bar {
width: 100%;
height: 15%;
background: linear-gradient(to bottom, #654ea3, #eaafc8);
display: flex;
justify-content: center;
align-items: center;
color: white;
}
- 渐变色、圆角、居中，颜值拉满，妈妈再也不用担心我的审美了！
六、JS：灵魂所在
var speed = document.querySelector('.speed');
var speedBar = document.querySelector('.speed-bar');
var video = document.querySelector('.flex');
speed.addEventListener('mousemove', function (e) {
var y = e.pageY - speed.offsetTop;
var percent = y / speed.offsetHeight;
var height = Math.round(percent * 100) + '%';
speedBar.style.height = height;
var min = 0.5;
var max = 5;
var scale = (percent * (max - min)) + min;
speedBar.textContent = scale.toFixed(2) + 'x';
video.playbackRate = scale;
})
- 鼠标在白色区域上下滑动，彩色条高度和文本实时变化，视频播放速度同步调整。
- 0.5x 到 5x，想多快有多快，妈妈再也不用担心我追剧太慢了！
七、技术亮点&趣味总结
-
事件监听：用
mousemove实现丝滑交互，体验“指哪打哪”的快感。 - DOM 操作：动态修改样式和文本，前端的魔法师就是你！
-
视频 API：
playbackRate随心调，倍速党福音。 - 布局美学：CSS 渐变、圆角、弹性盒子，细节拉满。
生活不止眼前的代码，还有倍速的远方。赶紧试试，做自己的“时间管理大师”吧！
掘友们，如果觉得有用，点个赞再走呗！评论区聊聊你还想实现哪些酷炫的前端交互~
![[爱了]](/js/img/d1.gif)
![[尴尬]](/js/img/d16.gif)