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

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

我的更多文章请参考：

天之蓝源：前端开发者必备的40个VSCode插件！zhuanlan.zhihu.com

天之蓝源：三分钟在GitHub上搭建个人博客zhuanlan.zhihu.com

天之蓝源：零基础Hexo+Github搭建静态个人博客zhuanlan.zhihu.com

天之蓝源：原生js实现点击按钮复制文本内容zhuanlan.zhihu.com

天之蓝源：九种跨域方式实现原理zhuanlan.zhihu.com

天之蓝源：前端面试考点多？看这些文章就够了（转载）zhuanlan.zhihu.com

天之蓝源：干货！值得收藏的前端学习网站zhuanlan.zhihu.com

天之蓝源：原生JS实现一个日期选择器（DatePicker）组件zhuanlan.zhihu.com

天之蓝源：原生js一步一步实现《别踩白块儿》小游戏zhuanlan.zhihu.com

天之蓝源：原生js利用localstorage实现简易TODO list应用zhuanlan.zhihu.com

天之蓝源：原生js实现瀑布流效果zhuanlan.zhihu.com

天之蓝源：原生js实现图片懒加载（lazyLoad）zhuanlan.zhihu.com

天之蓝源：原生js实现简单路由切换zhuanlan.zhihu.com

实现效果：

视频倍速播放https://www.zhihu.com/video/1082600881282654208

一.HTML代码

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

<body><div class="wrapper"><video class="flex" width="765" height="430" src="./新闻.mp4" loop controls></video><div class="speed"><div class="speed-bar">1×</div></div></div>
</body>

二.设置点样式——CSS

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

Flex 布局教程：语法篇 - 阮一峰的网络日志www.ruanyifeng.com

https://blog.csdn.net/ZNYSYS520/article/details/76053961blog.csdn.net

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

三.加上JavaScript实现倍速播放

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

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

event.pageYdeveloper.mozilla.org

理解 e.clientX,e.clientY e.pageX e.pageY e.offsetX e.offsetYwww.cnblogs.com

https://blog.csdn.net/nideshijian/article/details/52453074blog.csdn.netJavaScript 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/JavaScriptgithub.com

文章参考地址：

liyuechun/JavaScript30-liyuechungithub.com