☰

Youtube Advanced Speed Controller

Allows you to play youtube videos from 0 to 16 times normal speed

  1. // ==UserScript==
  2. // @name         Youtube Advanced Speed Controller
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.1
  5. // @description  Allows you to play youtube videos from 0 to 16 times normal speed
  6. // @author       Ehren Julien-Neitzert
  7. // @match        https://www.youtube.com/*
  8. // @grant        none
  9. // ==/UserScript==
  10.  
  11. (function() {
  12.     'use strict';
  13.  
  14.     //sets the rate of a youtube video
  15.     function setRate(n) {
  16.         document.getElementsByClassName("html5-video-container")[0]
  17.         .getElementsByClassName("video-stream html5-main-video")[0]
  18.         .playbackRate = n;
  19.     }
  20.  
  21.     //gets the current rate of a youtube video
  22.     function getRate() {
  23.         return document.getElementsByClassName("html5-video-container")[0]
  24.             .getElementsByClassName("video-stream html5-main-video")[0]
  25.             .playbackRate;
  26.     }
  27.  
  28.     //determines if theres a video bar to inject onto
  29.     function hasVideo() {
  30.         return document.getElementsByClassName("ytp-right-controls").length != 0;
  31.     }
  32.  
  33.  
  34.     //injects the speed controller
  35.     function injectController() {
  36.  
  37.         //create speed controller
  38.         var i = document.createElement('input');
  39.         i.style = "width: 30%; height: 70%; position: relative; bottom: 37%; background-Color: transparent; color: white; border-Color: transparent;";
  40.         i.id = 'spdctrl';
  41.         i.title = 'Playback Rate';
  42.         i.style.fontSize = '100%';
  43.         i.type = 'number';
  44.         i.value = getRate();
  45.         i.step = 0.1;
  46.         i.max = 16;
  47.         i.min = 0;
  48.         i.onchange = function() {
  49.             var s = i.value;
  50.             setRate(s);
  51.         };
  52.  
  53.         //make the standard speed controls change the new speed controller
  54.         document.getElementsByTagName('video')[0].onratechange = function() {
  55.             if (document.activeElement != i) { //only change i's value if its not being focused (ie, just clicked on)
  56.                 i.value = getRate();
  57.             }
  58.         };
  59.  
  60.         //put speed controller in youtube bar
  61.         toolbar = document.getElementsByClassName("ytp-right-controls")[0];
  62.         toolbar.prepend(i);
  63.  
  64.     }
  65.  
  66.     //every fraction of a second check if the controller's injected and if theres a video
  67.     //I have to do this because I don't think theres an easy way to detect the crazy history rewrite stuff that they do to give the illusion of you loading a page when you're actually not
  68.     window.setInterval(function(){
  69.         var controller = document.getElementById('spdctrl');
  70.         if (controller === null && hasVideo()) {
  71.             injectController();
  72.         }
  73.     }, 300);
  74.  
  75. })();