Greasy Fork is available in English.
因为大多数视频全屏后就看不到时间了，要看时间还得退出全屏，看到有的播放器全屏播放时可以在右上角显示一个系统当前时间，这种方式很不错，所以决定给视频网站也做一个这样的增强。这个脚本的作用只有一个，就是在视频左上角显示一个系统时间，方便全屏看视频期间随时了解时间。
目前为
// ==UserScript==
// @name 视频全屏显示时间
// @namespace http://tampermonkey.net/
// @namespace https://www.medfav.com/webnav/
// @version 0.3.0
// @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 修复拖动的一些问题；添加 左上角/顶部中间/右上角 三个固定位置循环切换；添加恢复位置功能；
// @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
// @require http://libs.baidu.com/jquery/1.11.1/jquery.min.js
// @license GPLv3
// ==/UserScript==
'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 = 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);
}, "");
let menu2 = GM_registerMenuCommand ("恢复位置", function(){
let timerBarList = 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);
}, "");
// let autoPos = false;
// let id=GM_registerMenuCommand ("自动调整位置", function(){
// autoPos = !autoPos;
// if(autoPos){
// alert("已开启自动调整位置！");
// } else {
// alert("已关闭自动调整位置！");
// }
// }, "");
// 第三个参数 accessKey 为快捷键，输入h即可触发。本脚本在点击一次之后会将菜单删除。
// function closeAtoPos(timeBar) {
// if(timeBar != undefined){
// timeBar.setAttribute("autopos","false");
// timeBar.style.right = "unset";
// }
// }
// 创建时间标签,width：视频宽度，用于设置时间数字大小
function createTag(element){
let style = "z-index:99 !important;position: absolute;color: #e6e9f0;margin: 5px;padding: 5px;border-radius: 4px;line-height: 0.8em;background-color: #0000004d;/*opacity: 0.8;*/user-select:none !important;text-shadow: 1px 1px 2px black, -1px -1px 2px black;cursor:grab;";
let videoWidth = element.offsetWidth;
let videoTop = element.offsetTop;
let videoLeft = element.offsetLeft;
if(videoWidth >= 720){
style += "font-size: 20px;top: " + videoTop + 10 + "px;right: " + videoLeft + 10 + "px;";
} else if(videoWidth <= 200){
style += "font-size: 13px;top: " + videoTop + 5 + "px;right: " + videoLeft + 5 + "px;";
} else {
style += "font-size: 13px;top: " + videoTop + 10 + "px;right: " + videoLeft + 10 + "px;";
}
let timeBar = document.createElement("div");
timeBar.className = "timer";
// timeBar.id = "timerTag";
timeBar.setAttribute("autopos","false");
timeBar.style = style;
timeBar.innerText = getTime();
return timeBar;
}
// 改变标签位置
function changePos(videoTag) {
let timerBar = videoTag.previousSibling;
let videoWidth = videoTag.offsetWidth;
let videoTop = videoTag.offsetTop;
let videoLeft = videoTag.offsetLeft;
let timerBarWidth = timerBar.offsetWidth;
let space = 5;
if(videoTag.offsetWidth > 200){
space = 10;
}
timerBar.style.top = videoTop + space + "px";
switch(pos){
case 0:
timerBar.style.left = space + "px";
break;
case 1:
timerBar.style.left = ((videoWidth - timerBarWidth) / 2) + "px";
break;
case 2:
timerBar.style.left = (videoWidth - (timerBarWidth + videoLeft + space)) + "px";
break;
}
}
// 改变时间标签样式
function changeTag(element, timerBar){
let videoWidth = element.offsetWidth;
let videoTop = element.offsetTop;
let videoLeft = element.offsetLeft;
let timerBarWidth = timerBar.offsetWidth;
let autoPos = !timerBar.getAttribute("autopos");
if(element.offsetWidth > 200){
if(element.offsetWidth >= 720){
timerBar.style.fontSize = "20px";
} else {
timerBar.style.fontSize = "10px";
}
if(autoPos) {
timerBar.style.top = videoTop + 10 + "px";
// timerBar.style.right = videoLeft + 10 + "px";
// timerBar.style.right = "unset";
// timerBar.style.left = (videoWidth - (timerBarWidth + videoLeft + 10))/2 + "px";
changePos(element);
}
} else {
if(autoPos) {
timerBar.style.top = videoTop + 5 + "px";
// timerBar.style.right = videoLeft + 5 + "px";
// timerBar.style.right = "unset";
// timerBar.style.right = (videoWidth - (timerBarWidth + videoLeft + 5))/2 + "px";
changePos(element);
}
}
// 标签超出视频边缘，自动调整
if(videoWidth < (timerBar.offsetLeft + timerBar.offsetWidth - 5 ) || element.offsetHeight < (timerBar.offsetTop + timerBar.offsetHeight - 5)) {
let space = 5;
if(element.offsetWidth > 200){
space = 10;
}
timerBar.style.top = videoTop + space + "px";
changePos(element)
}
}
// 获取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.previousSibling == null || element.previousSibling.className != "timer") && element.parentElement.querySelector(".timer") == null ){
// 多个时间条不能用同一个对象
let timeBar = createTag(element);
element.parentElement.insertBefore(timeBar,element);
timeBar.parentNode.style.zIndex = 'auto';
timeBar.style.right = "unset";
// timeBar.style.left = (element.offsetWidth - (timeBar.offsetWidth + element.offsetLeft + 10)) + "px";
changePos(element);
// 开启标签拖动
$(timeBar).dragging({
move : 'both',
randomPosition : false
});
} else {
changeTag(element,element.previousSibling);
}
})
}
// 生成格式化的时间
function getTime() {
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();
return hour + ":" + min + ":" + sec;
}
// 设置计时器
function setTimer(){
// clearInterval(timerInterval);
// timerInterval =
setInterval(()=>{
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 = getTime();
})
},1000)
}
// 启动计时器
setTimer();
// 窗口大小改变时，从新计算位置
var resizeTimer = null;
$(window).resize(function(){
if(resizeTimer){
clearTimeout(resizeTimer);
}
resizeTimer = setTimeout(function(){
console.log("窗口改变");
let timerBarList = document.getElementsByClassName("timer");
timerBarList.forEach((timerBar)=>{
changePos(timerBar.nextSibling);
});
},1000)
})
// 提示框，调用方法：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);
}
$.fn.extend({
//---元素拖动插件
dragging:function(data){
var $this = $(this);
var xPage;
var yPage;
var X;//
var Y;//
var xRand = 0;//
var yRand = 0;//
var father = $this.parent();
var defaults = {
move : 'both',
randomPosition : true ,
hander:1
}
var opt = $.extend({},defaults,data);
var movePosition = opt.move;
var random = opt.randomPosition;
var hander = opt.hander;
if(hander == 1){
hander = $this;
}else{
hander = $this.find(opt.hander);
}
//---初始化
father.css({"position":"relative","overflow":"hidden"});
$this.css({"position":"absolute"});
//hander.css({"cursor":"move"});
var faWidth;
var faHeight;
var thisWidth;
var thisHeight
setInterval(()=>{
faWidth = father.width();
faHeight = father.height();
thisWidth = $this.width()+parseInt($this.css('padding-left'))+parseInt($this.css('padding-right'));
thisHeight = $this.height()+parseInt($this.css('padding-top'))+parseInt($this.css('padding-bottom'));
},1000)
var mDown = false;//
var positionX;
var positionY;
var moveX ;
var moveY ;
if(random){
$thisRandom();
}
function $thisRandom(){ //随机函数
$this.each(function(index){
var randY = parseInt(Math.random()*(faHeight-thisHeight));///
var randX = parseInt(Math.random()*(faWidth-thisWidth));///
if(movePosition.toLowerCase() == 'x'){
$(this).css({
left:randX
});
}else if(movePosition.toLowerCase() == 'y'){
$(this).css({
top:randY
});
}else if(movePosition.toLowerCase() == 'both'){
$(this).css({
top:randY,
left:randX
});
}
});
}
hander.click((e)=>{e.stopPropagation();});
hander.mousedown(function(e){
// father.children().css({"zIndex":"0"});
// $this.css({"zIndex":"1"});
$this.css({"cursor":"grabbing"});
mDown = true;
X = e.pageX;
Y = e.pageY;
positionX = $this.position().left;
positionY = $this.position().top;
return false;
});
$(document).mouseup(function(e){
$this.css({"cursor":"grab"});
if(X != e.pageX && Y != e.pageY){
$("a").click(function(event) {
return false;//阻止链接跳转
});
} else {
$("a").unbind("click");//恢复链接跳转
}
mDown = false;
});
$(document).mousemove(function(e){
xPage = e.pageX;//--
moveX = positionX+xPage-X;
yPage = e.pageY;//--
moveY = positionY+yPage-Y;
function thisXMove(){ //x轴移动
if(mDown == true){
$this.css({"left":moveX});
}else{
return;
}
if(moveX < 0){
$this.css({"left":"0"});
}
if(moveX > (faWidth-thisWidth)){
$this.css({"left":faWidth-thisWidth});
}
return moveX;
}
function thisYMove(){ //y轴移动
if(mDown == true){
$this.css({"top":moveY});
}else{
return;
}
if(moveY < 0){
$this.css({"top":"0"});
}
if(moveY > (faHeight-thisHeight)){
$this.css({"top":faHeight-thisHeight});
}
return moveY;
}
function thisAllMove(){ //全部移动
if(mDown == true){
$this.css({"left":moveX,"top":moveY});
}else{
return;
}
if(moveX < 0){
$this.css({"left":"0"});
}
if(moveX > (faWidth-thisWidth)){
$this.css({"left":faWidth-thisWidth});
}
if(moveY < 0){
$this.css({"top":"0"});
}
if(moveY > (faHeight-thisHeight)){
$this.css({"top":faHeight-thisHeight});
}
}
if(movePosition.toLowerCase() == "x"){
thisXMove();
}else if(movePosition.toLowerCase() == "y"){
thisYMove();
}else if(movePosition.toLowerCase() == 'both'){
thisAllMove();
}
});
}
});