☰

YouTube播放器网页全屏

YouTube 视频播放器网页全屏，仅针对剧场模式有效，请先按 t 进入剧场模式，按 n 快捷键触发（再次按 n 可取消全屏）

// ==UserScript==
// @name         YouTube播放器网页全屏
// @namespace    http://tampermonkey.net/
// @version      1.0.3
// @description  YouTube 视频播放器网页全屏，仅针对剧场模式有效，请先按 t 进入剧场模式，按 n 快捷键触发（再次按 n 可取消全屏）
// @author       meteora
// @match        https://www.youtube.com/*
// @match        https://www.youtube.com
// @icon         https://www.google.com/s2/favicons?sz=64&domain=youtube.com
// @grant        none
// @license MIT
// ==/UserScript==

;(() => {
	try {
		// 创建全屏按钮样式
		const style = document.createElement("style")
		style.textContent = `
        .webpage-fullscreen {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            width: 100vw !important;
            height: 100vh !important;
            max-width: none !important;
            max-height: none !important;
            z-index: 9999 !important;
            background: black;
        }
    `
		document.head.appendChild(style)

		let isWebpageFullscreen = false
		document.addEventListener("keydown", function (event) {
			// 忽略在输入框中的按键事件
			if (
				event.target.tagName === "INPUT" ||
				event.target.tagName === "TEXTAREA" ||
				event.target.id === "contenteditable-root"
			) {
				return
			}
			function enableFullscreen() {
				const videoContainer = document.getElementById("full-bleed-container")
				if (!videoContainer) return
				isWebpageFullscreen = true
				videoContainer.classList.add("webpage-fullscreen")
				// 模拟屏幕尺寸变化，让播放器大小自适应
				window.dispatchEvent(new Event("resize"))
			}
			function disableFullscreen() {
				const videoContainer = document.getElementById("full-bleed-container")
				if (!videoContainer) return
				if (isWebpageFullscreen) {
					videoContainer.classList.remove("webpage-fullscreen")
					isWebpageFullscreen = false
					// 显示网页滚动条
					// document.documentElement.style.overflow = "auto"
					// 模拟屏幕尺寸变化，让播放器大小自适应
					window.dispatchEvent(new Event("resize"))
				}
			}
			// 按键盘 n 触发
			if (event.key === "n") {
				if (isWebpageFullscreen) {
					disableFullscreen()
				} else {
					enableFullscreen()
				}
				// 阻止默认行为
				event.preventDefault()
				// 按键盘 esc 触发
			} else if (event.key === "Escape") {
				if (isWebpageFullscreen) {
					disableFullscreen()
					// 阻止默认行为
					event.preventDefault()
				}
			}
		})

		setTimeout(() => {
			// 找出视频播放器容器
			const videoDom = document.querySelector("video")
			const videoWrapperContainer = document.getElementById(
				"full-bleed-container"
			)
			videoWrapperContainer.style.position = "relative"
			// 将视频播放器的播放速度反映到屏幕右上角显示
			function removePlayRateInfo() {
				const oldDom = document.getElementById("play-rate-show-info")
				if (oldDom) {
					oldDom.remove()
				}
			}
			function setPlayRateInfo(playRate) {
				// 移除之前插入的元素
				removePlayRateInfo()
				const domText = `<div style="color: white; font-size: 20px; position: absolute; z-index: 999; right: 20px; top: 20px;" id="play-rate-show-info">${playRate}</div>`
				// 将元素作为子节点插入到 videoWrapperContainer 中
				videoWrapperContainer.insertAdjacentHTML("beforeend", domText)
			}
			// 查询视频播放器的播放速度
			let playRate = videoDom.playbackRate
			if (playRate !== 1) {
				setPlayRateInfo(playRate)
			}

			videoDom.addEventListener("ratechange", function () {
				playRate = videoDom.playbackRate
				if (playRate !== 1) {
					setPlayRateInfo(playRate)
				} else {
					removePlayRateInfo()
				}
			})
		}, 3000)
	} catch (e) {
		console.log(e, "error")
		window.alert(e)
	}
})()