Greasy Fork is available in English.
因为大多数视频全屏后就看不到时间了，要看时间还得退出全屏，看到有的播放器全屏播放时可以在右上角显示一个系统当前时间，这种方式很不错，所以决定给视频网站也做一个这样的增强。这个脚本的作用只有一个，就是在视频左上角显示一个系统时间，方便全屏看视频期间随时了解时间。
目前为
// ==UserScript==
// @name 视频全屏显示时间
// @namespace http://tampermonkey.net/
// @namespace https://www.medfav.com/webnav/
// @version 0.3.6
// @description 因为大多数视频全屏后就看不到时间了，要看时间还得退出全屏，看到有的播放器全屏播放时可以在右上角显示一个系统当前时间，这种方式很不错，所以决定给视频网站也做一个这样的增强。这个脚本的作用只有一个，就是在视频左上角显示一个系统时间，方便全屏看视频期间随时了解时间。
// @description 0.2.1 增加搜狐视频 0.2.2 增加mkv、mp4结尾的链接匹配，时间标签层级从3改为11 0.2.3增加YouTube支持
// @description 0.2.4 增加avi,mov,rmvb,webm,flv格式视频支持;修复带参数的视频链接播放时不显示时间；修复某些页面时间位置不在画面上的问题；
// @description 0.2.5 本次更新为时间标签添加了自由拖动功能,以解决某些视频网站视频右上角水印对时间显示产生干扰；0.2.6 紧急修复一个时间标签拖动的问题，影响0.2.5版，正在使用0.2.5版的尽快升级；0.2.7 修复拖动导致的一些问题 0.2.8 修复一些体验问题 0.2.9 修复拖动时间标签导致视频暂停的问题：
// @description 0.3.0 修复拖动的一些问题；添加 左上角/顶部中间/右上角 三个固定位置循环切换；添加恢复位置功能；0.3.1 修复标签位置调整的一些问题 0.3.2 小样式修复
// @description 0.3.3 移除拖动功能，拖动导致较多问题 0.3.4 修复一些显示问题 0.3.5 增加更多级别字体大小
// @description 0.3.6 增加设置弹框；增加顶部间距设置；增加字体大小设置；优化计时器字体宽度；
// @author medfav
// @match *://lpl.qq.com/*
// @match *://v.qq.com/*
// @match *://*.bilibili.com/*
// @match *://tv.cctv.com/*
// @match *://*.iqiyi.com/*
// @match *://*.youku.com/*
// @match *://*.le.com/*
// @match *://weibo.com/*
// @match *://*.sohu.com/*
// @match *://*.ixigua.com/*
// @match *://*.gfysys1.com/*
// @match *://*.buyaotou.xyz/*
// @match *://*/*.mkv*
// @match *://*/*.mp4*
// @match *://*/*.avi*
// @match *://*/*.mov*
// @match *://*/*.rmvb*
// @match *://*/*.webm*
// @match *://*/*.flv*
// @match *://*.youtube.com/*
// @grant GM_registerMenuCommand
// @grant GM_setValue
// @grant GM_getValue
// @icon https://www.google.com/s2/favicons?sz=64&domain=qq.com
// @run-at document-end
// @grant unsafeWindow
// @license GPLv3
// ==/UserScript==
(function() {
'use strict';
// Your code here...
// let timerInterval = 0;
let pos = GM_getValue("pos");//左(0)、中(1)、右(2)
let pos_top_space = GM_getValue("pos_top");//标签和顶部的距离
let fontSize_min = GM_getValue("min_font");//最小
let fontSize_small = GM_getValue("small_font");//小
let fontSize_medium = GM_getValue("medium_font");//中等
let fontSize_large = GM_getValue("large_font");//大
let fontSize_max = GM_getValue("max_font");//最大
let fontStyle = "微软雅黑";//字体样式
// if(pos == undefined){
// GM_setValue("pos",2);
// pos = 2;
// }
// if(pos_top_space == undefined){
// GM_setValue("pos_top",10);
// pos_top_space = 10;
// }
// 初始化值
pos = (pos == undefined)?2:pos;
pos_top_space = (pos_top_space == undefined)?10:pos_top_space;
fontSize_min = (fontSize_min == undefined)?10:fontSize_min;
fontSize_small = (fontSize_small == undefined)?10:fontSize_small;
fontSize_medium = (fontSize_medium == undefined)?20:fontSize_medium;
fontSize_large = (fontSize_large == undefined)?24:fontSize_large;
fontSize_max = (fontSize_max == undefined)?28:fontSize_max;
let menu1 = GM_registerMenuCommand ("设置", openSetting, "");
// // 计时器位置
// var pos = 2;
// // 计时器字体大小
// var fontSize = 32;
// // 计时器字体
// var fontStyle = "微软雅黑";
function openSetting() {
var settingBox = document.querySelector("#vt-setting");
if(settingBox){
return;
}
var settingStyle = document.createElement("style");
settingStyle.type="text/css";
settingStyle.id="vt-classs";
var settingStyleInner = `div#vt-setting {
top: 80px;
left: calc(100vw - 300px);
width: 250px;
border: 1px solid gray;
position: fixed;
display: block;
z-index: 100000;
margin: 0;
padding: 0;
border-radius: 6px;
font-size: small;
color: black;
background-color: white;
}
#vts-tital {
background-color:gray;
display: inline-block;
width: 100%;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
padding: 3px 0px;
text-align: center;
color: white;
}
#vts-pos input {
appearance: revert;
margin-right: 5px;
}
#vts-pos input:not(:nth-child(2),:last-child) {
margin-left: 35px;
}
.vts-fieldset {
border: 1px solid #c7c7c7;
padding: 5px;
margin: auto 5px;
}
.vts-fieldset>legend {
font-size: small;
color: gray;
width: auto;
padding: 0px 5px;
}
#vts-font input,#vts-pos-top,#vts-font-style-name {
width: 110px;
font-size: revert;
outline: revert;
border: revert;
}
.vts-input-number,.vts-select {
line-height: revert;
appearance: revert;
margin-top: 1px;
}
.vts-select {
margin-top: 2px;
}
#vts-font select {
width: 150px;
}
#vts-submit {
margin-top: 10px;
text-align: center;
}
#vts-submit>input {
margin: 0;
padding: 0 10px;
appearance: auto;
border: revert;
border-radius: revert;
background: revert;
font-size: revert;
}
#vts-submit>input:not(:first-child) {
margin-left: 20px;
}
#vts-save.disable {
cursor: not-allowed;
pointer-events: none;
background-color: #c0c0c0;
border-color: #8a8a8a;
border-width: 1px;
border-radius: 3px;
color: azure;
padding: 1px 10px;
}
#vts-tips {
font-size: 13px;
color: green;
margin: 10px auto 5px 10px;
}`;
settingStyle.innerHTML = settingStyleInner;
document.querySelector("head").appendChild(settingStyle);
settingBox = document.createElement("div");
settingBox.id = "vt-setting";
var innerHtml = `<span id="vts-tital">设置</span>
<div id="vts-pos">
<fieldset class="vts-fieldset">
<legend>计时器位置</legend>
<input type="radio" name="timer-position" id="vts-pos-radio0"><label for="left">左</label>
<input type="radio" name="timer-position" id="vts-pos-radio1"><label for="left">中</label>
<input type="radio" name="timer-position" id="vts-pos-radio2"><label for="left">右</label>
<br><label for="fontSize">顶部距离：</label>
<input type="number" name="fontSize" id="vts-pos-top" class="vts-input-number" min="-10" max="100" value="10">
</fieldset>
</div>
<div id="vts-font">
<fieldset class="vts-fieldset">
<legend>计时器字体</legend>
<label title="视频画幅很小时，显示最小字体">最小💬：</label><input type="number" name="fontSize" id="vts-font-size-min" class="vts-input-number" min="9" max="99" value="10"><br>
<label title="视频画幅小时，显示较小字体">较小💬：</label><input type="number" name="fontSize" id="vts-font-size-small" class="vts-input-number" min="9" max="99" value="10"><br>
<label title="视频画幅一般大小时，显示一般大小字体">一般💬：</label><input type="number" name="fontSize" id="vts-font-size-medium" class="vts-input-number" min="9" max="99" value="20"><br>
<label title="视频画幅大时，显示较大字体">较大💬：</label><input type="number" name="fontSize" id="vts-font-size-large" class="vts-input-number" min="9" max="99" value="24"><br>
<label title="视频画幅很大时，显示最大字体">最大💬：</label><input type="number" name="fontSize" id="vts-font-size-max" class="vts-input-number" min="9" max="99" value="28"><br />
<br style="display:none;" />
<label for="fontStyle">字体：</label>
<select disabled name="fontStyle" class="vts-select" id="vts-font-style-name">
<option value="微软雅黑">微软雅黑</option>
<option value="宋体">宋体</option>
<option value="黑体">黑体</option>
</select>
</fieldset>
</div>
<div id="vts-submit">
<input id="vts-save" type="button" value="保存">
<input id="vts-close" type="button" value="关闭">
<input id="vts-reset" type="button" value="重置">
</div>
<div id="vts-tips">Tips：点击保存记住设置</div>`;
settingBox.innerHTML = innerHtml;
document.querySelector("body").appendChild(settingBox);
// 添加事件
document.querySelector("#vts-pos-radio0").addEventListener("change",function(){radioChange(0,'radio')});
document.querySelector("#vts-pos-radio1").addEventListener("change",function(){radioChange(1,'radio')});
document.querySelector("#vts-pos-radio2").addEventListener("change",function(){radioChange(2,'radio')});
document.querySelector("#vts-pos-top").addEventListener("input",function(){radioChange(this.value,'top')});
document.querySelector("#vts-font-size-min").addEventListener("input",function(){radioChange(this.value,'fontsize-min')});
document.querySelector("#vts-font-size-small").addEventListener("input",function(){radioChange(this.value,'fontsize-small')});
document.querySelector("#vts-font-size-medium").addEventListener("input",function(){radioChange(this.value,'fontsize-medium')});
document.querySelector("#vts-font-size-large").addEventListener("input",function(){radioChange(this.value,'fontsize-large')});
document.querySelector("#vts-font-size-max").addEventListener("input",function(){radioChange(this.value,'fontsize-max')});
document.querySelector("#vts-save").addEventListener("click",vtsSaveSetting);
document.querySelector("#vts-close").addEventListener("click",vtsClose);
document.querySelector("#vts-reset").addEventListener("click",vtsResetSetting);
initSetting();
}
// 初始化设置界面
function initSetting() {
switch (pos) {
case 0:
document.querySelector("#vts-pos-radio0").checked = true;
break;
case 1:
document.querySelector("#vts-pos-radio1").checked = true;
break;
case 2:
document.querySelector("#vts-pos-radio2").checked = true;
}
document.querySelector("#vts-pos-top").value = pos_top_space;
document.querySelector("#vts-font-size-min").value = fontSize_min;
document.querySelector("#vts-font-size-small").value = fontSize_small;
document.querySelector("#vts-font-size-medium").value = fontSize_medium;
document.querySelector("#vts-font-size-large").value = fontSize_large;
document.querySelector("#vts-font-size-max").value = fontSize_max;
//document.querySelector("#vts-font-size-number").value = fontSize;
}
var tempPos = 0;
function radioChange(params,type) {
if(type=="radio") {
pos = params;
}
if (type=="top") {
if ((params < -10 || params > 100)) {
document.querySelector("#vts-save").classList.add("disable");
} else {
pos_top_space = Number(params);
document.querySelector("#vts-save").classList.remove("disable");
}
}
if (type=="number") {
if ((params < 9 || params > 99)) {
document.querySelector("#vts-save").classList.add("disable");
} else {
document.querySelector("#vts-save").classList.remove("disable");
}
}
if (type.indexOf("fontsize")==0) {
if ((params < 9 || params > 99)) {
document.querySelector("#vts-save").classList.add("disable");
} else {
switch (type) {
case "fontsize-min":
fontSize_min = params;
break;
case "fontsize-small":
fontSize_small = params;
break;
case "fontsize-medium":
fontSize_medium = params;
break;
case "fontsize-large":
fontSize_large = params;
break;
case "fontsize-max":
fontSize_max = params;
}
fontStyle = "微软雅黑";//字体样式
document.querySelector("#vts-save").classList.remove("disable");
}
}
}
// 保存按钮
function vtsSaveSetting() {
//pos = tempPos;
GM_setValue("pos",pos);
GM_setValue("pos_top",pos_top_space);
GM_setValue("min_font",fontSize_min);
GM_setValue("small_font",fontSize_small);
GM_setValue("medium_font",fontSize_medium);
GM_setValue("large_font",fontSize_large);
GM_setValue("max_font",fontSize_max);
//fontSize = document.querySelector("#vts-font-size-number").value;
fontStyle = document.querySelector("#vts-font-style-name").value;
let textTips1 = "Tips：保存成功！";
let textTips2 = "Tips：再次保存成功！";
let currentText = document.querySelector("#vts-tips").innerText;
if(currentText == textTips1) {
document.querySelector("#vts-tips").innerText = textTips2;
} else {
document.querySelector("#vts-tips").innerText = textTips1;
}
}
// 取消按钮
function vtsClose() {
var settingBox = document.querySelector("#vt-setting");
var settingStyle = document.querySelector("#vt-classs");
if(settingBox){
settingBox.parentNode.removeChild(settingBox);
}
if(settingStyle){
settingStyle.parentNode.removeChild(settingStyle);
}
}
// 重置按钮
function vtsResetSetting() {
pos = 2;
pos_top_space = 10;
fontSize_min = 10;//最小
fontSize_small = 10;//小
fontSize_medium = 20;//中等
fontSize_large = 24;//大
fontSize_max = 28;//最大
//fontSize = 32;
fontStyle = "微软雅黑";
initSetting();
document.querySelector("#vts-tips").innerText = "已重置为默认,点击“保存”记住设置！";
//vtsClose();
}
// 创建时间标签,width：视频宽度，用于设置时间数字大小
function createTag(element){
let style = "z-index: 11;color: #e1e1e1;margin:5px;padding: 5px;border-radius: 4px;line-height: 0.8em;background-color: #0000004d;/*opacity: 0.8;*/user-select: none;text-shadow: 1px 1px 2px black, -1px -1px 2px black;height: min-content;font-family:monospace;font-weight:400;letter-spacing:-2px;";
let videoWidth = element.offsetWidth;
let videoTop = element.offsetTop;
let videoLeft = element.offsetLeft;
let space = 10;
let fontSize = 10;
let tagWidth = 50;
if(videoWidth >= 1700){
space = 10;
fontSize = fontSize_max;
tagWidth = 120;
} else if(videoWidth >= 1200){
space = 10;
fontSize = fontSize_large;
tagWidth = 104;
} else if(videoWidth >= 720){
space = 10;
fontSize = fontSize_medium;
tagWidth = 77;
} else if(videoWidth <= 200){
space = 5;
fontSize = fontSize_min;
tagWidth = 50;
} else {
space = 10;
fontSize = fontSize_small;
tagWidth = 50;
}
style += "font-size: "+fontSize+"px;top: " + (videoTop + pos_top_space) + "px;";
switch(pos) {
case 0:
style += "position: absolute;left: " + videoLeft + space + "px;";
break;
case 1:
style += "position: absolute;left: " + videoLeft + ((videoWidth - tagWidth)/2) + "px;";
break;
case 2:
style += "position: absolute;right: " + videoLeft + space + "px;";
break;
}
let timeBar = document.createElement("div");
timeBar.className = "timer";
timeBar.style = style;
return timeBar;
}
// 改变时间标签样式
function changeTag(element){
let videoTop = element.offsetTop;
let videoLeft = element.offsetLeft;
if(element.offsetWidth > 200){
if(element.offsetWidth >= 1700){
element.parentElement.querySelector(".timer").style.fontSize = fontSize_max + "px";
}else if(element.offsetWidth >= 1200){
element.parentElement.querySelector(".timer").style.fontSize = fontSize_large + "px";
} else if(element.offsetWidth >= 720){
element.parentElement.querySelector(".timer").style.fontSize = fontSize_medium + "px";
} else if(element.offsetWidth <= 200) {
element.parentElement.querySelector(".timer").style.fontSize = fontSize_min + "px";
} else {
element.parentElement.querySelector(".timer").style.fontSize = fontSize_small + "px";
}
// element.previousSibling.style.top = videoTop + 10 + "px";
// element.previousSibling.style.right = videoLeft + 10 + "px";
} else {
// element.previousSibling.style.top = videoTop + 5 + "px";
// element.previousSibling.style.right = videoLeft + 5 + "px";
}
changePos(element);
}
function changePos(videoTag){
let videoTop = videoTag.offsetTop;
let videoLeft = videoTag.offsetLeft;
let videoWidth = videoTag.offsetWidth;
let space = 10;
if(videoWidth <= 200){
space = 5;
} else {
space = 10;
}
videoTag.parentElement.querySelector(".timer").style.top = (videoTop + pos_top_space) + "px";
// videoTag.previousSibling.style.marginTop = space + "px";
switch(pos) {
case 0:
videoTag.parentElement.querySelector(".timer").style.removeProperty("right");
//videoTag.previousSibling.style.position = 'absolute';
videoTag.parentElement.querySelector(".timer").style.left = videoLeft + space + "px";
break;
case 1:
videoTag.parentElement.querySelector(".timer").style.removeProperty("right");
//videoTag.previousSibling.style.position = 'unset';
videoTag.parentElement.querySelector(".timer").style.left = videoLeft + ((videoWidth - videoTag.parentElement.querySelector(".timer").offsetWidth)/2) + "px";
break;
case 2:
videoTag.parentElement.querySelector(".timer").style.removeProperty("left");
//videoTag.previousSibling.style.position = 'absolute';
videoTag.parentElement.querySelector(".timer").style.right = videoLeft + space + "px";
break;
}
}
// 获取Video标签
function getVideoTag(){
setTimeout(()=>{
let videoTagList = Array.from(document.getElementsByTagName('video'));
if(videoTagList.length == 0){
getVideoTag();
} else {
insertTimeBar(videoTagList);
// setTimer();
getVideoTag();
}
},1000)
}
getVideoTag();
// 加入时间标签
function insertTimeBar(videoTagList){
videoTagList.forEach((element)=>{
if (element.parentElement.querySelector(".timer") == null ){
// 多个时间条不能用同一个对象
let timeBar = createTag(element);
element.parentElement.insertBefore(timeBar,element);
} else {
changeTag(element);
}
})
}
// 设置计时器
function setTimer(){
// clearInterval(timerInterval);
// timerInterval =
setInterval(()=>{
var date = new Date();
var hour = date.getHours();
var min = date.getMinutes()>9?date.getMinutes():'0' + date.getMinutes();
var sec = date.getSeconds()>9?date.getSeconds():'0' + date.getSeconds();
let timer = document.getElementsByClassName("timer");
// 当没有时间条时，添加（懒加载会出现这种情况）
if(timer == undefined){
let videoTagList = Array.from(document.getElementsByTagName('video'));
insertTimeBar(videoTagList);
}
// 给每一个时间条设置时间
let timeBarList = Array.from(document.getElementsByClassName("timer"));
timeBarList.forEach((timeBar)=>{
timeBar.innerText = hour + ":" + min + ":" + sec;
})
},1000)
}
// 启动计时器
setTimer();
// 提示框，调用方法：Toast('提示：好用记得点赞哦！',1000);
let dialog;
let timer;
function Toast(msg,duration){
if(timer != null && dialog != null){
clearTimeout(timer);
document.body.removeChild(dialog);
dialog = null;
}
duration=isNaN(duration)?3000:duration;
dialog = document.createElement('div');
dialog.innerText = msg;
dialog.style.cssText="font-size:.32rem;color:green;background-color:white;border:solid green 2px;padding:10px 15px;margin:0 0 0 -60px;border-radius:4px;position:fixed;top:2%;left:93%;/*width:200px;*/text-align:left;z-index:9999";
document.body.appendChild(dialog);
timer = setTimeout(function() {
document.body.removeChild(dialog);
dialog = null;
}, duration);
}
})();