视频添加填充方式

为PC上的播放器增加视频填充方式选项 ctrl+enter切换
当前为 2020-11-21 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         视频添加填充方式
// @namespace    https://gf.qytechs.cn/zh-CN/scripts/416510-%E8%A7%86%E9%A2%91%E6%B7%BB%E5%8A%A0%E5%A1%AB%E5%85%85%E6%96%B9%E5%BC%8F
// @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;
		}
	})

})();
欢迎访问Greasy Fork镜像
