Greasy Fork is available in English.
因为大多数视频全屏后就看不到时间了，要看时间还得退出全屏，看到有的播放器全屏播放时可以在右上角显示一个系统当前时间，这种方式很不错，所以决定给视频网站也做一个这样的增强。这个脚本的作用只有一个，就是在视频左上角显示一个系统时间，方便全屏看视频期间随时了解时间。
当前为
// ==UserScript==
// @name 视频全屏显示时间
// @namespace http://tampermonkey.net/
// @namespace https://www.medfav.com/webnav/
// @version 0.2.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 本次更新为时间标签添加了自由拖动功能,以解决某些视频网站视频右上角水印对时间显示产生干扰；
// @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/*
// @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;
// function closeAtoPos(timeBar) {
// if(timeBar != undefined){
// timeBar.setAttribute("autopos","false");
// timeBar.style.right = "unset";
// }
// }
// 创建时间标签,width：视频宽度，用于设置时间数字大小
function createTag(element){
let style = "z-index: 50;position: absolute;color: #e6e9f0;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;";
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 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)) + "px";
}
} 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)) + "px";
}
}
}
// 获取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.style.right = "unset";
timeBar.style.left = (element.offsetWidth - (timeBar.offsetWidth + element.offsetLeft + 10)) + "px";
} 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();
})
// 开启标签拖动
$("#timerTag").dragging({
move : 'both',
randomPosition : false
});
},1000)
}
// 启动计时器
setTimer();
$.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 = father.width();
var faHeight = father.height();
var thisWidth = $this.width()+parseInt($this.css('padding-left'))+parseInt($this.css('padding-right'));
var thisHeight = $this.height()+parseInt($this.css('padding-top'))+parseInt($this.css('padding-bottom'));
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.mousedown(function(e){
father.children().css({"zIndex":"0"});
$this.css({"zIndex":"1"});
mDown = true;
X = e.pageX;
Y = e.pageY;
positionX = $this.position().left;
positionY = $this.position().top;
return false;
});
$(document).mouseup(function(e){
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();
}
});
}
});