用快捷键控制视频播放

返回 前端开发入门指南 系列

如果你有通过视频学习的经历,
你应该知道快进快退暂停调速等视频控制功能有多重要。

# 我的快捷键

我在用的一组桌面快捷键,
通过覆盖键盘左侧,实现方便的(左手)单手控制。

(注意到 FrontendMastersQ 键是切换视频质量,有冲突)

  • 通用
    • Q:快退 3 秒
    • E:快进 3 秒
    • Z:播放速度 -0.25
    • X:播放速度 +0.25
    • V:在(当前播放速度,1)之间切换
  • 网页 Only(YouTube 自带)
    • T:切换网页全屏
    • C:切换字幕/弹幕
  • 本地 Only
    • PageUp:上一文件
    • PageDown:下一文件
    • Shift+:快进 30 秒
    • Shift+:快退 30 秒

# 工具

# Video Speed Controller

Chrome 插件:Video Speed Controller

# User JavaScript and CSS

Chrome 插件:User JavaScript and CSS

自定义脚本注入插件

我在 BiliBili 的配置,实现类似 YouTube 的观看体验。

{
  let maskShown = true;
  document.addEventListener('keypress', (e) => {
    if (e.key === 't') {
      $('.bilibili-player-video-web-fullscreen').click();
    }
    if (e.key === 'c') {
      // * use opacity but not disable the feature
      maskShown = !maskShown;
      $('.bilibili-player-video-danmaku').css('opacity', maskShown ? 1 : 0);
      $('.bilibili-player-video-danmaku-switch').css('opacity', maskShown ? 1 : 0.1);
    }
  });
}

# IINA/PotPlayer

都支持快捷键改键