☰

YouTube Speed-Adjusted Time Display

Shows speed-adjusted time for YouTube videos

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

  1. // ==UserScript==
  2. // @name         YouTube Speed-Adjusted Time Display
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.1
  5. // @description  Shows speed-adjusted time for YouTube videos
  6. // @author       kavinned
  7. // @match        https://www.youtube.com/*
  8. // @grant        none
  9. // @icon         https://www.google.com/s2/favicons?sz=64&domain=YouTube.com
  10. // @license      MIT
  11. // ==/UserScript==
  12. (function() {
  13.     'use strict';
  14.     function updateTimeDisplay() {
  15.         const video = document.querySelector('video');
  16.         if (!video) return;
  17.         const currentTimeDisplay = document.querySelector('.ytp-time-current');
  18.         const durationDisplay = document.querySelector('.ytp-time-duration');
  19.         const remainingTimeDisplay = document.querySelector('.speed-adjusted-time');
  20.         if (!currentTimeDisplay || !durationDisplay || !remainingTimeDisplay) return;
  21.  
  22.         const currentTime = video.currentTime;
  23.         const duration = video.duration;
  24.         const playbackRate = video.playbackRate;
  25.  
  26.         const adjustedCurrentTime = currentTime / playbackRate;
  27.         const adjustedDuration = duration / playbackRate;
  28.         const remainingTime = adjustedDuration - adjustedCurrentTime;
  29.  
  30.         function formatTime(seconds) {
  31.             const hours = Math.floor(seconds / 3600);
  32.             const minutes = Math.floor((seconds % 3600) / 60);
  33.             const secs = Math.floor(seconds % 60);
  34.             if (hours > 0) {
  35.                 return `${hours}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
  36.             } else {
  37.                 return `${minutes}:${secs.toString().padStart(2, '0')}`;
  38.             }
  39.         }
  40.  
  41.         currentTimeDisplay.textContent = formatTime(adjustedCurrentTime);
  42.         durationDisplay.textContent = formatTime(adjustedDuration);
  43.         remainingTimeDisplay.textContent = `(-${formatTime(remainingTime)})`;
  44.     }
  45.  
  46.     function createSpeedTimeDisplay() {
  47.         const timeContainer = document.querySelector('.ytp-time-wrapper');
  48.         if (!timeContainer || document.querySelector('.speed-adjusted-time')) return;
  49.  
  50.         const speedTimeDiv = document.createElement('div');
  51.         speedTimeDiv.className = 'speed-adjusted-time ytp-time-display';
  52.         speedTimeDiv.style.color = 'inherit';
  53.         speedTimeDiv.style.fontSize = 'inherit';
  54.  
  55.         timeContainer.append(speedTimeDiv);
  56.     }
  57.  
  58.     const observer = new MutationObserver((mutations) => {
  59.         if (document.querySelector('video')) {
  60.             createSpeedTimeDisplay();
  61.             updateTimeDisplay();
  62.         }
  63.     });
  64.  
  65.     observer.observe(document.body, {
  66.         childList: true,
  67.         subtree: true
  68.     });
  69.  
  70.     setInterval(updateTimeDisplay, 1000);
  71.     document.addEventListener('ratechange', updateTimeDisplay, true);
  72. })();