Greasy Fork is available in English.
因为大多数视频全屏后就看不到时间了，要看时间还得退出全屏，看到有的播放器全屏播放时可以在右上角显示一个系统当前时间，这种方式很不错，所以决定给视频网站也做一个这样的增强。这个脚本的作用只有一个，就是在视频左上角显示一个系统时间，方便全屏看视频期间随时了解时间。
当前为
// ==UserScript==
// @name 视频全屏显示时间
// @namespace http://tampermonkey.net/
// @namespace https://www.medfav.com/webnav/
// @version 0.3.5
// @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 增加更多级别字体大小
// @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)
if(pos == undefined){
GM_setValue("pos",0);
pos = 0;
}
let menu1 = GM_registerMenuCommand ("切换位置", function(){
pos = (pos + 1) % 3;
GM_setValue("pos",pos);
let timerBarList = Array.from(document.getElementsByClassName("timer"));
timerBarList.forEach((timerBar)=>{
changePos(timerBar.nextSibling);
});
let tipStr = "";
switch(pos){
case 0:
tipStr = "👈左上角";break;
case 1:
tipStr = "👆顶部中间";break;
case 2:
tipStr = "👉右上角";break;
}
Toast('提示：时间标签\n切换到' + tipStr + '显示！',5000);
}, "");
// 创建时间标签,width：视频宽度，用于设置时间数字大小
function createTag(element){
let style = "z-index: 11;color: #ffffffd1;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;";
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 = 28;
tagWidth = 120;
} else if(videoWidth >= 1200){
space = 10;
fontSize = 24;
tagWidth = 104;
} else if(videoWidth >= 720){
space = 10;
fontSize = 20;
tagWidth = 77;
} else if(videoWidth <= 200){
space = 5;
fontSize = 10;
tagWidth = 50;
} else {
space = 10;
fontSize = 10;
tagWidth = 50;
}
style += "font-size: "+fontSize+"px;top: " + videoTop + space + "px;";
switch(pos) {
case 0:
style += "position: absolute;left: " + videoLeft + space + "px;";
break;
case 1:
style += "position: absolute;left: " + ((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 = "28px";
}else if(element.offsetWidth >= 1200){
element.parentElement.querySelector(".timer").style.fontSize = "24px";
} else if(element.offsetWidth >= 720){
element.parentElement.querySelector(".timer").style.fontSize = "20px";
} else {
element.parentElement.querySelector(".timer").style.fontSize = "10px";
}
// 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 + 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 = ((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);
}
})();