☰

B站视频播放器右上角显示系统时间丨调整视频比例

播放器右上角显示系统时间,调整视频比例

  1. // ==UserScript==
  2. // @name         B站视频播放器右上角显示系统时间丨调整视频比例
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.0.2
  5. // @description  播放器右上角显示系统时间,调整视频比例
  6. // @author       echo
  7. // @match           *://*.bilibili.com/*
  8. // @icon         https://www.google.com/s2/favicons?sz=64&domain=bilibili.com
  9. // @grant       GM_setValue
  10. // @grant       GM_getValue
  11. // @require      https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js
  12. // @license      CC-BY-NC-SA-4.0
  13. // ==/UserScript==
  14.  
  15. (function () {
  16.   'use strict';
  17.   if (window.top != window.self) return;
  18.   window.onload = function () {
  19.     $(function () {
  20.       log("欢迎使用本插件: B站视频播放器右上角显示系统时间丨调整视频比例");
  21.       //显示系统时间
  22.       const fontSize = 21;//*支持修改,时间字体大小,默认21
  23.       const maxCheckNum = 30;//重试次数
  24.       let retryTime = 200;//重试间隔
  25.       const exponential = 1.1;//间隔延长指数
  26.       const colorIn = "var(--bpx-primary-color,#00a1d6) ";
  27.       const colorOut = "var(--bpx-dmsend-switch-icon,#757575) ";
  28.       const antimetooltip = `@keyframes timetooltip{
  29.         from{
  30.           opacity:0;
  31.           transform:translate(0,6px);
  32.         }to{
  33.           opacity:1;
  34.           transform:translate(0,0);
  35.         }
  36.       }
  37.       .antimetooltip{
  38.         animation:timetooltip 0.3s forwards;
  39.         animation-delay: 0.3s;
  40.       }`;
  41.       const ansizetooltip = `@keyframes sizetooltip{
  42.         from{
  43.           opacity:0;
  44.           transform:rotate(-90deg) translate(-6px,0);
  45.         }to{
  46.           opacity:1;
  47.           transform:rotate(-90deg) translate(0,0);
  48.         }
  49.       }
  50.       .ansizetooltip{
  51.         animation:sizetooltip 0.3s forwards;
  52.         animation-delay: 0.3s;
  53.       }`;
  54.       let left = '0px';
  55.       let top = '0px';
  56.       let time = $(`<div class="sys-time toolbar-left-item-wrap" style="z-index:1;position: absolute;color: #ffffffee;right: 5px;top: 0.6px;font-size: ${fontSize}px;text-shadow: 0.3px 0.3px 3px #00000088;font-family:Calibri;">00:00</div>`);
  57.       let timetooltip = $(`<div class="bpx-player-tooltip-item" data-name="time_switch" style="left: 0px; top: 0px; visibility: hidden; opacity: 0; transform: translate(0px, 0px);"><div class="bpx-player-tooltip-title">隐藏时间</div></div>`);
  58.       let switcher = $(`<div class="time-switcher bpx-player-dm-setting" style="display:flex;align-items:center;justify-content: center;user-select: none;cursor: pointer;">
  59.       <span class="bpx-common-svg-icon" style="width:85%;height:85%;">
  60.   <svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024" style="transition: none;">
  61.   <path style="transition: fill .15s ease-in-out;" d="m770.048,1003.52l-512,0c-128,0 -231.424,-103.424 -231.424,-230.4l0,-512c0,-126.976 103.424,-230.4 230.4,-230.4l512,0c126.976,0 230.4,103.424 230.4,230.4l0,512c1.024,126.976 -102.4,230.4 -229.376,230.4zm-513.024,-880.64c-75.776,0 -138.24,62.464 -138.24,138.24l0,512c0,76.8 62.464,138.24 138.24,138.24l512,0c75.776,0 138.24,-62.464 138.24,-138.24l0,-512c1.024,-76.8 -61.44,-138.24 -137.216,-138.24l-513.024,0z"/>
  62.   <path class="time-sign" style="transition: fill .15s ease-in-out;" fill="${colorIn}" d="m513.024,517.12m-66.56,0a66.56,66.56 0 1 0 133.12,0a66.56,66.56 0 1 0 -133.12,0z"/>
  63.   <path class="time-sign" style="transition: fill .15s ease-in-out;" fill="${colorIn}" d="m707.584,647.168l-119.808,-119.808c-5.12,33.792 -31.744,60.416 -66.56,64.512l120.832,120.832c18.432,18.432 47.104,18.432 65.536,0c17.408,-18.432 17.408,-47.104 0,-65.536zm-194.56,-205.824c17.408,0 32.768,7.168 46.08,17.408l0,-241.664c0,-25.6 -20.48,-46.08 -46.08,-46.08s-46.08,20.48 -46.08,46.08l0,240.64c13.312,-9.216 28.672,-16.384 46.08,-16.384z"/>
  64.   </svg></span></div>`).hover(function () {
  65.         delayHide.once();
  66.         $(this).find(".time-sign").css({ "fill": colorIn });
  67.         left = $(this).offset().left + $(this).outerWidth() / 2 - timetooltip.outerWidth() / 2 + 'px';
  68.         top = $(this)[0].getBoundingClientRect().top - timetooltip.outerHeight() - parseInt(timetooltip.css('padding-bottom')) + 'px';
  69.         timetooltip.css({ "left": left, "top": top, "visibility": "visible" });
  70.         timetooltip.addClass('antimetooltip');
  71.       }, timetooltipHide);
  72.       function timetooltipHide() {
  73.         timetooltip.css({ "visibility": "hidden", "opacity": 0 });
  74.         timetooltip.removeClass('antimetooltip');
  75.         if (time.is(':hidden')) $(this).find(".time-sign").css({ "fill": colorOut });
  76.         else $(this).find(".time-sign").css({ "fill": colorIn })
  77.       }
  78.       //调整视频比例
  79.       let range, regulator;
  80.       //菜单延迟消失计时器
  81.       let delayHide = {};
  82.       delayHide.ms = 200;//延迟时间
  83.       delayHide.run = function () {
  84.         this.tag = setTimeout(function () {
  85.           if (!regulator.is(':hover') && !range.is(':hover')) {
  86.             range.css({ "visibility": "hidden", "opacity": 0 });
  87.             range.removeClass('ansizetooltip');
  88.             regulator.css("fill", '');
  89.           }
  90.         }, this.ms);
  91.       };
  92.       delayHide.clear = function () {
  93.         clearTimeout(this.tag);
  94.       };
  95.       delayHide.once = function () {
  96.         delayHide.clear();
  97.         range.css({ "visibility": "hidden", "opacity": 0 });
  98.         range.removeClass('ansizetooltip');
  99.         regulator.css("fill", '');
  100.       }
  101.       range = $(`<div class="bpx-player-tooltip-item" data-name="size_regulate" style="
  102.       left: 0px; top: 0px; visibility: hidden; opacity: 0; transform: translate(0px, 0px);
  103.       box-sizing: border-box;
  104.       display: flex;
  105.       align-items: center;
  106.       height: 42px;
  107.       width: 120px;
  108.       padding: 0 6px;
  109.       transform: rotate(-90deg);
  110.       background: hsla(0,0%,8%,.9);
  111.       pointer-events: auto;
  112.       justify-content: flex-start;
  113.   "><input style="box-sizing: border-box;opacity: 1;width: 80%;flex-shrink: 0;" type="range" min="0.5" max="1.5" value="1.0" step="0.1" id="sizein" oninput="sizeout.value=parseInt(sizein.value*100)+'%'"><span style="
  114.       position: absolute;
  115.       box-sizing: border-box;
  116.       word-break: keep-all;
  117.       display: flex;
  118.       justify-content: center;
  119.       align-items: center;
  120.       height: 20px;
  121.       width: 42px;
  122.       transform: translate(0,-50%) rotate(90deg);
  123.       top: 50%;
  124.       right: -5%;
  125.   "><output id="sizeout" style="user-select:none;">100%</output></span></div>`).hover(function () {
  126.         delayHide.clear();
  127.         regulator.css({ "fill": colorIn });
  128.       }, function () {
  129.         delayHide.run();
  130.       });
  131.       regulator = $(`<div class="size-regulator bpx-player-dm-setting" style="display:flex;align-items:center;justify-content: center;user-select: none;cursor: pointer;">
  132.       <span class="bpx-common-svg-icon" style="width:90%;height:90%;">
  133.       <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M933.79188053 859.89239467l-124.452864-124.39825067c54.2277632-69.58066347 86.87670613-156.76320427 86.87670614-251.59161173 0-226.3482368-184.19111253-410.47381333-410.56119467-410.47381334-226.3973888 0-410.56119467 184.12557653-410.56119467 410.47381334 0 226.32093013 184.16380587 410.46289067 410.56119467 410.46289066 94.72464213 0 181.82089387-32.53971627 251.3403904-86.64733013l124.48017067 124.452864c20.0933376 20.0769536 52.56751787 20.1752576 72.52978346 0.23483733 19.96117333-19.9786496 19.84648533-52.40367787-0.212992-72.51339946zM153.2919808 483.89707093c0-183.22445653 149.09549227-332.28608853 332.3625472-332.28608853s332.35708587 149.06272427 332.35708587 332.28608853S668.9226752 816.18425173 485.654528 816.18425173 153.2919808 667.12152747 153.2919808 483.89707093z m470.70358187-39.08785493h-99.24225707v-99.24225707c0-20.75415893-17.5210496-37.58598827-39.0987776-37.58598826-21.6006656 0-39.0987776 16.81107627-39.0987776 37.58598826v99.24225707H347.29710933c-20.7650816 0-37.59691093 17.51012693-37.59691093 39.10970027 0 21.59520427 16.81107627 39.08785493 37.59691093 39.08785493h99.25864107v99.22041173c0 20.75962027 17.49920427 37.60237227 39.0987776 37.60237227 21.57882027 0 39.0987776-16.82199893 39.0987776-37.60237227v-99.22041173h99.24225707c20.75962027 0 37.61329493-17.49920427 37.61329493-39.08785493 0.00109227-21.6006656-16.85367467-39.10970027-37.61329493-39.10970027z m0 0"></path></svg></span></div>`).hover(function () {
  134.         delayHide.clear();
  135.         left = $(this).offset().left + $(this).outerWidth() / 2 - range.outerWidth() / 2 + 'px';
  136.         top = $(this)[0].getBoundingClientRect().top - range.outerWidth() + range.outerHeight() - parseInt(range.css('padding-left')) + 'px';
  137.         range.css({ "left": left, "top": top, "visibility": "visible" });
  138.         range.addClass('ansizetooltip');
  139.       }, function () {
  140.         delayHide.run();
  141.       });
  142.       //注入网页
  143.       let player = $('.bpx-player-video-wrap');//播放器
  144.       let video = $('.bpx-player-video-wrap video');//视频
  145.       let bar = $('.bpx-player-dm-setting');//弹幕设置图标
  146.       let promise = new Promise((resolve, reject) => {
  147.         let checkNum = 0;
  148.         let checkPlayer = () => {
  149.           if (player.length * bar.length * video.length == 0 && checkNum <= maxCheckNum) {
  150.             if (player.length == 0)
  151.               player = $('.bpx-player-video-wrap');
  152.             else if (video.length == 0) video = $('bpx-player-video-wrap video');
  153.             if (bar.length == 0) bar = $('.bpx-player-dm-setting');
  154.             checkNum++;
  155.             setTimeout(checkPlayer, retryTime *= exponential);
  156.           } else {
  157.             if (player.length == 0) {
  158.               reject("未找到播放器");
  159.             } else if (video.length == 0) {
  160.               reject("未找到视频")
  161.             } else if (bar.length == 0) {
  162.               reject("未找到弹幕栏")
  163.             } else {
  164.               log("获取到播放器 " + player.length);
  165.               log("获取到视频 " + video.length);
  166.               log("获取到弹幕栏 " + bar.length);
  167.               resolve();
  168.             }
  169.           }
  170.         };
  171.         checkPlayer();
  172.       });
  173.       promise.then(result => {
  174.         //初始化
  175.         $('head').append(`<style>${antimetooltip}${ansizetooltip}</style>`);
  176.         time.text(getTime());
  177.         player.prepend(time);
  178.         //设置时间开关
  179.         bar.after(switcher);
  180.         switcher.click(() => {
  181.           time.toggle(0, 'swing', function () {
  182.             if (time.is(':hidden')) { timetooltip.children().text("显示时间"); GM_setValue('sys-time', 0); }
  183.             else { timetooltip.children().text("隐藏时间"); GM_setValue('sys-time', 1); }
  184.           });
  185.         });
  186.         //设置时钟
  187.         setTimeout(() => {
  188.           time.text(getTime());
  189.           setInterval(() => {
  190.             time.text(getTime());
  191.           }, 1000 * 60);
  192.         }, (60 - new Date().getSeconds()) * 1000);
  193.         //时间开关提醒
  194.         $('.bpx-player-tooltip-area').append(timetooltip);
  195.         //设置视频尺寸调节按钮
  196.         switcher.after(regulator);
  197.         //调节滑块
  198.         $('.bpx-player-tooltip-area').append(range);
  199.         //调节尺寸
  200.         video.parent().css({ "display": "flex", "justify-content": "center", "align-items": "center" });
  201.         $("#sizein").on("input", function () {
  202.           let size = $("#sizeout").text();
  203.           video.css({ "width": size, "height": size });
  204.           GM_setValue('video-size', size);
  205.         });
  206.         //载入配置
  207.         GM_getValue('sys-time', 1) == 1 ? (log("载入配置 sys-time: 1"), time.show(), timetooltip.children().text("隐藏时间"), switcher.find(".time-sign").css({ "fill": colorIn })) : (log("载入配置 sys-time: " + GM_getValue('sys-time')), time.hide(), timetooltip.children().text("显示时间"), switcher.find(".time-sign").css({ "fill": colorOut }));
  208.         let tmpSize = GM_getValue('video-size', '100%');
  209.         log("载入配置 video-size: " + tmpSize);
  210.         $("#sizein").val((parseFloat(tmpSize) / 100.0).toFixed(1));
  211.         $("#sizeout").val(tmpSize);
  212.         video.css({ "width": tmpSize, "height": tmpSize });
  213.       }).catch(error => {
  214.         log(error, 'error');
  215.       });
  216.       //滚动立即消失
  217.       $(document).on('scroll', function () {
  218.         console.log("scroll");
  219.         timetooltipHide();
  220.         delayHide.once();
  221.       });
  222.     });
  223.   };
  224.   //获取时间
  225.   function getTime() {
  226.     let date = new Date();
  227.     let h = ('0' + date.getHours()).slice(-2);
  228.     let m = ('0' + date.getMinutes()).slice(-2);
  229.     let time = h + ':' + m;
  230.     return time;
  231.   }
  232.   function log(message, type) {
  233.     const tag = "%cB站播放器右上角时间%c ";
  234.     const style = "background: #6FB01D; color: white; padding: 3px 3px 2px 3px; border-radius: 3px;font-size:11px;font-weight:bold;"
  235.     if (type == 'error') console.error(tag + message, style, 'font-size:11px;');
  236.     else console.log('' + tag + message, style, 'font-size:11px;');
  237.   }
  238. })();

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

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