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

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

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

小Demo

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

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

例如:

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

我们先来给大家上效果!

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

HTML文件

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文件,对页面进行基本的布局就可以完成。

简单描述一下:

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

CSS文件

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样式就基本奠定了我们页面布局是如何的,完成这份代码之后,我们来看看我们现在的页面长啥样?

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

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

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

JS文件

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就全部实现了!大家赶紧去尝试一下吧!妈妈再也不用担心我网课补不完啦!

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

相关推荐
庸俗今天不摸鱼12 分钟前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
QTX1873013 分钟前
JavaScript 中的原型链与继承
开发语言·javascript·原型模式
黄毛火烧雪下19 分钟前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
Apifox29 分钟前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员
一张假钞32 分钟前
Firefox默认在新标签页打开收藏栏链接
前端·firefox
高达可以过山车不行32 分钟前
Firefox账号同步书签不一致(火狐浏览器书签同步不一致)
前端·firefox
m0_5937581033 分钟前
firefox 136.0.4版本离线安装MarkDown插件
前端·firefox
掘金一周37 分钟前
金石焕新程 >> 瓜分万元现金大奖征文活动即将回归 | 掘金一周 4.3
前端·人工智能·后端
三翼鸟数字化技术团队1 小时前
Vue自定义指令最佳实践教程
前端·vue.js
Jasmin Tin Wei1 小时前
蓝桥杯 web 学海无涯(axios、ecahrts)版本二
前端·蓝桥杯