☰

YouTube - 剩余时间指示器

在视频时长旁边显示YouTube视频的剩余时长，考虑播放速度。

当前为 2025-05-15 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name                          YouTube - Remaining Time Indicator
  3. // @name:fr                       YouTube - Indicateur du temps restant
  4. // @name:es                       YouTube - Indicador de tiempo restante
  5. // @name:de                       YouTube - Anzeige der verbleibenden Zeit
  6. // @name:it                       YouTube - Indicatore del tempo rimanente
  7. // @name:zh-CN                    YouTube - 剩余时间指示器
  8. // @namespace                     https://gist.github.com/4lrick/cf14cf267684f06c1b7bc559ddf2b943
  9. // @version                       2.0
  10. // @description                   Displays the remaining duration of a YouTube video next to the video duration, taking into account the playback rate.
  11. // @description:fr                Affiche la durée restante d'une vidéo YouTube à côté de la durée de la vidéo, en tenant compte de la vitesse de lecture.
  12. // @description:es                Muestra la duración restante de un video de YouTube junto a la duración del video, teniendo en cuenta la velocidad de reproducción.
  13. // @description:de                Zeigt die verbleibende Dauer eines YouTube-Videos neben der Videodauer an und berücksichtigt dabei die Wiedergabegeschwindigkeit.
  14. // @description:it                Mostra la durata rimanente di un video di YouTube accanto alla durata del video, tenendo conto della velocità di riproduzione.
  15. // @description:zh-CN             在视频时长旁边显示YouTube视频的剩余时长，考虑播放速度。
  16. // @author                        4lrick
  17. // @match                         https://www.youtube.com/*
  18. // @icon                          https://www.google.com/s2/favicons?sz=64&domain=youtube.com
  19. // @grant                         none
  20. // @license                       GPL-3.0-only
  21. // ==/UserScript==
  22.  
  23. (function() {
  24.     'use strict';
  25.     let timeDisplay;
  26.     let lastPlaybackRate = null;
  27.     let lastRenderedText = '';
  28.     let lastCurrentTime = null;
  29.  
  30.     function createTimeDisplayElement() {
  31.         const timeDisplayElement = document.createElement('span');
  32.  
  33.         timeDisplayElement.style.display = 'inline-block';
  34.         timeDisplayElement.style.marginLeft = '10px';
  35.         timeDisplayElement.style.color = '#ddd';
  36.  
  37.         return timeDisplayElement;
  38.     }
  39.  
  40.     function displayRemainingTime() {
  41.         const videoElement = document.querySelector('video');
  42.         const isLive = document.querySelector('.ytp-time-display')?.classList.contains('ytp-live');
  43.         const miniplayerUI = document.querySelector('.ytp-miniplayer-ui');
  44.         const isMiniplayerVisible = miniplayerUI && getComputedStyle(miniplayerUI).display !== 'none';
  45.         const currentTime = videoElement?.currentTime;
  46.         const timeContainer = document.querySelector(
  47.             isMiniplayerVisible ? '.ytp-miniplayer-ui .ytp-time-contents' : '.ytp-chrome-controls .ytp-time-contents'
  48.         );
  49.         const shouldUpdate =
  50.             videoElement &&
  51.             !isLive &&
  52.             (
  53.                 !videoElement.paused ||
  54.                 videoElement.playbackRate !== lastPlaybackRate ||
  55.                 currentTime !== lastCurrentTime
  56.             );
  57.  
  58.         if (!videoElement || isLive || !timeContainer) {
  59.             if (timeDisplay) {
  60.                 timeDisplay.remove();
  61.                 timeDisplay = null;
  62.             }
  63.             requestAnimationFrame(displayRemainingTime);
  64.             return;
  65.         }
  66.  
  67.         if (!timeDisplay) {
  68.             timeDisplay = createTimeDisplayElement();
  69.             timeContainer.appendChild(timeDisplay);
  70.         }
  71.  
  72.         if (!timeContainer.contains(timeDisplay)) {
  73.             timeDisplay.remove();
  74.             timeContainer.appendChild(timeDisplay);
  75.         }
  76.  
  77.         if (shouldUpdate) {
  78.             const timeRemaining = (videoElement.duration - videoElement.currentTime) / videoElement.playbackRate;
  79.             const hours = Math.floor(timeRemaining / 3600);
  80.             const minutes = Math.floor((timeRemaining % 3600) / 60);
  81.             const seconds = Math.floor(timeRemaining % 60);
  82.             const text = `(${hours > 0 ? `${hours}:` : ''}${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')})`;
  83.  
  84.             if (text !== lastRenderedText) {
  85.                 timeDisplay.textContent = text;
  86.                 lastRenderedText = text;
  87.             }
  88.  
  89.             lastPlaybackRate = videoElement.playbackRate;
  90.             lastCurrentTime = currentTime;
  91.         }
  92.  
  93.         requestAnimationFrame(displayRemainingTime);
  94.     }
  95.  
  96.     function initRemainingCounter() {
  97.         const timeContainer = document.querySelector('.ytp-time-contents');
  98.  
  99.         if (timeContainer) {
  100.             timeDisplay = createTimeDisplayElement();
  101.             timeContainer.appendChild(timeDisplay);
  102.             requestAnimationFrame(displayRemainingTime);
  103.             observer.disconnect();
  104.         }
  105.     }
  106.  
  107.     function checkVideoExists() {
  108.         const videoElement = document.querySelector('video');
  109.  
  110.         if (videoElement) {
  111.             initRemainingCounter();
  112.         }
  113.     }
  114.  
  115.     const observer = new MutationObserver(checkVideoExists);
  116.     observer.observe(document.body, { childList: true, subtree: true });
  117. })();