☰

html5 video speed controller (vlc like)

Simple html5 video speed control with '-', '+', and '=' (vlc like). '-': decrease by 0.1, '+': increase by 0.1, '=': back to 1.0x

  1. // ==UserScript==
  2. // @name        html5 video speed controller (vlc like)
  3. // @namespace   github.com/sky-bro
  4. // @version     1.0.2
  5. // @description Simple html5 video speed control with '-', '+', and '=' (vlc like). '-': decrease by 0.1, '+': increase by 0.1, '=': back to 1.0x
  6. // @author      https://sky-bro.github.io
  7. // @match       https://www.youtube.com/*
  8. // @match       https://www.bilibili.com/*
  9. // @match       *://*.zhihuishu.com/*
  10. // @grant       none
  11. // ==/UserScript==
  12.  
  13. (function() {
  14.     'use strict';
  15.     function setPlaybackRate(player, rate) {
  16.         if (rate < 0.1) rate = 0.1;
  17.         else if (rate > 10) rate = 10;
  18.         player.playbackRate = rate;
  19.         console.log("playing in %sx", (rate).toFixed(1));
  20.     }
  21.  
  22.     window.addEventListener('keypress', function(event) {
  23.         var player = document.querySelector("video");
  24.         // console.log(event);
  25.         var curRate = Number(player.playbackRate);
  26.         // vlc actually uses '[' and ']', but they are used by vimium
  27.         if (event.key == "-") {
  28.             console.log("- pressed");
  29.             setPlaybackRate(player, curRate - 0.1);
  30.         } else if(event.key == "+") {
  31.             console.log("+ pressed");
  32.             setPlaybackRate(player, curRate + 0.1);
  33.         } else if(event.key == "=") {
  34.             console.log("= pressed");
  35.             setPlaybackRate(player, 1);
  36.         }
  37.     });
  38. })();