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

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

  •  
  •   tomoya92 · 105 天前 · 2293 次点击
    这是一个创建于 105 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

    第 1 条附言  ·  95 天前
    又写了个 youtube 的选择速度脚本,欢迎大家使用

    https://greasyfork.org/en/scripts/381176
    第 2 条附言  ·  91 天前
    又写了个 b 站超链接在当前页面打开的脚本,https://greasyfork.org/en/scripts/389127
    32 回复  |  直到 2019-08-20 13:45:18 +08:00
        1
    AllenHua   105 天前 via iPhone
    支持一下。
        2
    BranderZMX   105 天前 via iPhone
    😺
        3
    sorry   105 天前
    nice~
        4
    xuyl   105 天前
    可否设置超过 2 倍速?
        5
    tomoya92   105 天前 via iPhone
    @xuyl 截图你看不到吗?

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

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

    不过也有好处,如果有一个视频教程,正好又是我想学的,就可以以 2 倍速看完,用时会缩短一半
        13
    deorth   105 天前
    @tomoya92 我以前模拟 GBA 的时候,也喜欢开加速玩,习惯了以后调回正常速度就像觉得太慢了受不了。显然,每个人都对这样加速的多媒体信息都有一定的承受能力,因为为了能让大众都能接受,正常速度的多媒体信息实际上是被设定在了一个较低的速率上的。问题在于不同的人对于这种加速的承受能力区别到底有多大?而我真正关心的是,我能多大程度上提升自己处理信息的速度?简单来说就是,我想能大脑超频
        14
    yeeyeung   105 天前
    页面上下滚动的时候会被覆盖掉
        15
    YUyu101   105 天前
    @deorth 不考虑信息量的吗,如果都是垃圾信息或者你不想的仔细看的画面占大多数当然能高速接受。
        16
    sdshiyan2005   105 天前
    一直用 greasyfork 上面 27614 号的 html5 播放器增强插件,和 potplayer 快捷键一致,用 z/x/c 改速度
        17
    aguesuka   105 天前 via Android
    我看火影都是 5 倍速,看到回忆杀还要快进
        18
    tomoya92   104 天前 via iPhone
    @yeeyeung 本来想把创建的 dom append 到页面元素里的,测试发现会导致页面布局崩溃,然后就固定定位了
        19
    jamry   104 天前
    能加入 1.25x 和 1.5x 么,其实这两个最常用
        20
    jamry   104 天前
    我自己改了一下脚本,可以实现 x1.25 x1.5 了,多谢楼主
        21
    JCZ2MkKb5S8ZX9pq   104 天前
    能加入 1.25x 和 1.5x 么,其实这两个最常用 +1
        22
    JCZ2MkKb5S8ZX9pq   104 天前
    根据自己需要简单改了几个地方 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);
        23
    tomoya92   104 天前 via iPhone
    @JCZ2MkKb5S8ZX9pq 明天加一下
        24
    tomoya92   104 天前 via iPhone
    @JCZ2MkKb5S8ZX9pq 感谢,明天看看
        25
    tomoya92   95 天前
    @jamry @JCZ2MkKb5S8ZX9pq #22 不好意思一直忘,刚给加上了,倍速可选也加多了 `let speedArr = [1, 1.25, 1.5, 1.75, 2, 2.5, 3, 3.5, 4, 4.5, 5];`
        26
    tomoya92   95 天前   ♥ 1
    @yeeyeung #14 我重新改了一下 append 位置,现在不是绝对定位了,滚动页面也正常了
        27
    JCZ2MkKb5S8ZX9pq   94 天前
    希望能参考一下我的修改,主要几点。
    1. 选项稍微减少一点,3 倍以上的时候,0.5 倍不是很必要。
    2. 减少按钮间距。
    3. 我是前端,我有调整按钮和左侧文字垂直对齐的问题。这里一般会采用垂直居中,或者基线(文字底部)对齐。

    ---

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

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

    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);
    }
        29
    JCZ2MkKb5S8ZX9pq   94 天前
    https://imgur.com/KKq6bVe.png
    因为用了左对齐,感觉可以考虑把背景色去掉,跟文字会更融合一点,不会有一个色块未对齐的感觉。
    之前右对齐有一个色块倒还好。但宽度变化会偏移位置,所以才左对齐了吧。
        30
    JCZ2MkKb5S8ZX9pq   94 天前
    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}";
        31
    tomoya92   91 天前
    @JCZ2MkKb5S8ZX9pq #30 感谢

    这两天又修了个 bug,现在样式我觉得还好,你要是不喜欢,可以自己修改一下
        32
    JCZ2MkKb5S8ZX9pq   91 天前
    @tomoya92 嗯,想起来可以额外写个 stylish,外挂个 css 上去。这样 js 的更新就不影响了。
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   3387 人在线   最高记录 5043   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 26ms · UTC 04:41 · PVG 12:41 · LAX 20:41 · JFK 23:41
    ♥ Do have faith in what you're doing.