效果图
代码实现(执行前记得换你的本地视频地址)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>video</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="wrapper">
<video src="./mv.mp4" class="video" controls width="765" height="430"></video>
<div class="speed">
<div class="speed-bar">1x</div>
</div>
</div>
<script src="./index.js"></script>
</body>
</html>
css部分
*{
margin: 0;
padding: 0;
}
body{
background:#aaa;
}
.wrapper{
position: fixed;
left: 50%;/* 父容器宽度的50% */
top: 50%;
transform: translate(-50%,-50%);/*自身的50% */
display: flex;/*子容器默认同一行*/
}
.speed{
width: 50px;
height: 430px;
background-color: #fff;
border-radius: 50px;/*bdrs*/
overflow: hidden;
}
.speed-bar{
width: 100%;
height: 16%;
background:linear-gradient(to bottom,#c6ffdd,#fbd786,#f7797d);
display: flex;/*设置为弹性容器*/
justify-content: center;/*在主轴方向上居中*/
align-items: center;/*在副轴方向上居中*/
cursor: pointer;/*鼠标放上去为一个小手*/
}
js部分
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)+'%';
//用js修改speed-bar容器的高度
speedBar.style.height=height;
var min=0.4;
var max=4;
var playSpeed=percent*(max-min)+min;
speedBar.textContent=playSpeed.toFixed(2)+'x';
video.playbackRate=playSpeed;
})
js部分讲解：
- 整体思路：
- 获取白底容器；
- 在白色容器上监听鼠标的移动事件；
- 获取到鼠标移动的距离；
- 根据鼠标移动的距离来设计彩色容器的高度。
- 首先通过类名使用document.querySelector() 来获取speed(白色容器)，speedBar(彩色容器)，video(视频容器)；
- 为speed绑定一个事件监听，当移动鼠标的时候，就会调用回调函数来实现视频和进度条的交互；
- 回调函数：通过speed.getBoundingClientRect().top来获取白色容器顶部到页面顶部的距离，再通过e.pageY来获取鼠标到页面顶部的距离，最后定义一个y=e.pageY-speed.getBoundingClientRect().top来获取鼠标到白色容器顶部的距离，通过speed.offsetHeight来获取白色容器的高度并定义percent来算出百分比，再定义一个height来获取percent的整数百分比，通过speedBar.style.height=height来改变彩色容器的高度，定义min和max来设定最小倍速和最高倍速，定义一个playSpeed并通过playSpeed=percent*(max-min)+min来获取倍速值，通过speedBar.textContent来改变并保留两位小数来改变倍速值的在页面的显示，最后通过video.playbackRate=playSpeed来实现进度条与视频的交互，通过鼠标移动进度条来改变播放速度。
