H5视频倍速,时间加速和run-at

介绍时间加速与视频加速

注意由于时间间隔问题，以下两个例子已经无法正常运行

请着重于理解概念

时间加速​

时间加速的原理​

一般情况下，都是使用setInterval来做定时器，我们只要把这个定时器的时间缩短，比如之前是1s触发一次，现在变成500ms触发一次，那么就相当于时间缩短了一半。

信息除了setInterval最为常见，较为常见的定时方式还有setTimeout和requestAnimationFrame等。

做法也类似，在网页执行前劫持函数，根据具体的代码去拦截时间

setInterval拦截实现​

我们可以劫持setInterval这个函数，传入值为1000，我们把他变为500。代码类似下面这样:

//将系统提供的setInterval保存let hookSetInterval=window.setInterval;//将系统的setInterval替换为我们自己的window.setInterval=function(a,b){ //经过处理后再调用系统的setInterval return hookSetInterval(a,b/2);}

在脚本中也是类似的代码，不过如果使用//@grant unsafeWindow的话，window需要替换为unsafeWindow

视频倍速​

视频倍速的话，其实也很简单，主要牵扯到H5的video标签。

video标签有一个播放速度的属性：playbackRate，最高值为16，也就是16倍。

像B站这个页面，里面只有一个视频，我们直接document.querySelector('video')就可以获取到了，当然，如果有多个选择器，写好处理也没问题。

代码如下:

// 设置video标签两倍速document.querySelector('video').playbackRate=2;

提示当然，网站可能会有一些奇奇怪怪的方式来防护，百度云对视频倍速防护的例子可以在【这个帖子】查看

（似乎脚本功能已经过期了，重在理解）

RUN-AT​

注意这里脚本元信息(mate)还有一个比较重要的属性:@run-at

详情可以参考官方文档，其作用主要是设置脚本什么时候运行。

这里我们设置为:// @run-at document-start，希望脚本尽快的被注入，因为我们要抢在前端调用setInterval之前来替换掉setInterval函数。

信息示例脚本地址