Greasy Fork is available in English.
为PC上的播放器增加视频填充方式选项 ctrl+enter切换
Från och med
// ==UserScript==
// @name 视频添加填充方式
// @namespace http://tampermonkey.net/
// @version 0.1
// @description 为PC上的播放器增加视频填充方式选项 ctrl+enter切换
// @author 变异小僵尸
// @match *://*/*
// @require https://cdn.bootcdn.net/ajax/libs/jquery/2.2.4/jquery.min.js
// @grant unsafeWindow
// @grant GM_registerMenuCommand
// @grant GM_unregisterMenuCommand
// @grant GM_setValue
// @grant GM_getValue
// ==/UserScript==
(function () {
'use strict';
//参考自https://blog.csdn.net/k358971707/article/details/60465689
$(function () {
let video = false,
full = false,
fillType = 0, // 0默认 1拉伸 2填充
timeOut = false;
// 监听全屏变化
$(document).on('fullscreenchange', function () {
full = isFullscreen()
// console.log('isFull ', full)
if (full) {
$(full).find('video').each(function (i, v) {
if ($(v).attr('src')) {
video = $(v)
// 记录之前的style
setTimeout(() => {
video.attr('old-css', video.attr('style'))
}, 300);
return false
}
})
// console.log(video)
} else {
video = false
}
})
// 监听组合键
$(document).on('keydown', function (e) {
if (video) {
e.stopPropagation()
// console.log(e)
if (e.ctrlKey && e.keyCode == 13) {
if (fillType >= 2) {
fillType = 0
} else {
fillType += 1
}
// 创建提示dom并设置视频填充方式
// console.log(fillType)
setVideoFill()
}
}
})
// 创建提示dom并设置视频填充方式
function setVideoFill() {
let css = {
"top": 0,
"left": 0,
"right": 0,
"bottom": 0,
"height": "100vh",
"width": "100vw"
}, text = '自动';
if (fillType == 0) {
if (video.attr('old-css')) {
video.attr('style', video.attr('old-css'))
} else {
video.removeAttr('style')
}
text = '自动'
} else if (fillType == 1) {
video.css(Object.assign({}, css, { "object-fit": "fill" }))
text = '拉伸'
} else if (fillType == 2) {
video.css(Object.assign({}, css, { "object-fit": "cover" }))
text = '填充'
}
// 先移除之前的提示
if ($("#video-fill-type")) {
$("#video-fill-type").remove()
}
$(full).append(`
<div id="video-fill-type" style="position: fixed; z-index: 999999; top: 0; left: 0; right: 0; text-align: center; background: rgba(0, 0, 0, 0.8)">
<p style="font-size: 40px; padding-top: 20px; padding-bottom: 20px; color: #fff">填充方式：${text}</p>
</div>
`)
clearTimeout(timeOut)
timeOut = setTimeout(() => {
$("#video-fill-type").remove()
}, 1500);
}
// 检测是否全屏
function isFullscreen() {
return document.fullscreenElement ||
document.msFullscreenElement ||
document.mozFullScreenElement ||
document.webkitFullscreenElement || false;
}
})
})();