Greasy Fork is available in English.

视频添加填充方式

为PC上的播放器增加视频填充方式选项 ctrl+enter切换

// ==UserScript==
// @name         视频添加填充方式
// @namespace    https://greasyfork.org/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.5
// @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,
			fill = {
				index: 0,
				// type: ['默认', '填充', '拉伸']
				type: ['默认', '填充']
			},
			timeOut = false;
		// 创建监听DOM对象
		const observe = new MutationObserver(function (mutations, observe) {
			//console.log(mutations, observe)
			// 变化了更新 old css
			if (fill.index == 0 && video) {
				video.attr('old-css', video.attr('style'))
			}
		});
		// 监听进入或退出全屏事件
		$(document).on('fullscreenchange webkitfullscreenchange mozfullscreenchange', function () {
			// 是否全屏
			full = isFullscreen()
			// 初始化
			init()
		})
		// 监听组合键
		$(document).on('keydown', function (e) {
			if (full && video) {
				e.stopPropagation()
				// console.log(e)
				if (e.ctrlKey && e.keyCode == 13) {
					if (fill.index >= fill.type.length - 1) {
						fill.index = 0
					} else {
						fill.index += 1
					}
					// 创建提示dom并设置视频填充方式
					setVideoFill()
				}
			}
		})
		// 初始化
		function init() {
			// console.log('isFull ', $(full))
			if (full) {
				//console.log(video)
				if (!video || !video[0].src || !video[0].source) {
					if ($(full)[0].tagName == "VIDEO") {
						// 初始化video
						initVideo($(full))
					} else {
						$(full).find('video').each(function (i, v) {
							// 查找有效的video标签
							if ($(v).attr('src') || $(v).find("source")) {
								// 初始化video
								initVideo($(v))
								// 跳出循环
								return false
							}
						})
					}
				} else {
					// 恢复填充方式
					restFill()
				}
				// 初始化
				function initVideo(v) {
					// 赋值video
					video = v
					// console.log("视频标签：", video)
					// 记录之前的style
					video.attr('old-css', video.attr('style'))
					// 取消video的监听
					observe.disconnect()
					// 监控video style变化
					observe.observe(video[0], { attributeFilter: ['style'], subtree: true });
					// 恢复填充方式
					restFill()
				}
				// 恢复填充方式
				function restFill() {
					if (fill.index != 0) {
						setVideoFill()
					}
				}
			} else {
				// 恢复css
				restCss()
			}
		}
		// 创建提示dom并设置视频填充方式
		function setVideoFill() {
			let css = {
				"top": 0,
				"left": 0,
				"right": 0,
				"bottom": 0,
				"height": "100vh",
				"width": "100vw"
			};
			switch (fill.index) {
				case 0:
					restCss()
					break;
				case 1:
					video.css(Object.assign({}, css, { "object-fit": "cover" }))
					break;
				case 2:
					video.css(Object.assign({}, css, { "object-fit": "fill" }))
					break;
				default:
					restCss()
					break;
			}
			// 先移除之前的提示
			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.0)">
				<p style="font-size: 40px; padding-top: 20px; padding-bottom: 20px; color: #fff; text-shadow: 0 0 10px black;">${fill.type[fill.index]}</p>
			</div>
			`)
			clearTimeout(timeOut)
			timeOut = setTimeout(() => {
				$("#video-fill-type").remove()
			}, 1500);
		}
		// 恢复css
		function restCss() {
			if (video.attr('old-css')) {
				video.attr('style', video.attr('old-css'))
			} else {
				video.removeAttr('style')
			}
		}
		// 检测是否全屏
		function isFullscreen() {
			return document.fullscreenElement ||
				document.msFullscreenElement ||
				document.mozFullScreenElement ||
				document.webkitFullscreenElement || false;
		}
	})
})();