第三个脚本——时间加速and视频倍速

这篇具有很好参考价值的文章主要介绍了第三个脚本——时间加速and视频倍速。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

本文主要内容

granr属性介绍

run-at属性

时间加速原理

视频倍速原理

完整示例


本文主要内容

介绍grant属性,run-at属性以及时间加速,视频倍速原理

granr属性介绍

相关函数四个:

GM_setValue
GM_getValue
GM_listValues
GM_deleteValue

当然,还有存储内容变动时相关的函数

GM_addValueChangeListener
GM_removeValueChangeListener

接下来分别介绍一下

GM_setValue: 

假设代码 GM('myName', 'woonigh'

在Tampermonkey管理的存储中,把名字是myName的存储,设置值为 'woonigh' 

GM_getValue:

GM_getValue('myName', 'woonigh')

就是把名字是 myName 的存储的值读取出来,

如果找不到myName的值呢?那就用默认的值 'woonigh' 

GM_listValues: 

这个没有参数,就是把所有存储的名字罗列出来。

返回结果是 Array类型 

适合于:

  • 你的应用很大,需要做存储数据管理
  • 你的应用数据很乱

GM_deleteValue:

假设代码 GM_deleteValue('myName')

就是删除名字叫做 myName 的存储。

和上面 GM_listValues 一样,多用于数据管理。两者是一对。  

GM_addValueChangeListener:

对指定的名字进行监听,该函数返回一个id

该函数可以跨函数通信

格式为

GM_addValueChangeListener(name, function(name, old_value, new_value, remote) {

})

name为值的名称

函数的name也是

old_value为旧值

new_value为新值

remote区分这个值的改变的所属,如果是由本标签页引起的,则为false,如果由其他标签页引起的,为true。

GM_removeValueChangeListener:

移除一个监听器

GM_removeValueChangeListener(listener_id)
根据监听器的 ID,把监听器移除

示例如下:

// 存储中 增加一个存储量,名字叫 'myName', 值是'woonigh'
let my_name = GM_setValue('myName', 'Woonigh');

// 读取存储中的,名字叫 'hisName' 的值, 如果没有这个名字的存储的话,那返回来的值就叫 'Tony'
let his_name = GM_getValue('hisName', 'Tony');

// 把存储中所有的存储名字罗列出来
let all_value_names = GM_listValues();
console.log(all_value_names); // 输出  ["myName"]

// 给名字叫 'myName' 的存储添加一个监听器
let listener1 = GM_addValueChangeListener('myName', function (name, old_value, new_value, remote) {
  console.log(`
    发生变化的存储名是: ${name},
    ${name} 原来的值是 ${old_value},
    ${name} 新的值是 ${new_value},
    这个值的变动是由${remote ? '本标签页' : '其他标签页'} 引起的。
  `);
});

GM_setValue('myName', 'Maxwell');

// 把 id 是listener1 的监听器移除
GM_removeValueChangeListener(listener1);

// 把名字叫 'myNamae' 的存储删除掉
GM_deleteValue('myName');

run-at属性

一个比较重要的属性

当我们设置为:// @run-at document-start  

表示希望脚本能尽快注入,在时间加速时希望抢在前端调用setInterval之前来替换掉setInterval函数

时间加速原理

  如网站:时间校准_北京时间校准_北京时间在线校准_现在北京时间

但是该网站的时间加速已经失效了

第三个脚本——时间加速and视频倍速

一般情况下,都是使用setInterval来做定时器,我们只要把这个定时器的时间缩短,比如之前是1s触发一次,现在变成500ms触发一次,那么就相当于时间缩短了一倍.
怎么缩短呢?我们可以劫持setInterval这个函数,传入值为1000,我们把他变为500.代码类似下面这样:

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

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

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

视频倍速原理

视频倍速主要涉及h5的video,里面有一个播放速度的属性:playbackRate,最高为16倍.

解释网址如:HTMLMediaElement.playbackRate - Web API 接口参考 | MDN

像B站的视频页面,我们可以直接通过document.querySelector('video')获取,,如果有多个选择器写好也没问题.代码如下:

document.querySelector('video').playbackRate=2;

完整示例

但是关于时间加速的网站,已经不能通过此方法实现,B站可以但也有一定局限性,大家可以仿照写其他网站的,我们也可能遇到一下问题

1.视频暂停再取消会重置倍速

2.网站代码与脚本冲突

解决方法

1.固定playbackRate属性,或者让他网页的js不重置倍速,再暴力点可以通过计时器定时设置倍速

2.进行延迟注入

3.追根溯源,找到最根本的问题,一次性解决

// ==UserScript==
// @name         视频加速与时间加速
// @namespace    https://bbs.tampermonkey.net.cn/
// @version      0.1
// @description  用于:http://time.tianqi.com/的时间加速和用于bilibili的一个视频倍速:https://www.bilibili.com/video/BV1ys411p7To
// @author       You
// @match        http://time.tianqi.com/
// @match        https://www.bilibili.com/video/*
// @run-at       document-start
// @grant        unsafeWindow
// ==/UserScript==

let rate=4;//倍速

if(unsafeWindow.location.href.indexOf('time.tianqi.com')!=-1){
    //时间网站,用时间加速
    let hookSetInterval=unsafeWindow.setInterval;//将系统提供的setInterval保存
    unsafeWindow.setInterval=function(a,b){//将系统的setInterval替换为我们自己的
        return hookSetInterval(a,b/rate);//经过处理后再调用系统的setInterval
    }
}else{
    //bilibili用视频加速
    unsafeWindow.onload=function(){
        //在元素都加载完成后再监听video的播放时间,再进行倍速设置
        unsafeWindow.document.querySelector('video').onplay=function(){
            unsafeWindow.document.querySelector('video').playbackRate=rate;
        }
    }
}

俺是初学者,请大佬们不要见笑,请多多指点,谢谢!!!文章来源地址https://www.toymoban.com/news/detail-418363.html

到了这里,关于第三个脚本——时间加速and视频倍速的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 网页控制台控制视频倍速

            小伙伴们是否在某些网站看课程视频或刷网课视频,默认没有倍速观看,看得很慢,那今天我们就来看看通过网页控制台来操控视频倍数吧!   1、首先打开浏览器上的视频,按F12进入开发者工具                  2、切换到控制台(console)          

    2024年02月11日
    浏览(60)
  • 微信小程序视频调整播放倍速

    创建 video 上下文 设置视频倍数

    2024年02月13日
    浏览(47)
  • JS控制视频播放、暂停、倍速、音量等功能

    HTML  CSS: JS:(暂时没做优化什么的)

    2024年02月11日
    浏览(50)
  • 电脑自带播放器怎么倍速播放视频

    1.选择视频文件,鼠标右击在打开方式中选择Windows Media Player播放器打开视频 2. 在Windows Media Player视频播放器中鼠标右击选择“播放速度设置”,再选择增强功能即可调整播放速度了。    

    2024年02月11日
    浏览(47)
  • Unity学习记录4——视频进度条制作,视频倍速、快进及后退

    1.使用AVPro Video插件,进行制作 2.效果演示     3.代码

    2024年02月03日
    浏览(46)
  • PPT里被插入的视频如何倍速播放?

    前提:当播放PPT时,如果同时需要播放一个视频,可以有2种方法:(1)PPT里可以插入视频(2)单独放在桌面上的视频也可以倍速播放。 那么,PPT里被插入的视频如何倍速播放? 1、一页空白PPT 2、点击【文件】→【选项】 3、【选项】之后,就跳到了这个页面。如下图所示,

    2023年04月08日
    浏览(302)
  • html5网页播放器视频切换、倍速切换、视频预览的代码实例

     本文将对视频播放相关的功能进行说明,包括初始化播放器、播放器尺寸设置、视频切换、倍速切换、视频预览、自定义视频播放的开始/结束时间、禁止拖拽进度、播放器皮肤、控件按钮以及播放控制等。  图 / html5视频播放器调用效果(倍速切换) Polyv Web播放器同时支持

    2024年02月13日
    浏览(59)
  • html5视频播放器代码调用实例(视频切换\倍速切换)

    本文将对视频播放相关的功能进行说明,包括初始化播放器、播放器尺寸设置、视频切换、倍速切换、视频预览、自定义视频播放的开始/结束时间、禁止拖拽进度、播放器皮肤、控件按钮以及播放控制等。  图 / html5视频播放器调用效果(倍速切换)    图 / html5视频播放器

    2024年02月07日
    浏览(54)
  • Win10自带播放器怎么倍速播放视频

    Win10自带播放器怎么倍速播放视频?其实在Windows Media Player里面是可以进行设置的,只不过没有现在主流播放器那么方便,下面将具体的设置方法告诉大家,希望对你重装系统有帮助。 ​ 1、用Windows Media Player播放器打开视频后,在视频画面中点击鼠标右键。 2、在弹出的右键

    2024年02月03日
    浏览(45)
  • 简易的html5视频播放倍速代码写法

    HTML5视频标签有一个叫做playbackRate的属性,用于设置倍速播放。例如设置播放速度为2倍,可以写成: 同时,可以使用JavaScript来控制播放速度。以下是一个简单的代码示例,包含了3个按钮,点击分别可以将倍速设置为1、1.5和2。   MR直播实例(混合现实直播)高品质企业直播 企

    2024年02月02日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包