V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
tomoya92
V2EX  ›  分享创造

写了个 b 站的倍速油猴脚本,可自定义播放速度,刷新不丢失

  •  
  •   tomoya92 · 2019-08-06 12:45:01 +08:00 · 5275 次点击
    这是一个创建于 1934 天前的主题,其中的信息可能已经有所发展或是发生改变。

    不知道为啥,b 站,ytb 都是将倍速设置写在 sessionStorage 里,刷新页面就丢失了,着实蛋疼,这个脚本可以记住设置的倍速,刷新页面自动加载之前设置的速度,解决了我长期的烦恼

    https://greasyfork.org/en/scripts/388225

    第 1 条附言  ·  2019-08-16 17:40:04 +08:00
    又写了个 youtube 的选择速度脚本,欢迎大家使用

    https://greasyfork.org/en/scripts/381176
    第 2 条附言  ·  2019-08-21 09:22:28 +08:00
    又写了个 b 站超链接在当前页面打开的脚本,https://greasyfork.org/en/scripts/389127
    33 条回复    2020-03-12 21:54:41 +08:00
    AllenHua
        1
    AllenHua  
       2019-08-06 13:27:30 +08:00 via iPhone
    支持一下。
    BranderZMX
        2
    BranderZMX  
       2019-08-06 14:00:51 +08:00 via iPhone
    😺
    sorry
        3
    sorry  
       2019-08-06 15:16:03 +08:00
    nice~
    xuyl
        4
    xuyl  
       2019-08-06 18:02:31 +08:00
    可否设置超过 2 倍速?
    tomoya92
        5
    tomoya92  
    OP
       2019-08-06 18:18:52 +08:00 via iPhone
    @xuyl 截图你看不到吗?

    最多可以设置 5 倍
    xuyl
        6
    xuyl  
       2019-08-06 18:23:05 +08:00
    @tomoya92 油猴子官网太卡打不开,
    pkookp8
        7
    pkookp8  
       2019-08-06 18:31:45 +08:00 via Android
    我怎么记得自带的还有 1.25 倍?我看 1.25 正好,1.5 太快
    路上,没装,问问
    SEARCHINGFREE
        8
    SEARCHINGFREE  
       2019-08-06 18:32:35 +08:00 via iPhone
    sessionstorage 刷新会丢?现在浏览器都已经支持 2 倍以上了吗
    tomoya92
        9
    tomoya92  
    OP
       2019-08-06 18:37:59 +08:00 via iPhone
    @pkookp8 我看都是 2 倍,有时还是会嫌太慢,刷新页面会丢,插件里默认给了 1 倍,2 倍以及以上
    tomoya92
        10
    tomoya92  
    OP
       2019-08-06 18:38:40 +08:00 via iPhone
    @SEARCHINGFREE 会丢,不是浏览器支持,是 video 标签支持
    deorth
        11
    deorth  
       2019-08-06 18:54:51 +08:00
    我想知道人与人之间大脑速度的差距能有多大?
    tomoya92
        12
    tomoya92  
    OP
       2019-08-06 19:03:37 +08:00
    @deorth #11 这要看个人习惯吧,我看习惯了 2 倍速,现在看正常的视频都会觉得非常慢,不由的想去加速它

    这也导致了一些电影我都看不下去了

    不过也有好处,如果有一个视频教程,正好又是我想学的,就可以以 2 倍速看完,用时会缩短一半
    deorth
        13
    deorth  
       2019-08-06 19:30:37 +08:00
    @tomoya92 我以前模拟 GBA 的时候,也喜欢开加速玩,习惯了以后调回正常速度就像觉得太慢了受不了。显然,每个人都对这样加速的多媒体信息都有一定的承受能力,因为为了能让大众都能接受,正常速度的多媒体信息实际上是被设定在了一个较低的速率上的。问题在于不同的人对于这种加速的承受能力区别到底有多大?而我真正关心的是,我能多大程度上提升自己处理信息的速度?简单来说就是,我想能大脑超频
    yeeyeung
        14
    yeeyeung  
       2019-08-06 19:58:59 +08:00
    页面上下滚动的时候会被覆盖掉
    YUyu101
        15
    YUyu101  
       2019-08-06 22:27:25 +08:00
    @deorth 不考虑信息量的吗,如果都是垃圾信息或者你不想的仔细看的画面占大多数当然能高速接受。
    sdshiyan2005
        16
    sdshiyan2005  
       2019-08-07 04:45:48 +08:00
    一直用 greasyfork 上面 27614 号的 html5 播放器增强插件,和 potplayer 快捷键一致,用 z/x/c 改速度
    aguesuka
        17
    aguesuka  
       2019-08-07 09:11:59 +08:00 via Android
    我看火影都是 5 倍速,看到回忆杀还要快进
    tomoya92
        18
    tomoya92  
    OP
       2019-08-07 18:29:57 +08:00 via iPhone
    @yeeyeung 本来想把创建的 dom append 到页面元素里的,测试发现会导致页面布局崩溃,然后就固定定位了
    jamry
        19
    jamry  
       2019-08-07 18:53:44 +08:00
    能加入 1.25x 和 1.5x 么,其实这两个最常用
    jamry
        20
    jamry  
       2019-08-07 19:01:36 +08:00
    我自己改了一下脚本,可以实现 x1.25 x1.5 了,多谢楼主
    JCZ2MkKb5S8ZX9pq
        21
    JCZ2MkKb5S8ZX9pq  
       2019-08-07 22:05:13 +08:00
    能加入 1.25x 和 1.5x 么,其实这两个最常用 +1
    JCZ2MkKb5S8ZX9pq
        22
    JCZ2MkKb5S8ZX9pq  
       2019-08-07 22:45:16 +08:00
    根据自己需要简单改了几个地方 lz 看看有没有用得上的

    ---

    let style = document.createElement('style');
    style.type = 'text/css';
    style.innerHTML = "#video_speed_div button {padding: 0 5px; margin-left: 2px; background: #eee; border: 0; color: #888; cursor: pointer;} .video_speed_div-button-active {background-color: #00b5e5!important; color: #fff!important;}";
    document.getElementsByTagName('head').item(0).appendChild(style);

    let videoSpeedElement = document.createElement("div");
    videoSpeedElement.setAttribute("id", "video_speed_div");

    let speedList = [1,1.25,1.5,2,3,4,5]
    for(let i in speedList){
    let spd = speedList[i]
    let btn = document.createElement("button");
    btn.innerHTML = "x"+spd;
    btn.setAttribute("id", "third_video_plugin_btn_"+spd);
    btn.addEventListener("click", changeVideoSpeed);
    videoSpeedElement.appendChild(btn);
    }

    let videoElement = document.querySelector("#playerWrap");
    let videoWidth = videoElement.clientWidth;
    let videoHeight = videoElement.clientHeight;
    let videoOffsetTop = videoElement.offsetTop;
    let videoOffsetLeft = videoElement.offsetLeft;

    videoSpeedElement.style.textAlign = "right";
    videoSpeedElement.style.width = "300px";
    videoSpeedElement.style.height = "30px";
    videoSpeedElement.style.position = "absolute";
    videoSpeedElement.style.top = (videoOffsetTop - 32) + "px";
    videoSpeedElement.style.left = (videoOffsetLeft + videoWidth - 300) + "px";

    document.body.appendChild(videoSpeedElement);
    tomoya92
        23
    tomoya92  
    OP
       2019-08-08 00:14:48 +08:00 via iPhone
    @JCZ2MkKb5S8ZX9pq 明天加一下
    tomoya92
        24
    tomoya92  
    OP
       2019-08-08 00:15:20 +08:00 via iPhone
    @JCZ2MkKb5S8ZX9pq 感谢,明天看看
    tomoya92
        25
    tomoya92  
    OP
       2019-08-16 15:30:38 +08:00
    @jamry @JCZ2MkKb5S8ZX9pq #22 不好意思一直忘,刚给加上了,倍速可选也加多了 `let speedArr = [1, 1.25, 1.5, 1.75, 2, 2.5, 3, 3.5, 4, 4.5, 5];`
    tomoya92
        26
    tomoya92  
    OP
       2019-08-16 17:39:24 +08:00   ❤️ 1
    @yeeyeung #14 我重新改了一下 append 位置,现在不是绝对定位了,滚动页面也正常了
    JCZ2MkKb5S8ZX9pq
        27
    JCZ2MkKb5S8ZX9pq  
       2019-08-17 16:32:00 +08:00
    希望能参考一下我的修改,主要几点。
    1. 选项稍微减少一点,3 倍以上的时候,0.5 倍不是很必要。
    2. 减少按钮间距。
    3. 我是前端,我有调整按钮和左侧文字垂直对齐的问题。这里一般会采用垂直居中,或者基线(文字底部)对齐。

    ---

    希望如此改动的理由是,刚才油猴自动更新了,按钮变得很宽。
    我是在一个竖屏的屏幕上播放的,宽度 1080,或者 960 的时候,按钮会过宽。1920 是正常的。

    当然,如果你觉得修改麻烦的话,也希望能告知。如果你不介意的话,我想 fork 一个版本出来自己用。
    JCZ2MkKb5S8ZX9pq
        28
    JCZ2MkKb5S8ZX9pq  
       2019-08-17 16:46:04 +08:00
    又改了一点点样式,关于宽度和垂直对齐,你看看有没有用得上的。

    let videoSpeedElement;

    let style = document.createElement('style');
    style.type = 'text/css';
    style.innerHTML = "#video_speed_div button { outline: 0; padding:0 5px; min-width: 30px; margin: 1px -18px 0 20px; background-color: #eee; border: 0; color: #888; cursor: pointer;} .video_speed_div-button-active { border: 0!important; background-color: #00b5e5!important; color: #fff!important; }";
    document.getElementsByTagName('head').item(0).appendChild(style);

    let _interval = setInterval(function () {
    if (document.querySelector(".bb-comment") && document.getElementById("video_speed_div") === null) {
    addSpeedBtns();
    }
    }, 100);

    function addSpeedBtns() {
    videoSpeedElement = document.createElement("div");
    videoSpeedElement.setAttribute("id", "video_speed_div");

    let speedArr = [1, 1.25, 1.5, 1.75, 2, 3, 4, 5];

    for (let i = 0; i < speedArr.length; i++) {
    let speed = speedArr[i];
    let btn = document.createElement("button");
    btn.innerHTML = "x" + speed;
    btn.setAttribute("id", "third_video_plugin_btn_" + speed);
    btn.addEventListener("click", changeVideoSpeed);
    videoSpeedElement.appendChild(btn);
    }


    document.querySelector("#viewbox_report").querySelector(".video-data:last-child").appendChild(videoSpeedElement);

    clearInterval(_interval);

    // 加载之间已经设置的速度, 在同一个页面中切换视频后,设置的速度就没了,这里用一个定时器,200ms 设置一下
    setInterval(function () {
    let third_video_plugin_speed = localStorage.getItem("third_video_plugin_speed");
    if (!third_video_plugin_speed) third_video_plugin_speed = '1';
    for (let i = 0; i < videoSpeedElement.childNodes.length; i++) {
    let btn = videoSpeedElement.childNodes[i];
    if (btn.getAttribute("id") === "third_video_plugin_btn_" + third_video_plugin_speed) {
    btn.click();
    }
    }
    document.getElementById("third_video_plugin_btn_" + third_video_plugin_speed).click();
    }, 200);
    }
    JCZ2MkKb5S8ZX9pq
        29
    JCZ2MkKb5S8ZX9pq  
       2019-08-17 16:58:27 +08:00
    https://imgur.com/KKq6bVe.png
    因为用了左对齐,感觉可以考虑把背景色去掉,跟文字会更融合一点,不会有一个色块未对齐的感觉。
    之前右对齐有一个色块倒还好。但宽度变化会偏移位置,所以才左对齐了吧。
    JCZ2MkKb5S8ZX9pq
        30
    JCZ2MkKb5S8ZX9pq  
       2019-08-17 17:17:19 +08:00
    https://imgur.com/CLY5pn3.png

    又改了一个无背景的试试。顺便加了点 hover。
    间距完全用 before 的分隔符控制了,如果要不可见颜色透明就行。

    style.innerHTML = "
    #video_speed_div button { outline: 0; margin: 2px 0 0; background: transparent; border: 0; color: #999; cursor: pointer;}
    .video_speed_div-button-active { border: 0!important; background: transparent!important; color: #00a1d6!important;font-weight:bolder; }
    #video_speed_div button:before{content:'·';margin:5px;color:#999!important;font-weight:normal!important}
    #video_speed_div button:hover{color:#00b5e5}";
    tomoya92
        31
    tomoya92  
    OP
       2019-08-20 13:21:55 +08:00
    @JCZ2MkKb5S8ZX9pq #30 感谢

    这两天又修了个 bug,现在样式我觉得还好,你要是不喜欢,可以自己修改一下
    JCZ2MkKb5S8ZX9pq
        32
    JCZ2MkKb5S8ZX9pq  
       2019-08-20 13:45:18 +08:00
    @tomoya92 嗯,想起来可以额外写个 stylish,外挂个 css 上去。这样 js 的更新就不影响了。
    v2eros
        33
    v2eros  
       2020-03-12 21:54:41 +08:00
    Y2B 调速很棒,感谢!
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3466 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 111ms · UTC 00:48 · PVG 08:48 · LAX 16:48 · JFK 19:48
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.