YouTube - Remaining time

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

当前为 2023-12-03 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name YouTube - Remaining time
  3. // @namespace https://gist.github.com/4lrick/cf14cf267684f06c1b7bc559ddf2b943
  4. // @version 1.3
  5. // @description Displays the remaining duration of a YouTube video next to the video duration, taking into account the playback rate.
  6. // @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.
  7. // @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.
  8. // @description:de Zeigt die verbleibende Dauer eines YouTube-Videos neben der Videodauer an und berücksichtigt dabei die Wiedergabegeschwindigkeit.
  9. // @description:it Mostra la durata rimanente di un video di YouTube accanto alla durata del video, tenendo conto della velocità di riproduzione.
  10. // @description:zh-CN 在视频时长旁边显示YouTube视频的剩余时长,考虑播放速度。
  11. // @author 4lrick
  12. // @match https://www.youtube.com/*
  13. // @icon https://www.google.com/s2/favicons?sz=64&domain=youtube.com
  14. // @grant none
  15. // @license GPL-3.0-only
  16. // ==/UserScript==
  17.  
  18. (function() {
  19. 'use strict';
  20. let init = false;
  21. let timeDisplay;
  22.  
  23. function displayRemainingTime() {
  24. const videoElement = document.querySelector('video');
  25.  
  26. if (videoElement) {
  27. const timeRemaining = (videoElement.duration - videoElement.currentTime) / videoElement.playbackRate;
  28. const hours = Math.floor(timeRemaining / 3600);
  29. const minutes = Math.floor((timeRemaining % 3600) / 60);
  30. const seconds = Math.floor(timeRemaining % 60);
  31. const isLive = document.querySelector('.ytp-live');
  32.  
  33. if (!isLive) {
  34. timeDisplay.textContent = `(${hours > 0 ? `${hours}:` : ''}${minutes < 10 ? '0' : ''}${minutes}:${seconds < 10 ? '0' : ''}${seconds})`;
  35. } else {
  36. timeDisplay.textContent = null;
  37. }
  38. }
  39. requestAnimationFrame(displayRemainingTime);
  40. }
  41.  
  42. function initDisplay() {
  43. timeDisplay = document.createElement('div');
  44. timeDisplay.style.display = 'inline-block';
  45. timeDisplay.style.marginLeft = '10px';
  46. timeDisplay.style.color = '#ddd';
  47.  
  48. const timeContainer = document.querySelector('.ytp-time-display');
  49.  
  50. if (timeContainer) {
  51. timeContainer.appendChild(timeDisplay);
  52. init = true;
  53. }
  54.  
  55. }
  56.  
  57. function checkVideoExists() {
  58. const videoElement = document.querySelector('video');
  59.  
  60. if (videoElement) {
  61. if (!init) {
  62. initDisplay();
  63. }
  64.  
  65. videoElement.onplaying = displayRemainingTime;
  66. }
  67. }
  68.  
  69. const observer = new MutationObserver(checkVideoExists);
  70. const body = document.body;
  71. const config = { childList: true, subtree: true };
  72. observer.observe(body, config);
  73. })();