likes
comments
collection
share

客官？网课/视频补不完?进来看看手写B站视频控制播放速度，妈妈再也不用担心我网课补不完了

作者站长头像
站长
· 阅读数 139

手写B站控制视频播放速度，

妈妈再也不用担心我网课补不完了！

小Demo

客官你来啦！今天，我们来学习制作一个可控视频播放速率的Demo吧！

大家每次在网页上浏览视频的时候都发现，视频的播放速率是可以自己的调控的吧！

例如:

客官？网课/视频补不完?进来看看手写B站视频控制播放速度，妈妈再也不用担心我网课补不完了

我们都可以通过这里来设置我们的视频播放速度，今天我们就来制作一个小Demo，来视频这样一个控制视频播放速度的Demo！

我们先来给大家上效果！

客官？网课/视频补不完?进来看看手写B站视频控制播放速度，妈妈再也不用担心我网课补不完了

这样一个小Demo，通过控制旁边的渐变条，来控制视频的播放速率！我们要怎么实现这样一个Demo呢？我们直接开始吧！

HTML文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
    
</head>
<body>
    <!-- wrapper容器 -->
    <!-- 只有媒体标签的宽高不用带单位 -->
    <div class="wrapper">
        <video src="../../../../素材/进击的巨人.mp4" class="flex" height="430" width="765" controls></video>
        <!-- 滑块 -->
        <div class="speed">
            <div class="speed-bar">1x</div>
        </div>

    </div>
    <script src="./index.js"></script>
</body>
</html>

我们的HTML文件相当简单，我们导入CSS文件和js文件，对页面进行基本的布局就可以完成。

简单描述一下：

​ 我们定义了一个class为wrapper的div容器，里面放入我们的视频和滑块，滑块用于控制视频播放速率，这样就简单完成了我们页面布局！

CSS文件

CSS文件控制整个页面的样式，代码如下：

*{
    margin: 0;
    padding: 0;
}
body{
    /* vh相对窗口100vh百分之百 */
    height: 100vh;
    /* 当图片没有加载出来的时候会用颜色 */
    background: #4c4c4c url(../../../../素材/进击的巨人.webp);
    /* 背景图不重复 */
    background-repeat: no-repeat;
    /* cover背景图覆盖，以容器为标准  contain以图片为标准，保证图片在某个方向上铺满容器 两个都不变形*/
    background-size: 100% 100%;
    /* 设置弹性容器 */
    display: flex;
    /* 弹性主轴方向居中默认为x轴 */
    justify-content: center;
    /* 主轴的交叉轴居中默认为y轴 */
    align-items: center;
}
.wrapper{
    /* 设speed的父容器为弹性容器 */
    display: flex;
    width: 850px;
}
.speed{
    background: #fff;
    /* 子容器继承100%父容器可用的空间 */
    flex: 1;
    margin: 10px;
    border-radius: 50px;
    /* 超出部分隐藏 */
    overflow: hidden;
}
.speed-bar{
    width: 100%;
    height: 16.3%;
    /* linear-gradient 线性渐变 */
    background: linear-gradient(-170deg,#2376ae,#c16ecf 100%);
    display: flex;
    /*让容器水平和垂直居中*/
    justify-content: center;
    align-items: center;
    /* 单个color修饰文字 */
    color: #fff;
}

我们要完成的CSS样式就基本奠定了我们页面布局是如何的，完成这份代码之后，我们来看看我们现在的页面长啥样？

客官？网课/视频补不完?进来看看手写B站视频控制播放速度，妈妈再也不用担心我网课补不完了

没错，写完这个CSS文件，我们的样式就设定好了！

其中CSS文件样式的各个样式介绍，我们也在代码当中为大家有一个比较清楚的解释！

接下来就差实现控制视频播放速率的操作了！

JS文件

var speed = document.querySelector('.speed');//赋值语句
var bar = document.querySelector('.speed-bar');
var video = document.querySelector('.flex')
console.log(speed);
// e是形参，参数
speed.addEventListener('mousemove',function(e){
    // 某容器距离浏览器顶部的距离speed.offsetTop
    var y = e.y-speed.offsetTop;
    // 读取容器的高度speed.offsetHeight
    var percent = y / speed.offsetHeight;
    // Math.round()向上取整
    var height = Math.round(percent*100)+'%'
    bar.style.height=height
    var min = 0.4;
    var max =  4;
    var playbackRate = percent * (max-min)+min
    // toFixed(2)保留两位小数
    bar.textContent = playbackRate.toFixed(2)+'x'
    // 视频播放速度
    video.playbackRate=playbackRate;
})

代码如上

为大家解释一下，其中的逻辑就是通过控制鼠标在 speed 元素上的移动来控制视频的播放速度，并通过一个可视化的进度条 (bar) 来展示当前的播放速度。

  1. var speed = document.querySelector('.speed');：通过类名选择器获取页面中类名为 speed 的元素，并将其赋值给变量 speed。
  2. var bar = document.querySelector('.speed-bar');：通过类名选择器获取页面中类名为 speed-bar 的元素，并将其赋值给变量 bar。
  3. var video = document.querySelector('.flex')：通过类名选择器获取页面中类名为 flex 的元素，并将其赋值给变量 video。
  4. console.log(speed);：在控制台输出 speed 变量的值。
  5. speed.addEventListener('mousemove', function(e) {...}：为 speed 元素添加一个鼠标移动事件监听器。当鼠标在 speed 元素上移动时，触发后面的回调函数。
  6. 在回调函数中：
    • var y = e.y - speed.offsetTop;：计算鼠标相对于 speed 元素顶部的偏移量。
    • var percent = y / speed.offsetHeight;：计算鼠标相对于 speed 元素高度的百分比。
    • var height = Math.round(percent * 100) + '%';：将百分比转换为高度，并设置给 bar 元素的高度属性。
    • bar.style.height = height;：更新 bar 元素的高度。
    • var min = 0.4; 和 var max = 4;：设置播放速度的最小值和最大值。
    • var playbackRate = percent * (max - min) + min;：根据百分比计算播放速度。
    • bar.textContent = playbackRate.toFixed(2) + 'x';：将播放速度显示在 bar 元素上，保留两位小数。
    • video.playbackRate = playbackRate;：将计算得到的播放速度应用于视频播放器。

这样，我们的小Demo就全部实现了！大家赶紧去尝试一下吧！妈妈再也不用担心我网课补不完啦！

有任何疑问欢迎大家在评论区留言哦！客官，点个赞再走吧！🥺🥺🥺

转载自:https://juejin.cn/post/7304563142956433427
评论
请登录