☰

HTML5 Audio/Video Keyboard Shortcuts With OSD

Adds keyboard shortcuts for controlling HTML5 media player (audio/video) with OSD support. Seek media to 0%, 5%, 10%, ..., or 95%. Rewind and fast fordward media by 30 seconds, 1 minute, and 5 minutes. Change media speed even beyond YouTube's speed limit. Change audio volume to 20%, 40%, 60%, 80%, or 100%. Change video aspect ratio for TV and letterbox content (for widescreen monitors). This script is designed for US keyboards. Non US keyboard users will need to edit keys in the script.

当前为 2019-10-29 提交的版本，查看 最新版本。

// ==UserScript==
// @name        HTML5 Audio/Video Keyboard Shortcuts With OSD
// @namespace   https://gf.qytechs.cn/en/users/85671-jcunews
// @version     1.0.4
// @license     AGPLv3
// @author      jcunews
// @description Adds keyboard shortcuts for controlling HTML5 media player (audio/video) with OSD support. Seek media to 0%, 5%, 10%, ..., or 95%. Rewind and fast fordward media by 30 seconds, 1 minute, and 5 minutes. Change media speed even beyond YouTube's speed limit. Change audio volume to 20%, 40%, 60%, 80%, or 100%. Change video aspect ratio for TV and letterbox content (for widescreen monitors). This script is designed for US keyboards. Non US keyboard users will need to edit keys in the script.
// @match       *://*/*
// @grant       none
// @run-at      document-start
// ==/UserScript==

/*
Keyboard Shortcuts:

SHIFT+LEFT         = Rewind media by 30 seconds
SHIFT+RIGHT        = Fast forward media by 30 seconds
CTRL+LEFT          = Rewind media by 1 minute
CTRL+RIGHT         = Fast forward media by 1 minute
CTRL+SHIFT+LEFT    = Rewind media by 5 minutes
CTRL+SHIFT+RIGHT   = Fast forward media by 5 minutes
CTRL+/             = Fast forward media by 1.5 minutes
0 to 9             = Seek media to 0%, 10%, 20%,...90%
SHIFT+0 to SHIFT+9 = Seek media to 5%, 15%, 25%,...95%
CTRL+1 to CTRL+5   = Change audio volume to 20%, 40%, 60$, 80%, 100%
CTRL+[             = Decrease media speed by 0.2x (by default)
CTRL+]             = Increase media speed by 0.2x (by default)
CTRL+;             = Reset media speed
CTRL+'             = Change custom media speed
CTRL+\             = Change unit of media speed increment/decrement
CTRL+7             = Change video aspect ratio for letterbox content. Fix 4:3 letterbox content stretched to widescreen format.
CTRL+8             = Change video aspect ratio for TV content. Fix 4:3 TV content stretched to widescreen format.
CTRL+9             = Reset video aspect ratio
*/

