js 控制鼠标_原生js实现改变视频播放速率

js 控制鼠标_原生js实现改变视频播放速率_第1张图片

前言:前几天考研成绩刚刚出来,有人欢喜有人悲,不管结果怎么样,只要努力过,就不存在遗憾一说。大家都知道考研复习的时候会有大量的时间用来看教学视频,就比如说“张宇高数”等等。考研复习时间是非常珍贵的,所以有些同学就会选择倍速播放视频,一次来节约时间,今天我们就来简单的实现一下视频倍速播放。

我的更多文章请参考:

天之蓝源:前端开发者必备的40个VSCode插件!​zhuanlan.zhihu.com
js 控制鼠标_原生js实现改变视频播放速率_第2张图片
天之蓝源:三分钟在GitHub上搭建个人博客​zhuanlan.zhihu.com
js 控制鼠标_原生js实现改变视频播放速率_第3张图片
天之蓝源:零基础Hexo+Github搭建静态个人博客​zhuanlan.zhihu.com
js 控制鼠标_原生js实现改变视频播放速率_第4张图片
天之蓝源:原生js实现点击按钮复制文本内容​zhuanlan.zhihu.com
js 控制鼠标_原生js实现改变视频播放速率_第5张图片
天之蓝源:九种跨域方式实现原理​zhuanlan.zhihu.com
js 控制鼠标_原生js实现改变视频播放速率_第6张图片
天之蓝源:前端面试考点多?看这些文章就够了(转载)​zhuanlan.zhihu.com
js 控制鼠标_原生js实现改变视频播放速率_第7张图片
天之蓝源:干货!值得收藏的前端学习网站​zhuanlan.zhihu.com
js 控制鼠标_原生js实现改变视频播放速率_第8张图片
天之蓝源:原生JS实现一个日期选择器(DatePicker)组件​zhuanlan.zhihu.com
js 控制鼠标_原生js实现改变视频播放速率_第9张图片
天之蓝源:原生js一步一步实现《别踩白块儿》小游戏​zhuanlan.zhihu.com
e244f704c2bb8940a6cb9f397c278834.png
天之蓝源:原生js利用localstorage实现简易TODO list应用​zhuanlan.zhihu.com
js 控制鼠标_原生js实现改变视频播放速率_第10张图片
天之蓝源:原生js实现瀑布流效果​zhuanlan.zhihu.com
js 控制鼠标_原生js实现改变视频播放速率_第11张图片
天之蓝源:原生js实现图片懒加载(lazyLoad)​zhuanlan.zhihu.com
js 控制鼠标_原生js实现改变视频播放速率_第12张图片
天之蓝源:原生js实现简单路由切换​zhuanlan.zhihu.com
js 控制鼠标_原生js实现改变视频播放速率_第13张图片

实现效果:

js 控制鼠标_原生js实现改变视频播放速率_第14张图片
视频倍速播放https://www.zhihu.com/video/1082600881282654208

一.HTML代码

可以看到我们的代码很简单,就一个外层容器wrapper,然后里面有一个H5的video标签,然后一个控制倍速的容器speed。


    

二.设置点样式——CSS

我们的样式也是写得很简单,里面用到了flex布局和vh布局,不太熟悉的小伙伴可以参考:

Flex 布局教程:语法篇 - 阮一峰的网络日志​www.ruanyifeng.com
js 控制鼠标_原生js实现改变视频播放速率_第15张图片
https://blog.csdn.net/ZNYSYS520/article/details/76053961​blog.csdn.net
<

此时我们页面部分已进基本完成了,有没有发现HTML5的video标签很好用呢,这里我们默认的是x1速率:

js 控制鼠标_原生js实现改变视频播放速率_第16张图片

三.加上JavaScript实现倍速播放

关于pageY,W3C上是这样解释的:

js 控制鼠标_原生js实现改变视频播放速率_第17张图片

关于pageY,offsetTop等使用方法可以参考文章:

event.pageY​developer.mozilla.org
js 控制鼠标_原生js实现改变视频播放速率_第18张图片
理解 e.clientX,e.clientY e.pageX e.pageY e.offsetX e.offsetY​www.cnblogs.com
js 控制鼠标_原生js实现改变视频播放速率_第19张图片
https://blog.csdn.net/nideshijian/article/details/52453074​blog.csdn.net JavaScript round() 方法​www.w3school.com.cn

另外设计到的video的属性可以参考:

HTML 5 Audio/Video DOM playbackRate 属性​www.w3school.com.cn
<

代码是非常简单的,里面是涉及到了少部分API之类的,看一看注释就能马上懂,就不做过多解释,里面用到了ES6的命名方式,学习ES6请参考:

ECMAScript 6入门​es6.ruanyifeng.com

四.总结

总体来说代码是非常简单了,主要的目的就是让大家了解一下HMTL5中的video标签,关于video标签更多的属性请自行去了解了。

欢迎关注微信公众号:前端切图仔

五.源代码

Hacker233/JavaScript​github.com
c06f7b62e5c78b45ce877a76bc350e44.png

文章参考地址:

liyuechun/JavaScript30-liyuechun​github.com
js 控制鼠标_原生js实现改变视频播放速率_第20张图片

你可能感兴趣的:(js,控制鼠标,js时间选择器,js获取display的值,js设置padding)