JS实现简单控制视频播放倍速的实例代码


Posted in Javascript onApril 18, 2021

引言

之前就发现一个问题:有时候看一些学习视频,总是嫌它动作太慢,老师黑板上写板书很浪费时间,要是控制合适倍速播放,这样既能提升学习效率,也能让自己看着舒服点。所以我就学着写了下面这个网页,通过Html+CSS+JavaScript实现。

提示:以下是本篇文章正文内容,下面案例可供参考

一、成品效果

JS实现简单控制视频播放倍速的实例代码

二、具体实现

1.HTML+CSS实现简单布局

代码如下(示例):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css" rel="external nofollow" >
    <title>视频播放</title>
    
</head>
<body>
    <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>
    

    <script src="./index.js"></script>
</body>
</html>
*{
    margin: 0;
    padding: 0;
}
body{
    min-height: 100vh;/*   vh相对单位,相对于浏览器的尺寸改变*/
    background: #4c4c4c url('https://unsplash.it/1500/900?image=1021');
    background-size: cover;/*以容器为基准,将容器覆盖满,哪怕图片失真、模糊*/
    /*margin: auto;/* margin:auto和margin:0 auto    但不知道父容器宽高,不合适*/
    display: flex;/*将容器设置为弹性容器*/
    justify-content: center;    /*在X方向居中*/
    align-items: center;        /*在Y方向居中*/         /*课外拓展:将盒子在垂直方向居中的所有方式*/
}
#wrapper{
    width: 850px;
    display: flex;
}
.speed{
    flex: 1;/*等比继承,本来应该是1:1继承,但是vedio有固定宽度,所以speed拿剩下宽度*/
    margin: 10px;
    background-color: #fff;
    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;              /*使得容器可以设置接下来两个样式*/
    justify-content: center;
    align-items: center;
    color: #fff;
    cursor: pointer;
}

HTML处的排版其实中规中矩,只是设置了一个用于包装的id选择器,然后通过video标签使用H5自带的视频播放功能,可以通过更改src来更改播放的视频。
css处的话大家只要注意弹性盒子的使用,通过弹性容器设置了视频的水平垂直居中

2.JS实现功能

代码如下(示例):

//1.拿到要操作的dom结构
//2.取到鼠标在该dom上滑动的距离
//3.改变该dom的高度
//4.改变视频的播放速度

//获取对应的dom结构
var speed=document.querySelector('.speed')//补充:getElementsByClassName   都是获取class选择器
var bar=document.querySelector('.speed-bar')
var video=document.querySelector('.flex')

speed.addEventListener('mousemove',function(e){     //简单来说就是指向了当前发生的事件(click、mouseover等等),保存了当前事件的信息。如鼠标点击事件,有鼠标的坐标信息。
    //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 playbackRate = percent * (max-min)+min      //倍速计算
    var height = Math.round(percent * 100)+'%'//Math.abs()   也是取绝对值
    bar.textContent = playbackRate.toFixed(2)+'×'           //改变dom里面的文本内容    toFixed(x)  保留x位小数

    video.playbackRate = playbackRate       //调整video的播放倍速

    bar.style.height = height       //调整倍数文本的显示高度

})
//注:函数的俩参数作用分别为:监听鼠标点击事件       函数里面定义函数,成为回调函数

重点在于s处实现控制功能,在编写Js版块时,我们应该明确自己要Js帮我们干什么

1.拿到要操作的dom结构
2.取到鼠标在该dom上滑动的距离
3.改变该dom的高度
4.改变视频的播放速度

