video-element-rate-controller

add keyboard shortcuts that will increase/decrease the playback rate for video elements.

  1. // ==UserScript==
  2. // @name video-element-rate-controller
  3. // @namespace https://github.com/mirnhoj/video-element-playbackrate-setter
  4. // @version 0.1
  5. // @description add keyboard shortcuts that will increase/decrease the playback rate for video elements.
  6. // @include http*://*.youtube.com/*
  7. // @include http*://*.gfycat.com/*
  8. // @include http*://*.vimeo.com/*
  9. // @include https://www.facebook.com/video.php*
  10. // @include https://www.facebook.com/*/videos/*
  11. // @include https://www.kickstarter.com/*
  12. // @grant none
  13. // ==/UserScript==
  14. //
  15. // if you want to extend the functionality of this script to other sites
  16. // besides youtube, add additional @include keys to the metadata block.
  17. //
  18. // if you want to change the default playback rate from 1x, change the line
  19. // "var currentPlaybackRate = 1;" to equal something other than 1, like 1.3 to
  20. // have all videos start playing at an increased speed, or 0.7 to have all
  21. // videos start playing at a decreased speed.
  22. //
  23. // if you want change the granularity of the playback rate adjustment, change
  24. // the line "var speedStep = 0.1;" to equal something other than 0.1, like 0.01
  25. // for more granular adjustments, or 0.25 for less granular adjustments.
  26.  
  27.  
  28. var currentPlaybackRate = 1; // default playback rate.
  29. var speedStep = 0.1;
  30.  
  31.  
  32. var infobox = document.createElement("h1");
  33. infobox.setAttribute("id", "playbackrate-indicator");
  34. infobox.style.position = "absolute";
  35. infobox.style.top = "10%";
  36. infobox.style.right = "10%";
  37. infobox.style.color = "rgba(255, 0, 0, 1)";
  38. infobox.style.zIndex = "99999"; // ensures that it shows above other elements.
  39. infobox.style.visibility = "hidden";
  40. infobox.style.marginTop = "3%";
  41.  
  42.  
  43. var timeoutID;
  44.  
  45.  
  46. function setPlaybackRate(rate, showInfobox) {
  47. // fix floating point errors like 1.1 + 0.1 = 1.2000000000000002.
  48. rate = Math.round(rate * (1 / speedStep)) / (1 / speedStep);
  49. // grab the video elements and set their playback rate.
  50. var videoElement = document.getElementsByTagName("video")[0];
  51. videoElement.playbackRate = rate;
  52. infobox.innerHTML = rate + "x";
  53. // add infobox to dom if it doesn't already exist.
  54. if (videoElement && !document.getElementById("playbackrate-indicator")) {
  55. videoElement.parentElement.appendChild(infobox);
  56. }
  57. // show infobox and update rate indicator.
  58. if (showInfobox) {
  59. infobox.style.visibility = "visible";
  60. // clear out any previous timers and have the infobox hide after 3 seconds.
  61. window.clearTimeout(timeoutID);
  62. timeoutID = window.setTimeout(function() {
  63. infobox.style.visibility = "hidden";
  64. }, 3000);
  65. }
  66. }
  67.  
  68.  
  69. document.addEventListener('DOMContentLoaded', function() {
  70. setPlaybackRate(currentPlaybackRate, true);
  71. });
  72.  
  73.  
  74. // youtube videos don't always load on the DOMContentLoaded event :-/
  75. document.addEventListener('DOMNodeInserted', function() {
  76. setPlaybackRate(currentPlaybackRate, false);
  77. });
  78.  
  79.  
  80. // mimic vlc keyboard shortcuts
  81. window.addEventListener('keydown', function(event) {
  82. var keycode = event.charCode || event.keyCode;
  83.  
  84. // decrease playback rate if '[' is pressed
  85. if (keycode === 91 || keycode === 123 || keycode === 219) {
  86. currentPlaybackRate -= speedStep;
  87. }
  88.  
  89. // increase playback rate if ']' is pressed
  90. if (keycode === 93 || keycode === 125 || keycode === 221) {
  91. currentPlaybackRate += speedStep;
  92. }
  93.  
  94. // need to set playback rate for all keydown events since it seems like the
  95. // standard youtube keyboard shortcuts--like the arrow keys to skip forward
  96. // and backwards--are set to reset the playback rate to 1.
  97. setPlaybackRate(currentPlaybackRate, true);
  98. });

QingJ © 2025

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