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类定义语法,私有成员、受保护成员、静态成员等介绍
Dec 08 Javascript
jquery聚焦文本框与扩展文本框聚焦方法
Oct 12 Javascript
js传中文参数controller里获取参数乱码问题解决方法
Jan 03 Javascript
Javascript实现的常用算法(如冒泡、快速、鸽巢、奇偶等)
Apr 29 Javascript
使用vue.js开发时一些注意事项
Apr 27 Javascript
vue编译打包本地查看index文件的方法
Feb 23 Javascript
layui实现文件或图片上传记录
Aug 28 Javascript
vue-cli webpack 引入swiper的操作方法
Sep 15 Javascript
jQuery操作attr、prop、val()/text()/html()、class属性
May 23 jQuery
vue路由守卫,限制前端页面访问权限的例子
Nov 11 Javascript
只有 20 行的 JavaScript 模板引擎实例详解
May 11 Javascript
Ant Design的可编辑Tree的实现操作
Oct 31 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
判断、添加和删除WordPress置顶文章的相关PHP函数小结
2015/12/10 PHP
PHP生成推广海报的方法分享
2018/04/22 PHP
PHP使用 Pear 进行安装和卸载包的方法详解
2019/07/08 PHP
基于JQuery的访问WebService的代码(可访问Java[Xfire])
2010/11/19 Javascript
js获取当前地址 JS获取当前URL的示例代码
2014/02/26 Javascript
js在数组中删除重复的元素自保留一个(两种实现思路)
2014/08/22 Javascript
node.js中的fs.rename方法使用说明
2014/12/16 Javascript
2014 年最热门的21款JavaScript框架推荐
2014/12/25 Javascript
jQuery使用之设置元素样式用法实例
2015/01/19 Javascript
解析javascript中鼠标滚轮事件
2015/05/26 Javascript
图片加载完成再执行事件的实例
2017/11/16 Javascript
浅谈Fetch 数据交互方式
2018/12/20 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)
2019/01/23 Javascript
JavaScript数据结构与算法之二叉树实现查找最小值、最大值、给定值算法示例
2019/03/01 Javascript
JavaScript判断浏览器版本的方法
2019/11/03 Javascript
小程序实现投票进度条
2019/11/20 Javascript
jQuery实现可编辑的表格
2019/12/11 jQuery
JS async 函数的含义和用法实例总结
2020/04/08 Javascript
[15:23]教你分分钟做大人:虚空假面
2014/10/30 DOTA
Python中的urllib模块使用详解
2015/07/07 Python
Python将多个excel文件合并为一个文件
2018/01/03 Python
Python绘制的二项分布概率图示例
2018/08/22 Python
解决使用PyCharm时无法启动控制台的问题
2019/01/19 Python
解决Keras使用GPU资源耗尽的问题
2020/06/22 Python
Python如何批量生成和调用变量
2020/11/21 Python
纯CSS实现预加载动画效果
2017/09/06 HTML / CSS
详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用
2020/08/24 HTML / CSS
Snapfish英国:在线照片打印和个性化照片礼品
2017/01/13 全球购物
乐天旅游台湾网站:Rakuten Travel TW
2017/06/01 全球购物
TCP/IP模型的分界线
2012/12/01 面试题
电脑租赁公司创业计划书
2014/01/08 职场文书
爱国演讲稿400字
2014/05/07 职场文书
学生抄袭作业的检讨书
2014/10/02 职场文书
2014幼儿园班主任工作总结
2014/12/04 职场文书
干货:我将这样书写我的演讲稿!
2019/05/09 职场文书
最新动漫情报:2022年7月新番定档超过30部, OVERLORD骨王第四季也在其中噢
2022/05/04 日漫