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 相关文章推荐
jQuery开发者都需要知道的5个小技巧
Jan 08 Javascript
实现点击列表弹出列表索引的两种方式
Mar 08 Javascript
js arguments,jcallee caller用法总结
Nov 30 Javascript
推荐25个超炫的jQuery网格插件
Nov 28 Javascript
jQuery通过控制节点实现仅在前台通过get方法完成参数传递
Feb 02 Javascript
jQuery插件easyUI实现通过JS显示Dialog的方法
Sep 16 Javascript
详解JavaScript对象的深浅复制
Mar 30 Javascript
vue-cli如何快速构建vue项目
Apr 26 Javascript
JavaScript模拟实现封装的三种方式及写法区别
Oct 27 Javascript
微信小程序实现折叠面板
Jan 31 Javascript
node.js中fs文件系统目录操作与文件信息操作
Feb 24 Javascript
使用rollup打包JS的方法步骤
Dec 05 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
收音机的保养
2021/03/01 无线电
php中单个数据库字段多列显示(单字段分页、横向输出)
2014/07/28 PHP
php简单获取目录列表的方法
2015/03/24 PHP
解析WordPress中的post_class与get_post_class函数
2016/01/04 PHP
CI框架整合widget(页面格局)的方法
2016/05/17 PHP
PHP5.0~5.6 各版本兼容性cURL文件上传功能实例分析
2018/05/11 PHP
Nigma vs Alliance BO5 第一场2.14
2021/03/10 DOTA
通过Mootools 1.2来操纵HTML DOM元素
2009/09/15 Javascript
得到form下的所有的input的js代码
2013/11/07 Javascript
js实现的折叠导航示例
2013/11/29 Javascript
JavaScript避免代码的重复执行经验技巧分享
2014/04/17 Javascript
jQuery表格排序组件-tablesorter使用示例
2014/05/26 Javascript
IE下通过a实现location.href 获取referer的值
2014/09/04 Javascript
Javascript中innerHTML用法实例分析
2015/01/12 Javascript
Node.js环境下JavaScript实现单链表与双链表结构
2016/06/12 Javascript
jquery实现网站列表切换效果的2种方法
2016/08/12 Javascript
AngularJS使用ng-Cloak阻止初始化闪烁问题的方法
2016/11/03 Javascript
JavaScript实现图片轮播组件代码示例
2016/11/22 Javascript
JSONP基础知识详解
2017/03/19 Javascript
基于Vue.js与WordPress Rest API构建单页应用详解
2019/09/16 Javascript
python3.0 字典key排序
2008/12/24 Python
浅析Python中的序列化存储的方法
2015/04/28 Python
Python异常对代码运行性能的影响实例解析
2018/02/08 Python
python的pip安装以及使用教程
2018/09/18 Python
对python数据切割归并算法的实例讲解
2018/12/12 Python
Python实现简单石头剪刀布游戏
2021/01/20 Python
Django给admin添加Action的步骤详解
2019/05/01 Python
浅谈pytorch卷积核大小的设置对全连接神经元的影响
2020/01/10 Python
python 回溯法模板详解
2020/02/26 Python
开发人员所需要知道的HTML5性能分析面面观
2012/07/05 HTML / CSS
La Senza官网:北美顶尖性感内衣品牌
2018/08/03 全球购物
2015年保险公司个人工作总结
2015/05/22 职场文书
运动会开幕式主持词
2015/07/01 职场文书
英语版自我评价,35句话轻松搞定
2019/10/08 职场文书
python scrapy简单模拟登录的代码分析
2021/07/21 Python
基于Python实现流星雨效果的绘制
2022/03/18 Python