有了目标,我们就一个一个去实现它
具体实现可以直接看原码,这里重点提一下回调函数和鼠标控制倍速原理。可以看到
speed.addEventListener( " mousemove " ,function(e){)
这是个回调函数,当mousemove发生的时候就会执行函数function (e) tmousemove则是起到监听鼠标位置的作用

到此这篇关于通过JS来实现简单控制视频播放倍速的文章就介绍到这了,更多相关js视频播放倍速内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript下IE与FF兼容函数收集
Sep 17 Javascript
js 数组操作代码集锦
Apr 28 Javascript
扩展IE中一些不兼容的方法如contains、startWith等等
Jan 09 Javascript
js实现div弹出层的方法
Nov 20 Javascript
2014 HTML5/CSS3热门动画特效TOP10
Dec 07 Javascript
jQuery实现表格颜色交替显示的方法
Mar 09 Javascript
AspNet中使用JQuery boxy插件的确认框
May 20 Javascript
jquery form表单获取内容以及绑定数据
Feb 24 Javascript
基于JavaScript实现前端文件的断点续传
Oct 17 Javascript
jQuery 控制文本框自动缩小字体填充
Jun 16 jQuery
Node.js学习之地址解析模块URL的使用详解
Sep 28 Javascript
Vue一个案例引发的递归组件的使用详解
Nov 15 Javascript
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
使用PDF.js渲染canvas实现预览pdf的效果示例
Apr 17 #Javascript
详解如何在Canvas中添加事件的方法
Apr 17 #Javascript
Canvas三种动态画圆实现方法说明(小结)
如何在CocosCreator里画个炫酷的雷达图
jquery插件实现图片悬浮
详解CocosCreator消息分发机制
Apr 16 #Javascript
You might like
我的群发邮件程序
2006/10/09 PHP
php self,$this,const,static,-&amp;gt;的使用
2009/10/22 PHP
php.ini中date.timezone设置详解
2016/11/20 PHP
完美解决在ThinkPHP控制器中命名空间的问题
2017/05/05 PHP
ExtJS Store的数据访问与更新问题
2010/04/28 Javascript
jquery EasyUI的formatter格式化函数代码
2011/01/12 Javascript
js列举css中所有图标的实现代码
2011/07/04 Javascript
完美实现仿QQ空间评论回复特效
2015/05/06 Javascript
全面解析Bootstrap表单使用方法(表单控件)
2015/11/24 Javascript
jquery实现定时自动轮播特效
2015/12/10 Javascript
使用Promise解决多层异步调用的简单学习心得
2016/05/17 Javascript
jquery实现放大镜简洁代码(推荐)
2017/06/08 jQuery
深入理解ES7的async/await的用法
2017/09/09 Javascript
图片加载完成再执行事件的实例
2017/11/16 Javascript
Vue ElementUi同时校验多个表单(巧用new promise)
2018/06/06 Javascript
[28:07]完美世界DOTA2联赛PWL S3 Phoenix vs INK ICE 第二场 12.13
2020/12/17 DOTA
python正则表达式抓取成语网站
2013/11/20 Python
Python和GO语言实现的消息摘要算法示例
2015/03/10 Python
在windows下使用python进行串口通讯的方法
2019/07/02 Python
基于Python 中函数的 收集参数 机制
2019/12/21 Python
Python绘制全球疫情变化地图的实例代码
2020/04/20 Python
详解Python中如何将数据存储为json格式的文件
2020/11/18 Python
查找适用于matplotlib的中文字体名称与实际文件名对应关系的方法
2021/01/05 Python
详解Python之Scrapy爬虫教程NBA球员数据存放到Mysql数据库
2021/01/24 Python
捷克原创男装和女装购物网站:Bolf.cz
2018/04/28 全球购物
奢华的意大利皮革手袋:Bene Handbags
2019/10/29 全球购物
泰国最新活动和优惠:Megatix
2020/05/07 全球购物
房产转让协议书
2014/04/11 职场文书
本科生就业推荐信
2014/05/19 职场文书
县长“四风”对照检查材料思想汇报
2014/10/05 职场文书
贵阳市党的群众路线教育实践活动党(工)委领导班子整改方案
2014/10/26 职场文书
2014年学习委员工作总结
2014/11/14 职场文书
家长会欢迎词
2015/01/23 职场文书
绿色环保倡议书
2015/04/28 职场文书
幼儿园小班教学反思
2016/03/03 职场文书
Java中API的使用方法详情
2022/04/06 Java/Android