前言
相信大家都有过看视频想要按照自己所想的去调倍速的冲动,那么今天它就来了。我会带大家去实现这个功能,话不多说,先给大家展示一下效果。
一、页面展示
相信看到效果的小伙伴已经感兴趣了,那么接下来给大家讲解一下如何去实现
二、网页实现
1.找到自己想播放的视屏地址,把它放进容器中
代码如下(html):
<div id="wrapper">
<video width="765" height="430" src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" controls class="flex"></video>
<div class="speed">
<div class="speed-bar">1x</div>
</div>
</div>
2.把视屏放在一个合适的位置
这就需要大家用css去定义了 代码如下(css):
*{
margin: 0;
padding: 0;
}
body{
min-height: 100vh;/*相对于浏览器的高度 */
background: #4c4c4c url('https://unsplash.it/1500/900?image=1021');/*如果图片没有加载出来就会优先显示颜色 */
background-size: cover;
display: flex;/*把父容器设置为弹性*/
justify-content: center;/*在X轴上居中*/
align-items: center;/*在Y轴上居中 */
}
#wrapper{
width: 850px;
display: flex;
}
3.在视屏旁边创建一个倍速的拉动框
.speed{
flex: 1;/* 等比继承*/
margin: 10px;
background-color: white;
border-radius: 50px;
display: flex;
overflow: hidden;
align-items: flex-start;/*从弹性开始的地方去布局*/
}
.speed-bar{
width: 100%;
height: 16.3%;
background: linear-gradient(-170deg,#2376ae 0%, #c16ecf 100%);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
cursor: pointer;/*把鼠标变成手的样子*/
}
好了,这样整体的布局已经全部做好了,接下来就是要去实现鼠标移动,视屏的倍速也跟着移动。那么大家可以先思考一下如何去实现。
4.用js去实现鼠标监听事件
代码如下(js):
var speed = document.querySelector('.speed')//querySelector获取类名的方法
var bar = document.querySelector('.speed-bar')
var video = document.querySelector('.flex')
// 监听什么什么事件(鼠标滑动) 里面的function是监听函数
speed.addEventListener('mousemove',function(e){
console.log(e);
var y = e.pageY - speed.offsetTop // offsetTop是获取某个dom结构到浏览器顶部的距离
var percent = y / speed.offsetHeight // offsetHeight是获取某个dom结构自身的高度
var min = 0.4
var max = 4
var height = Math.round(percent*100) + '%' // Math.round() 取整
var palybackRate = percent * (max - min) + min
bar.style.height = height;
bar.textContent = palybackRate.toFixed(2) + 'X' // toFixed(2)保留2位小数
video.playbackRate = palybackRate // video.playbackRate控制video播放速度
})
总结
以上就是今天要跟大家分享的内容,本文制作比较简单,代码还是不太成熟。希望大家都能看懂。也希望大佬们多多指点。我已经附上了全部代码,很高兴大家能快速的刷着视频。