简单脚本实现B站视频快捷键播放

码农真经

2021年04月07日 16:47

收录于文集

共4篇

刷V2ex看到一个帖子：为什么国内视频网站快捷键极少或者没有？ – V2EX

深有同感！！！

我经常看网页链接。大部分视频讲得很慢，经常需要倍数播放，有快捷键的话，会方便很多。

上网找了下，已经有很多这样的快捷键脚本，如：

18 项功能，为网页视频播放添加倍速播放、画中画、截图、进度保存等，全程高能快捷键[油猴脚本] – 小众软件
HTML5视频播放器增强脚本

这些脚本都很好，但我并不是很想用，因为这类脚本有三个问题：

为了适配多个网站，导致代码量巨大，会把网页拖慢。
快捷键众多(不是自己设置的)记不住。
按键冲突，不是自己设置的键，容易与其它设置相冲突

所以，我自己写一个适用于B站的油猴脚本。

原理非常简单，即监听文档的按键弹起事件。如果相应的按键有对应的方法，就执行方法，一般为触发视频播放控件的click事件。

使用最新ES2021可选链操作符 – JavaScript | MDN，不需要再显示判断对应的方法是否存在，使得代码更为简洁。

主要实现的功能（只在chrome中测试）：

「B」：弹幕开关
「M」：静音/取消静音
「/」：定位搜索栏
「C」：字幕开关
「K」：暂停播放 / 恢复播放（默认为空格键，但视频播放器没有获得焦点时，空格键默认行为是向下翻页，所以新增加了K键）
「<」与「>」：改变视频播放速度，如： 0.5、0.25、正常、1.25、1.5、2
「+」与「-」：同上
「G」：视频点赞（未能实现一键三连的功能，哪位帅气的小伙帮我来实现？）

完整代码如下：

 代码块
JavaScript
自动换行
复制代码
// ==UserScript==
// @name         B站视频播放快捷键
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  B站视频快捷键播放
// @author       码中人 http://www.mzh.ren
// @match        *://*.bilibili.com/*
// @grant        none
// ==/UserScript==
(function () {
    
    let $ = document.querySelector.bind(document);

    function showControlBar() {
        $(&#39;.bilibili-player-area&#39;).classList.add(&#39;video-control-show&#39;)
    }

    function startOrPause() {
        $(&#39;.bilibili-player-video-btn&#39;).click();
    }

    function buiSwitch() {
        const buiBtn = $(&#39;input[type=&#34;checkbox&#34;].bui-switch-input&#39;);
        buiBtn.checked = !buiBtn.checked;
    }

    function subtitle() {
        const subtitleBtn = $(&#39;.bilibili-player-iconfont-subtitle&#39;);
        subtitleBtn.click();
    }

    function fullScreen() {
        const fsBtn = $(&#39;.bilibili-player-video-web-fullscreen button&#39;);
        fsBtn.click();
    }

    function volumnSwitch() {
        const volumnBtn = $(&#39;.bilibili-player-video-btn-volume button&#39;);
        volumnBtn.click();
    }

    function searchFocus(){
        const searchInput = $(&#39;.nav-search-keyword&#39;);
        searchInput.focus()
    }

    function playSpeed(forward) {
        const currentSpeedItem = $(&#39;.bilibili-player-active&#39;);
        if (forward) {
            currentSpeedItem.previousSibling?.click?.();
        } else {
            currentSpeedItem.nextSibling?.click?.();
        }
    }

    function fast() {
        playSpeed(true)
    }

    function slow() {
        playSpeed(false)
    }

    function like(){
        const likeBtn = $(&#39;.ops .like&#39;);
        likeBtn.click();
    }

    const KEYS_HANDLERS = {
        &#39;KeyB&#39;: buiSwitch,
        &#39;KeyM&#39;: volumnSwitch,
        &#39;KeyK&#39;: startOrPause,
        &#39;Comma&#39;: slow,
        &#39;Period&#39;: fast,
        &#39;Equal&#39;: fast,
        &#39;Minus&#39;: slow,
        &#39;Slash&#39;:searchFocus,
        &#39;KeyC&#39;: subtitle,
        &#39;KeyG&#39;:like
    }

    document.addEventListener(&#39;keyup&#39;, (e) =&gt; {
        console.log(e.code)
        KEYS_HANDLERS[e.code]?.();
        showControlBar();
    })

})()

复制成功

视频播放

本文为我原创，未经授权禁止转载

cv10687497

分享至

投诉或建议