☰

Video Speed Control

Adds a video speed control to the top right corner of the website if a video is present

  1. // ==UserScript==
  2. // @name         Video Speed Control
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.01
  5. // @description  Adds a video speed control to the top right corner of the website if a video is present
  6. // @author       mboerr
  7. // @match        *
  8. // @icon         https://www.google.com/s2/favicons?domain=youtube.com
  9. // @grant        none
  10. // @license MIT 
  11. // ==/UserScript==
  12.  
  13. (function() {
  14.     'use strict';
  15.  
  16.     // Create the slider element
  17.     var slider = document.createElement("INPUT");
  18.     const maxSpeed = 6;
  19.     slider.setAttribute("type", "range");
  20.     slider.setAttribute("min", "1");
  21.     slider.setAttribute("max", maxSpeed);
  22.     slider.setAttribute("value", "1");
  23.     slider.setAttribute("step", "0.5");
  24.     slider.setAttribute("list", "tickmarks");
  25.     slider.style.cssText = "width: 200px;z-index:99999";
  26.  
  27.     // Create the datalist element
  28.     var datalist = document.createElement("DATALIST");
  29.     datalist.setAttribute("id", "tickmarks");
  30.     datalist.style.cssText = "display: flex; flex-direction: column; justify-content: space-between; writing-mode: vertical-lr; width: 200px;";
  31.  
  32.     // Add all integers from 1 to maxSpeed to the datalist
  33.     for (var i = 1; i <= maxSpeed; i++) {
  34.         var option = document.createElement("OPTION");
  35.         option.setAttribute("value", i);
  36.         option.innerHTML = i + "x"; // Add a label to the option
  37.         datalist.style.cssText = "padding:0;"
  38.         datalist.appendChild(option);
  39.     }
  40.  
  41.     // Create the div element
  42.     var div = document.createElement("DIV");
  43.     div.style.cssText = "position: fixed; top: 50px; right: 10px; z-index:9999; background-color:#ffffff80; border-radius:8px;";
  44.  
  45.     // Add the datalist and slider to the div
  46.     div.appendChild(datalist);
  47.     div.appendChild(slider);
  48.  
  49.     // Add the div to the page
  50.     document.body.appendChild(div);
  51.  
  52.     // Add an event listener for when the slider value changes
  53.     slider.addEventListener("input", function() {
  54.         // Change playback speed of all videos
  55.         const videos = document.querySelectorAll('video');
  56.         for (let video of videos) {
  57.             video.playbackRate = this.value;
  58.         }
  59.         //document.getElementsByTagName("video")[0].playbackRate = this.value;
  60.     });
  61. })();