查看原文
其他

B站视频播放快捷键控制

码中人 码农真经 2023-12-25
刷V2ex看到一个帖子:为什么国内视频网站快捷键极少或者没有?– V2EX
深有同感!!!
我经常看bilibili.com。大部分视频讲得很慢,经常需要倍数播放,有快捷键的话,会方便很多。
上网找了下,已经有很多这样的快捷键脚本,如:
  • 18 项功能,为网页视频播放添加倍速播放、画中画、截图、进度保存等,全程高能快捷键[油猴脚本] – 小众软件
  • HTML5视频播放器增强脚本
这些脚本都很好,但我并不是很想用。
因为这类脚本有三个问题:
  1. 为了适配多个网站,导致代码量巨大,会把网页拖慢。

  2. 快捷键众多(不是自己设置的)记不住。

  3. 按键冲突,不是自己设置的键,容易与其它设置相冲突

所以,自己写了一个适用于B站的油猴脚本。
原理非常简单,即监听文档的按键弹起事件。
如果相应的按键有对应的方法,就执行方法,一般为触发视频播放控件的click事件。

使用最新ES2021可选链操作符(?.) ,不需要显示判断对应的方法是否存在,使得代码更为简洁。
主要实现的功能(只在chrome中测试):
  • 「B」:弹幕开关
  • 「M」:静音/取消静音
  • 「/」:定位搜索栏
  • 「C」:字幕开关
  • 「K」:暂停播放 / 恢复播放(默认为空格键,但视频播放器没有获得焦点时,空格键默认行为是向下翻页,所以新增加了K键)
  • 「<」与「>」:改变视频播放速度,如:0.5、0.25、正常、1.25、1.5、2
  • 「+」与「-」:同上
  • 「[」与「]」:播放上一集或下一集(有些视频是个播放列表,俗称分P)

  • 「G」:视频点赞(未能实现一键三连的功能,哪位帅气的小伙帮我来实现?)

完整代码如下:
20210605更新,修复倍数播放与上下集切换冲突的bug
// ==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() { $('.bilibili-player-area').classList.add('video-control-show') }
function startOrPause() { $('.bilibili-player-video-btn').click(); }
function buiSwitch() { const buiBtn = $('input[type="checkbox"].bui-switch-input'); // buiBtn.checked = !buiBtn.checked; buiBtn.click(); }
function subtitle() { const subtitleBtn = $('.bilibili-player-iconfont-subtitle'); subtitleBtn.click(); }
function fullScreen() { const fsBtn = $('.bilibili-player-video-web-fullscreen button'); fsBtn.click(); }
function episode(forward){ const currentEpisodeItem = $('.bilibili-player-video-btn-pagelist .bilibili-player-active'); if (forward) { currentEpisodeItem.previousSibling?.click?.(); } else { currentEpisodeItem.nextSibling?.click?.(); } }
function volumnSwitch() { const volumnBtn = $('.bilibili-player-video-btn-volume button'); volumnBtn.click(); }
function searchFocus(){ const searchInput = $('.nav-search-keyword'); searchInput.focus() }
function playSpeed(forward) { const currentSpeedItem = $('.bilibili-player-video-btn-speed .bilibili-player-active'); if (forward) { currentSpeedItem.previousSibling?.click?.(); } else { currentSpeedItem.nextSibling?.click?.(); } }
function nextEpisode(){ episode(true) }
function prevEpisode(){ episode(); }
function fast() { playSpeed(true) }
function slow() { playSpeed(false) }
function like(){ const likeBtn = $('.ops .like'); likeBtn.click(); }
const KEYS_HANDLERS = { 'KeyB': buiSwitch, 'KeyM': volumnSwitch, 'KeyK': startOrPause, 'Comma': slow, 'Period': fast, 'BracketRight':nextEpisode, 'BracketLeft':prevEpisode, 'Equal': fast, 'Minus': slow, 'Slash':searchFocus, 'KeyC': subtitle, 'KeyG':like }
document.addEventListener('keyup', (e) => { console.log(e.code) KEYS_HANDLERS[e.code]?.(); showControlBar(); })
})()

往期推荐

最实用电脑技巧之:列出文件夹和子文件夹中的文件

乔布斯反对第三方硬件《硅谷革命:成就苹果公司的疯狂往事》

使用linux前的13个重要准备工作

小而美的互联网公司37Signals简介

吴军《态度》读书笔记

继续滑动看下一个

您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存