我身边总有一些朋友看视频或电影时喜欢1.5倍速或者2倍速的看，因为这样可以节约很多时间。大部分的视频播放软件最高只支持2倍速播放，那我想要更高倍速观看呢？有需求就去实现需求，提升用户体验是我们前端工程师的宗旨。像b站，腾讯视频等视频播放软件都可以人为地去控制视频播放速率；这篇文章就带大家用
Js
去实现一个简单的控制视频播放速率的功能。
实现的效果如下所示：
在
Vscode
中新建一个
Html
文件：
<div class="wrapper">
<video controls class='video' src=" http://vfx.mtime.cn/Video/2021/07/10/mp4/210710171112971120.mp4"></video>
<div class="speed">
<div class="speed-bar">1x
</div>
</div>
</div>
在同目录下新建一个Css文件，并且通过link标签引入到Html文件中：
<link rel="stylesheet" href="./style.css">
在同目录下新建一个Js文件，并且通过script标签引入到Html文件中：
<script src="./index.js"></script>
此时页面上没有样式，是不美观的，我们在第二步创建的Css文件下写样式：
margin: 0;
padding: 0;
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-image: url(https://unsplash.it/1500/900?image=1021);
background-repeat: no-repeat;
background-size: 100% auto;
video {
width: 500px;
height: 210px;
box-shadow: 0 0 10px #fff;
.wrapper {
width: 550px;
display: flex;
.speed {
flex: 1;
background: #efefef;
margin: 10px;
border-radius: 50px;
overflow: hidden;
.speed-bar {
width: 100%;
height: 16.3%;
background: linear-gradient(-170deg, #2376ae 0%, #c16ecf 100%);
display: flex;
justify-content: center;
align-items: center;
color: #FFF;
font-size: 12px;
此时页面如下图所示：
最后只需要完成Js部分就可以了。
Js操作Dom/Css
我们需要分别拿到显示速率播放容器，视频的Dom结构，然后在显示速率播放容器上监听鼠标的移动事件，在回调中执行函数，事件e中有一个属性pageY可以拿到鼠标此时的y坐标，利用巧妙的数学方法我们可以计算出相应速率播放对应的长度，通过操作Css设置相应的属性值就完成了。
这里我们需要用到平时不常用到的Video中的playbackRate属性：playbackRate 属性可以设置或返回视频的当前播放速度。
const speed = document.querySelector('.speed')
const bar = document.querySelector('.speed-bar')
const video = document.querySelector('.video')
speed.addEventListener('mousemove', handleMove)
function handleMove(e) {
const y = e.pageY - speed.offsetTop
const percent = y / speed.offsetHeight
const height = Math.round(percent * 100) + '%'
const playbackRate = percent * (4 - 0.4) + 0.4
console.log(playbackRate);
bar.style.height = height
bar.textContent = playbackRate.toFixed(2) + 'x'
video.playbackRate = playbackRate
总的来说，实现一个简单的人为改变速率的功能主要是前端三件套的基础应用，看完后希望对你以后的学习有帮助。本篇文章到这基本就ok了，小伙伴们赶紧去试一试吧😁！
- 285
-
iaine_is_also_yan
TypeScript
- 222
-
jimojianghu
JavaScript
- 106
-
我是小阵不悲催
Visual Studio Code
- 6850
-