((eleOSD, osdTimer) => {

  /*
  Notes:
  - In YouTube, if the video speed is below 0.25x or above 2x, the YouTube setting display will be capped to 0.1x or 2x.
  - Web browser video speeds: Firefox = 0.25 to 5.0; Chrome = 0.1 to 16.0.
  */

  //=== CONFIGURATION BEGIN ===

  //Video speed increment/decrement unit.
  var incrementUnit = 0.2;

  //Duration (in milliseconds) to display On Screen Display (OSD) when changing playback rate. Set to zero or less to disable.
  var osdTimeout = 3000;

  //keyboard shortcuts.
  //key = key name. string type if single shortcut, or array of string if multiple shortcut (for single function multiple shortcuts).
  //modifiers = any combinations of "C", "S", and "A", for Ctrl, Shift, and Alt keys.
  var keys = [
    { //ctrl+space: seek media to next frame (only when paused. firefox only)
      key: " ", modifiers: "C",
      func: (key, ele) => ele.seekToNextFrame && ele.seekToNextFrame()
    },
    { //0 to 9: seek media to 0%,10%,20%,...90%
      key: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"], modifiers: "",
      func: (ele, key, keyIndex) => ele.currentTime = keyIndex / 10 * ele.duration
    },
    { //shift+0 to shift+9: seek media to 5%,15%,25%,...95%
      key: [")", "!", "@", "#", "$", "%", "^", "&", "*", "("], modifiers: "S",
      func: (ele, key, keyIndex) => ele.currentTime = (keyIndex + 0.5) / 10 * ele.duration
    },
    { //ctrl+1 to ctrl+5: set audio volume to 20%,40%,60%,80%,100%
      key: ["1", "2", "3", "4", "5"], modifiers: "C",
      func: (ele, key, keyIndex)  => updAudioVolume(ele, (parseInt(key) * 2) / 10)
    },
    { //shift+left: rewind media by 30 seconds
      key: "ArrowLeft", modifiers: "S",
      func: (ele, key) => ele.currentTime -= 30
    },
    { //ctrl+left: rewind media by 1 minute
      key: "ArrowLeft", modifiers: "C",
      func: (ele, key) => ele.currentTime -= 60
    },
    { //ctrl+shift+left: rewind media by 5 minutes
      key: "ArrowLeft", modifiers: "CS",
      func: (ele, key) => ele.currentTime -= 300
    },
    { //shift+right: fast forward media by 30 seconds
      key: "ArrowRight", modifiers: "S",
      func: (ele, key) => ele.currentTime += 30
    },
    { //ctrl+right: fast forward media by 1 minute
      key: "ArrowRight", modifiers: "C",
      func: (ele, key) => ele.currentTime += 60
    },
    { //ctrl+shift+right: fast forward media by 5 minutes
      key: "ArrowRight", modifiers: "CS",
      func: (ele, key) => ele.currentTime += 300
    },
    { //ctrl+/: fast forward media by 1.5 minutes
      key: "/", modifiers: "CS",
      func: (ele, key) => ele.currentTime += 90
    },
    { //ctrl+[: decrease media speed
      key: "[", modifiers: "C",
      func: (ele, key) => {
        key = ele.playbackRate - incrementUnit;
        if (key < 0.1) {
          key = 0.1;
        } else if ((key < 1) && (ele.playbackRate > 1)) key = 1;
        updVideoSpeed(ele, key);
      }
    },
    { //ctrl+]: increase media speed
      key: "]", modifiers: "C",
      func: (ele, key) => {
        key = ele.playbackRate + incrementUnit;
        if (key > 16) {
          key = 16;
        } else if ((key > 1) && (ele.playbackRate < 1)) key = 1;
        updVideoSpeed(ele, key);
      }
    },
    { //ctrl+;: reset media speed to 1x
      key: ";", modifiers: "C",
      func: (ele, key) => updVideoSpeed(ele, 1)
    },
    { //ctrl+': use custom media speed
      key: "'", modifiers: "C",
      func: (ele, key) => {
        if ((key = prompt("Enter media speed from 0.1 to 16 (inclusive).\ne.g.: 1 = Normal, 0.5 = Half, 2 = Double, 3 = Triple, etc.", ele.playbackRate)) === null) return;
        if (isNaN(key = parseFloat(key.trim()))) {
          alert("Input must be a number.");
          return;
        }
        updVideoSpeed(ele, (key = parseFloat(key.toFixed(1))) < 0.1 ? 0.1 : (key > 16 ? 16 : key));
      }
    },
    { //ctrl+\: change unit of media speed increment/decrement
      key: "\\", modifiers: "C",
      func: (ele, key) => {
        if ((key = prompt("Enter unit of media speed increment/decrement from 0.1 to 4 (inclusive).", incrementUnit)) === null) return;
        if (!isNaN(key = parseFloat(key.trim()))) {
          incrementUnit = (key = parseFloat(key.toFixed(1))) < 0.1 ? 0.1 : (key > 4 ? 4 : key);
        } else alert("Input must be a number.");
      }
    },
    { //ctrl+7: Letterbox aspect ratio
      key: "7", modifiers: "C", videoOnly: true,
      func: (ele, key) => updVideoAspect("scaleY(1.3333)", "Letterbox")
    },
    { //ctrl+8: TV aspect ratio
      key: "8", modifiers: "C", videoOnly: true,
      func: (ele, key) => updVideoAspect("scaleX(0.75)", "TV")
    },
    { //ctrl+9: reset video aspect ratio
      key: "9", modifiers: "C", videoOnly: true,
      func: (ele, key) => updVideoAspect("", "Reset")
    }
  ];
  keys.forEach((k, s, m) => {
    s = k.modifiers.toUpperCase();
    k.modifiers = {ctrl: s.includes("C"), shift: s.includes("S"), alt: s.includes("A")};
  });

  //=== CONFIGURATION END ===

  function showOSD(s) {
    if (osdTimeout < 0) return;
    if (eleOSD) {
      eleOSD.textContent = s;
    } else {
      eleOSD = document.createElement("DIV");
      eleOSD.style.cssText = "position:fixed;z-index:999999999;right:.5rem;bottom:.5rem;margin:0;padding:.2rem .5rem .1rem .5rem;width:auto;height:auto;font:normal 16pt/normal sans-serif;background:#444;color:#fff";
      eleOSD.textContent = s;
      document.body.appendChild(eleOSD);
    }
    clearTimeout(osdTimer);
    osdTimer = setTimeout(() => {
      eleOSD.remove();
      eleOSD = null;
    }, osdTimeout);
  }

  function stopEvent(ev) {
    ev.preventDefault();
    ev.stopPropagation();
    ev.stopImmediatePropagation();
  }

  function updVideoSpeed(ele, spd, e) {
    if ((location.hostname === "www.youtube.com") && (e = ele.parentNode.parentNode).setPlaybackRate && (spd >= 0.25) && (spd <= 2)) {
      e.setPlaybackRate(spd = parseFloat(spd.toFixed(1)));
    } else ele.playbackRate = spd = parseFloat(spd.toFixed(1));
    showOSD("Speed " + spd + "x");
  }

  function updVideoAspect(asp, label, s) {
    if (!(s = document.getElementById("vidAspOvr"))) document.body.appendChild(s = document.createElement("STYLE")).id = "vidAspOvr";
    s.innerHTML = asp ? `video{transform:${asp}!important}` : "";
    showOSD("Aspect " + label);
  }

  function updAudioVolume(ele, vol) {
    if ((location.hostname === "www.youtube.com") && (e = ele.parentNode.parentNode).setVolume) {
      e.setVolume(vol * 100);
    } else ele.volume = vol;
    showOSD("Audio " + (vol * 100) + "%");
  }

  incrementUnit = parseFloat((incrementUnit < 0.1 ? 0.1 : (incrementUnit > 1 ? 1 : incrementUnit)).toFixed(1));
  addEventListener("keydown", function(ev, ele) {
    if ((!(ele = document.activeElement) || !((ele.contentEditable === "true") || ["BUTTON", "INPUT", "SELECT", "TEXTAREA"].includes(ele.tagName))) && (ele = document.querySelector("video,audio"))) {
      keys.some(k => {
        if (
          ((Array.isArray(k.key) && k.key.includes(ev.key)) || (!Array.isArray(k.key) && (k.key === ev.key))) &&
          (k.modifiers.ctrl === ev.ctrlKey) && (k.modifiers.shift === ev.shiftKey) && (k.modifiers.alt === ev.altKey) &&
          (!k.videoOnly || (ele.tagName === "VIDEO"))
        ) {
          stopEvent(ev);
          k.func(ele, ev.key, Array.isArray(k.key) ? k.key.indexOf(ev.key) : null);
          return true;
        }
      });
    }
  }, true);

})();

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址