☰

HTML5 Video Player Speed Control

Control the playback speed of HTML5 video players with keyboard shortcuts.

当前为 2024-06-21 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         HTML5 Video Player Speed Control
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.1
  5. // @description  Control the playback speed of HTML5 video players with keyboard shortcuts.
  6. // @author       JJJ
  7. // @match        *://*/*
  8. // @icon         https://logos-download.com/wp-content/uploads/2017/07/HTML5_logo.png
  9. // @grant        none
  10. // @license      MIT
  11. // ==/UserScript==
  12.  
  13. (function () {
  14.     'use strict';
  15.     // Get the video element
  16.     const video = document.querySelector('video');
  17.  
  18.     // Set the initial playback rate
  19.     let playbackRate = 1.0;
  20.     let previousPlaybackRate = 1.0;
  21.  
  22.     // Create a speed indicator element
  23.     const speedIndicator = document.createElement('div');
  24.     speedIndicator.style.position = 'absolute';
  25.     speedIndicator.style.top = '10px';
  26.     speedIndicator.style.left = '10px';
  27.     speedIndicator.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
  28.     speedIndicator.style.color = '#fff';
  29.     speedIndicator.style.padding = '5px';
  30.     speedIndicator.style.fontFamily = 'Arial, sans-serif';
  31.     speedIndicator.style.fontSize = '12px';
  32.     speedIndicator.style.zIndex = '9999';
  33.  
  34.     // Function to update the speed indicator
  35.     function updateSpeedIndicator() {
  36.         speedIndicator.textContent = `Speed: ${playbackRate.toFixed(1)}x`;
  37.     }
  38.  
  39.     // Function to update the speed indicator position
  40.     function updateSpeedIndicatorPosition() {
  41.         if (video.offsetWidth === window.innerWidth && video.offsetHeight === window.innerHeight) {
  42.             // Video is in fullscreen
  43.             speedIndicator.style.position = 'fixed';
  44.         } else {
  45.             // Video is not in fullscreen
  46.             speedIndicator.style.position = 'absolute';
  47.         }
  48.     }
  49.  
  50.     // Update the speed indicator position whenever the window is resized
  51.     window.addEventListener('resize', updateSpeedIndicatorPosition);
  52.  
  53.     // Update the speed indicator position initially
  54.     updateSpeedIndicatorPosition();
  55.  
  56.     // Function to increase the playback rate by 0.1
  57.     function speedUpVideo() {
  58.         playbackRate += 0.1;
  59.         video.playbackRate = playbackRate;
  60.         updateSpeedIndicator();
  61.     }
  62.  
  63.     // Function to decrease the playback rate by 0.1
  64.     function slowDownVideo() {
  65.         playbackRate -= 0.1;
  66.         video.playbackRate = playbackRate;
  67.         updateSpeedIndicator();
  68.     }
  69.  
  70.     // Function to set the playback rate to 1.5x
  71.     function setFastSpeed() {
  72.         playbackRate = 1.5;
  73.         video.playbackRate = playbackRate;
  74.         updateSpeedIndicator();
  75.     }
  76.  
  77.     // Function to set the playback rate to 1.8x
  78.     function setFasterSpeed() {
  79.         playbackRate = 1.8;
  80.         video.playbackRate = playbackRate;
  81.         updateSpeedIndicator();
  82.     }
  83.  
  84.     // Function to reset the playback rate to normal
  85.     function resetSpeed() {
  86.         if (playbackRate !== 1.0) {
  87.             previousPlaybackRate = playbackRate;
  88.             playbackRate = 1.0;
  89.             video.playbackRate = playbackRate;
  90.             updateSpeedIndicator();
  91.         } else {
  92.             playbackRate = previousPlaybackRate;
  93.             video.playbackRate = playbackRate;
  94.             updateSpeedIndicator();
  95.         }
  96.     }
  97.  
  98.     // Function to toggle the visibility of the speed indicator
  99.     function toggleSpeedIndicator() {
  100.         speedIndicator.style.display = speedIndicator.style.display === 'none' ? 'block' : 'none';
  101.     }
  102.  
  103.     // Append the speed indicator element to the video container
  104.     const videoContainer = video.parentElement;
  105.     videoContainer.style.position = 'relative';
  106.     videoContainer.appendChild(speedIndicator);
  107.  
  108.     // Update the speed indicator with the initial playback rate
  109.     updateSpeedIndicator();
  110.  
  111.     // Event listener for key presses
  112.     document.addEventListener('keydown', (event) => {
  113.         if (event.key === 'd') {
  114.             speedUpVideo();
  115.         } else if (event.key === 's') {
  116.             slowDownVideo();
  117.         } else if (event.key === 'g') {
  118.             setFastSpeed();
  119.         } else if (event.key === 'h') {
  120.             setFasterSpeed();
  121.         } else if (event.key === 'r') {
  122.             resetSpeed();
  123.         } else if (event.key === 'v') {
  124.             toggleSpeedIndicator();
  125.         }
  126.     });
  127. })();