你追剧的时候是不是喜欢倍速播放，那你知道怎么用Web实现视频的倍速播放吗，下面就由我来带大家看看吧
一、html部分
- 在
head标签里添加<link rel="stylesheet" href="./style.css">，css样式在后面有介绍。 - 使用
<video>标签定义视频，在src中添加自己本地的视频。 - 在
div标签里添加速度控制条白色容器speed类、速度控制条彩色渐变容器speed-bar类。 <script src="./index.js"></script>，最后要引入JavaScript 文件，Js部分可以具体实现视频倍速的播放。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>视频倍速播放</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="wrapper">
<video src="./mv.mp4" width="765" height="430" controls class="video"></video>
<div class="speed">
<div class="speed-bar">1x</div>
</div>
</div>
<script src="./index.js"></script>
</body>
二、css部分
- 在CSS中，
transform: translate(-50%, -50%);是一种用于移动元素的属性。translate接受两个参数，第一个参数表示x轴（水平）移动的距离，第二个参数表示y轴（垂直）移动的距离。 translate(-50%, -50%)中，元素将在水平和垂直方向上各自移动其自身宽度或高度的50%的距离。- 通过
top: 50%; left: 50%;将元素的左上角移到其容器的中心，再通过translate(-50%, -50%)向左和向上移动元素的一半宽度和一半高度，以此达到完全居中的效果。 background: linear-gradient(to bottom,#e1585a,#b3db13);可以实现颜色的渐变。
*{
margin: 0;
padding: 0;
}
body{
background-color: #9eea9f;
}
.wrapper{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
display: flex;
}
.speed{
width: 50px;
height: 430;
background-color: #fff;
border-radius: 50px;
overflow: hidden;
margin-left: 100px;
}
.speed-bar{
width: 100%;
height: 16%;
background: linear-gradient(to bottom,#e1585a,#b3db13);
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;/* 鼠标放上去的状态是小手 */
}
三、js部分
- 使用
var定义变量，使用document.querySelector()方法分别获取速度控制条白色容器speed、速度控制条彩色渐变容器speed-bar、视频播放器video。 - 使用
speed.addEventListener('mousemove',function(e){})在速度控制条白色容器speed上监听鼠标的移动事件。 var y = e.pageY-speed.getBoundingClientRect().top;获取鼠标到速度控制条白色容器speed顶部的距离。var percent = y / speed.offsetHeight;计算出百分比。var height = Math.round(percent*100)+'%';获取percent的整数百分比。speedBar.style.height = height;修改速度控制条彩色渐变容器speed-bar的高度，定义最大最小倍速max和min，用var palySpeed = percent *(max - min) + min;计算出倍速值。- 使用
speedBar.textContent = palySpeed.toFixed(2) + 'x';显示当前的播放速度。 video.playbackRate = palySpeed;实现视频与进度条之间的交互。
var speed = document.querySelector('.speed');//定义变量
var speedBar = document.querySelector('.speed-bar');
var video = document.querySelector('.video');
speed.addEventListener('mousemove',function(e){
var y = e.pageY-speed.getBoundingClientRect().top;
var percent = y / speed.offsetHeight;
var height = Math.round(percent*100)+'%';
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;
});//监听
