Add YouTube Video Progress

Add progress bar at bottom of YouTube video and progress text on the video page.

目前為 2018-02-02 提交的版本,檢視 最新版本

// ==UserScript==
// @name         Add YouTube Video Progress
// @namespace    https://gf.qytechs.cn/en/users/85671-jcunews
// @version      1.0.1
// @description  Add progress bar at bottom of YouTube video and progress text on the video page.
// @author       jcunews
// @match        https://www.youtube.com/*
// @grant        none
// @run-at       document-start
// ==/UserScript==

addEventListener("yt-page-data-updated", function(a, b, ls, timerPlaybackMonitor) {
  function zerolead(n){
    return n > 9 ? n : "0" + n;
  }

  function sec2hms(sec) {
   var c = sec % 60, d = Math.floor(sec / 60);
   return (d >= 60 ? zerolead(Math.floor(d / 60)) + ":" : "") + zerolead(d % 60) + ":" + zerolead(c);
  }

  function updtime(a, b, c, ls){
    a = window.movie_player;
    if (a && a.getCurrentTime) try {
      b = a.getPlaybackQuality();
      switch (b) {
        case "small":  b = "240px"; break;
        case "medium": b = "360px"; break;
        case "large":  b = "480px"; break;
        case "hd720":  b = "720px"; break;
        case "hd1080": b = "1080px"; break;
        default:       b = "???"; break;
      }
      curq.textContent = "[" + b + "]";
      ls = a.getDuration();
      if (ls > 0) {
        b = a.getCurrentTime();
        curtime.textContent = sec2hms(Math.floor(b)) + " / " + sec2hms(Math.floor(ls)) + " (" + Math.floor(b * 100 / ls) + "%)";
        vidprogress2b.style.width = Math.ceil((b / ls) * vidprogress2.offsetWidth) + "px";
      } else {
        curtime.textContent = "LIVE";
        vidprogress2b.style.width = "100%";
      }
    }catch(a){
      curq.textContent = "[???]";
      curtime.textContent = "???";
      vidprogress2b.style.width = "0px";
    }
  }

  a = window["body-container"] ? window["watch7-user-header"]||window["movie_player"] : document.querySelector("#info-contents #info");
  if (a && ytplayer.config && !window.vidprogress) {
    b = document.createElement("SPAN");
    b.id = "vidprogress";
    b.innerHTML = '<span id="curq"></span><span id="curtime" style="margin-left:2ex"></span>';
    if (window["body-container"]) {
      b.style.cssText = "margin-left:2ex";
      a.appendChild(b);
    } else {
      b.style.cssText = "margin-left:2ex;font-size:10pt";
      a.insertBefore(b, a.querySelector("#flex"));
    }
    b = document.createElement("DIV");
    b.id = "vidprogress2";
    b.style.cssText = "opacity:.66;position:absolute;z-index:10;bottom:0;width:100%;height:3px;background:#fff";
    b.innerHTML = '<div id="vidprogress2b" style="height:100%;background:#f00"></div>';
    movie_player.appendChild(b);
    if (timerPlaybackMonitor) clearInterval(timerPlaybackMonitor);
    updtime();
    timerPlaybackMonitor = setInterval(updtime, 200);
  }
});

QingJ © 2025

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