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 相关文章推荐
js页面跳转常用的几种方式
Nov 25 Javascript
javascript学习笔记(二十) 获得和设置元素的特性(属性)
Jun 20 Javascript
精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程
Aug 22 Javascript
javascript获取select值的方法分析
Jul 02 Javascript
jquery动态导航插件dynamicNav用法实例分析
Sep 06 Javascript
JS实现的倒计时效果实例(2则实例)
Dec 23 Javascript
使用微信内置浏览器点击下拉框出现页面乱跳转现象(iphone),该怎么办
Jan 04 Javascript
sencha ext js 6 快速入门(必看)
Jun 01 Javascript
js 实现数值的千分位及保存小数方法(推荐)
Aug 01 Javascript
Bootstrap多级菜单的实现代码
May 23 Javascript
使用mint-ui实现省市区三级联动效果的示例代码
Feb 09 Javascript
解决vue中修改了数据但视图无法更新的情况
Aug 27 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
PHP对象克隆clone用法示例
2016/09/28 PHP
微信封装的调用微信签名包的类库
2017/06/08 PHP
PHP+redis实现的悲观锁机制示例
2018/06/12 PHP
input链接页面、打开新网页等等的具体实现
2013/12/30 Javascript
JS组件Bootstrap导航条使用方法详解
2016/04/29 Javascript
javascript中的 object 和 function小结
2016/08/14 Javascript
JavaScript解析JSON格式数据的方法示例
2017/01/24 Javascript
JS实现搜索关键词的智能提示功能
2017/07/07 Javascript
详解Axios统一错误处理与后置
2018/09/26 Javascript
浅谈Vue.js 关于页面加载完成后执行一个方法的问题
2019/04/01 Javascript
简单了解JavaScript作用域
2020/07/31 Javascript
JavaScript数组常用的增删改查与其他属性详解
2020/10/13 Javascript
[23:18]Spirit vs Liquid Supermajor小组赛A组 BO3 第二场 6.2
2018/06/03 DOTA
Python中字符串对齐方法介绍
2015/05/21 Python
python使用MySQLdb访问mysql数据库的方法
2015/08/03 Python
python实现Excel文件转换为TXT文件
2019/04/28 Python
python获取array中指定元素的示例
2019/11/26 Python
tensorflow入门:TFRecordDataset变长数据的batch读取详解
2020/01/20 Python
django模型动态修改参数,增加 filter 字段的方式
2020/03/16 Python
python中执行smtplib失败的处理方法
2020/07/01 Python
python中watchdog文件监控与检测上传功能
2020/10/30 Python
python 用opencv实现霍夫线变换
2020/11/27 Python
详解如何在css中引入自定义字体(font-face)
2018/05/17 HTML / CSS
基于Html5实现的react拖拽排序组件示例
2018/08/13 HTML / CSS
雅诗兰黛美国官网:Estee Lauder美国
2016/07/21 全球购物
linux面试题参考答案(6)
2016/06/23 面试题
成人毕业生自我鉴定
2013/10/18 职场文书
施工资料员的岗位职责
2013/12/22 职场文书
计算机专业自荐信
2014/05/24 职场文书
演讲稿开场白台词
2014/08/25 职场文书
叶问观后感
2015/06/15 职场文书
学术研讨会主持词
2015/07/04 职场文书
初中体育教学随笔
2015/08/15 职场文书
Jupyter notebook 输出部分显示不全的解决方案
2021/04/24 Python
浅谈sql_@SelectProvider及使用注意说明
2021/08/04 Java/Android
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
2022/04/30 Vue.js