让所有视频网页全屏，开启画中画功能
// ==UserScript==
// @name Maximize Video
// @name:zh-CN 视频网页全屏-自用
// @namespace none
// @description Maximize all video players.Support Piture-in-picture. 12.0.1 修复youtube层叠显示错误
// @description:zh-CN 让所有视频网页全屏，开启画中画功能
// @author lzx 改自 冻猫
// @include *
// @exclude *www.w3school.com.cn*
// @version 12.0.1
// @run-at document-end
// @license MIT
// ==/UserScript==
;(() => {
const gv = {
isFull: false,
isIframe: false,
autoCheckCount: 0,
}
const html5Rules = {
"www.acfun.cn": [".player-container .player"],
"www.bilibili.com": ["#bilibiliPlayer"],
"www.douyu.com": ["#js-player-video-case"],
"www.huya.com": ["#videoContainer"],
"www.twitch.tv": [".player"],
"www.youtube.com": ["#movie_player", "#player"],
"www.yy.com": ["#player"],
"*weibo.com": ['[aria-label="Video Player"]', ".html5-video-live .html5-video"],
"v.huya.com": ["#video_embed_flash>div"],
}
const generalPlayerRules = [".dplayer", ".video-js", ".jwplayer", "[data-player]"]
if (window.top !== window.self) {
gv.isIframe = true
}
if (navigator.language.toLocaleLowerCase() == "zh-cn") {
gv.btnText = {
max: "网页全屏",
pip: "画中画",
tip: "Iframe内视频，请用鼠标点击视频后重试",
}
} else {
gv.btnText = {
max: "Maximize",
pip: "PicInPic",
tip: "Iframe video. Please click on the video and try again",
}
}
const tool = {
print(log) {
const now = new Date()
const year = now.getFullYear()
const month = (now.getMonth() + 1 < 10 ? "0" : "") + (now.getMonth() + 1)
const day = (now.getDate() < 10 ? "0" : "") + now.getDate()
const hour = (now.getHours() < 10 ? "0" : "") + now.getHours()
const minute = (now.getMinutes() < 10 ? "0" : "") + now.getMinutes()
const second = (now.getSeconds() < 10 ? "0" : "") + now.getSeconds()
const timenow = "[" + year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second + "]"
console.log(timenow + "[Maximize Video] > " + log)
},
getRect(element) {
const rect = element.getBoundingClientRect()
const scroll = tool.getScroll()
return {
pageX: rect.left + scroll.left,
pageY: rect.top + scroll.top,
screenX: rect.left,
screenY: rect.top,
}
},
getScroll() {
return {
left: document.documentElement.scrollLeft || document.body.scrollLeft,
top: document.documentElement.scrollTop || document.body.scrollTop,
}
},
addStyle(css) {
const style = document.createElement("style")
style.type = "text/css"
const node = document.createTextNode(css)
style.appendChild(node)
document.head.appendChild(style)
return style
},
matchRule(str, rule) {
return new RegExp("^" + rule.split("*").join(".*") + "$").test(str)
},
createButton(id) {
const btn = document.createElement("tbdiv")
btn.id = id
btn.onclick = () => {
maximize.playerControl()
}
document.body.appendChild(btn)
return btn
},
}
const setButton = {
init() {
if (!document.getElementById("playerControlBtn")) {
init()
}
if (gv.isIframe && gv.player && tool.isHalfFullClient(gv.player)) {
window.parent.postMessage("iframeVideo", "*")
return
}
this.show()
},
show() {
gv.player.removeEventListener("mouseleave", handle.leavePlayer, false)
gv.player.addEventListener("mouseleave", handle.leavePlayer, false)
gv.controlBtn.style.display = "block"
gv.controlBtn.style.visibility = "visible"
if (document.pictureInPictureEnabled && gv.player.nodeName != "OBJECT" && gv.player.nodeName != "EMBED") {
gv.picinpicBtn.style.display = "block"
gv.picinpicBtn.style.visibility = "visible"
}
this.locate()
},
locate() {
const playerRect = tool.getRect(gv.player)
gv.controlBtn.style.opacity = "0.5"
gv.controlBtn.innerHTML = gv.btnText.max
gv.controlBtn.style.top = playerRect.screenY - 20 + "px"
gv.controlBtn.style.left = playerRect.screenX - 64 + gv.player.offsetWidth + "px"
gv.picinpicBtn.style.opacity = "0.5"
gv.picinpicBtn.innerHTML = gv.btnText.pip
gv.picinpicBtn.style.top = gv.controlBtn.style.top
gv.picinpicBtn.style.left = playerRect.screenX - 64 + gv.player.offsetWidth - 54 + "px"
},
}
const handle = {
getPlayer(e) {
if (gv.isFull) return
gv.mouseoverEl = e.target
const hostname = document.location.hostname
let players = []
for (let i in html5Rules) {
if (tool.matchRule(hostname, i)) {
for (let html5Rule of html5Rules[i]) {
if (document.querySelectorAll(html5Rule).length > 0) {
for (let player of document.querySelectorAll(html5Rule)) {
players.push(player)
}
}
}
break
}
}
if (players.length == 0) {
for (let generalPlayerRule of generalPlayerRules) {
if (document.querySelectorAll(generalPlayerRule).length > 0) {
for (let player of document.querySelectorAll(generalPlayerRule)) {
players.push(player)
}
}
}
}
if (players.length > 0) {
const path = e.path || e.composedPath()
for (let v of players) {
if (path.indexOf(v) > -1) {
gv.player = v
setButton.init()
return
}
}
}
switch (e.target.nodeName) {
case "VIDEO":
case "OBJECT":
case "EMBED":
if (e.target.offsetWidth > 399 && e.target.offsetHeight > 220) {
gv.player = e.target
setButton.init()
}
break
default:
handle.leavePlayer()
}
},
leavePlayer() {
if (gv.controlBtn.style.visibility == "visible") {
gv.controlBtn.style.opacity = ""
gv.controlBtn.style.visibility = ""
gv.picinpicBtn.style.opacity = ""
gv.picinpicBtn.style.visibility = ""
gv.player.removeEventListener("mouseleave", handle.leavePlayer, false)
}
},
hotKey(e) {
if (e.keyCode == 27) {
maximize.playerControl()
}
if (e.keyCode == 113) {
handle.pictureInPicture()
}
},
pictureInPicture() {
if (!document.pictureInPictureElement) {
if (gv.player) {
if (gv.player.nodeName == "IFRAME") {
gv.player.contentWindow.postMessage("iframePicInPic", "*")
} else {
gv.player.parentNode.querySelector("video").requestPictureInPicture()
}
} else {
document.querySelector("video").requestPictureInPicture()
}
} else {
document.exitPictureInPicture()
}
},
}
const maximize = {
playerControl() {
if (!gv.player) return
this.checkParent()
if (!gv.isFull) {
if (gv.isIframe) {
window.parent.postMessage("parentFull", "*")
}
if (gv.player.nodeName == "IFRAME") {
gv.player.contentWindow.postMessage("innerFull", "*")
}
this.fullWin()
} else {
if (gv.isIframe) {
window.parent.postMessage("parentSmall", "*")
}
if (gv.player.nodeName == "IFRAME") {
gv.player.contentWindow.postMessage("innerSmall", "*")
}
this.smallWin()
}
},
checkParent() {
if (gv.isFull) return
gv.playerParents = []
let full = gv.player
while ((full = full.parentNode)) {
if (full.nodeName == "BODY") break
if (full.getAttribute) gv.playerParents.push(full)
}
},
fullWin() {
if (!gv.isFull) {
document.removeEventListener("mouseover", handle.getPlayer, false)
gv.backHtmlId = document.body.parentNode.id
gv.backBodyId = document.body.id
if (document.location.hostname === "www.youtube.com") {
const watchFlexy = document.querySelector("ytd-watch-flexy")
if (watchFlexy && !watchFlexy.hasAttribute("theater")) {
watchFlexy.setAttribute("theater", "")
gv.ytbTheater = true
}
}
gv.leftBtn.style.display = "block"
gv.rightBtn.style.display = "block"
this.addClass()
}
gv.isFull = true
},
addClass() {
document.body.parentNode.id = "htmlToothbrush"
document.body.id = "bodyToothbrush"
for (let v of gv.playerParents) {
v.classList.add("parentToothbrush")
if (getComputedStyle(v).position == "fixed") {
v.classList.add("absoluteToothbrush")
}
}
gv.player.classList.add("playerToothbrush")
if (gv.player.nodeName == "VIDEO") {
gv.backControls = gv.player.controls
gv.player.controls = true
}
window.dispatchEvent(new Event("resize"))
},
smallWin() {
document.body.parentNode.id = gv.backHtmlId
document.body.id = gv.backBodyId
for (let v of gv.playerParents) {
v.classList.remove("parentToothbrush")
v.classList.remove("absoluteToothbrush")
}
gv.player.classList.remove("playerToothbrush")
if (document.location.hostname === "www.youtube.com" && gv.ytbTheater) {
const watchFlexy = document.querySelector("ytd-watch-flexy[theater]")
if (watchFlexy) watchFlexy.removeAttribute("theater")
gv.ytbTheater = false
}
if (gv.player.nodeName == "VIDEO") {
gv.player.controls = gv.backControls
}
gv.leftBtn.style.display = ""
gv.rightBtn.style.display = ""
document.addEventListener("mouseover", handle.getPlayer, false)
window.dispatchEvent(new Event("resize"))
gv.isFull = false
},
}
const init = () => {
gv.picinpicBtn = document.createElement("tbdiv")
gv.picinpicBtn.id = "picinpicBtn"
gv.picinpicBtn.onclick = () => handle.pictureInPicture()
document.body.appendChild(gv.picinpicBtn)
gv.controlBtn = tool.createButton("playerControlBtn")
gv.leftBtn = tool.createButton("leftFullStackButton")
gv.rightBtn = tool.createButton("rightFullStackButton")
tool.addStyle(
[
"#htmlToothbrush, #bodyToothbrush {overflow:hidden !important;zoom:100% !important;}",
"#htmlToothbrush #bodyToothbrush .parentToothbrush {overflow:visible !important;z-index:auto !important;transform:none !important;-webkit-transform-style:flat !important;transition:none !important;contain:none !important;}",
"#htmlToothbrush #bodyToothbrush .absoluteToothbrush {position:absolute !important;}",
"#htmlToothbrush #bodyToothbrush .parentToothbrush .bilibili-player-video {margin:0 !important;}",
"#htmlToothbrush #bodyToothbrush .playerToothbrush {position:fixed !important;top:0px !important;left:0px !important;width:100vw !important;height:100vh !important;max-width:none !important;max-height:none !important;min-width:0 !important;min-height:0 !important;margin:0 !important;padding:0 !important;z-index:2147483646 !important;border:none !important;background-color:#000 !important;transform:none !important;}",
"#htmlToothbrush #bodyToothbrush .parentToothbrush video {object-fit:contain !important;}",
"#htmlToothbrush #bodyToothbrush .parentToothbrush .videoToothbrush {width:100vw !important;height:100vh !important;}",
/* YouTube 专属隐藏：隐藏顶部栏、侧边栏、相关视频区、视频下方所有元信息（标题、描述、频道、订阅按钮、评论等） */
"#htmlToothbrush #bodyToothbrush #masthead-container, #htmlToothbrush #bodyToothbrush ytd-watch-flexy #secondary, #htmlToothbrush #bodyToothbrush #related, #htmlToothbrush #bodyToothbrush ytd-watch-metadata, #htmlToothbrush #bodyToothbrush ytd-watch-flexy #primary #below, #htmlToothbrush #bodyToothbrush ytd-watch-flexy #info, #htmlToothbrush #bodyToothbrush ytd-watch-flexy #meta {display:none !important;}",
'#playerControlBtn {text-shadow: none;visibility:hidden;opacity:0;display:none;transition: all 0.5s ease;cursor: pointer;font: 12px "微软雅黑";margin:0;width:64px;height:20px;line-height:20px;border:none;text-align: center;position: fixed;z-index:2147483647;background-color: #27A9D8;color: #FFF;} #playerControlBtn:hover {visibility:visible;opacity:1;background-color:#2774D8;}',
'#picinpicBtn {text-shadow: none;visibility:hidden;opacity:0;display:none;transition: all 0.5s ease;cursor: pointer;font: 12px "微软雅黑";margin:0;width:53px;height:20px;line-height:20px;border:none;text-align: center;position: fixed;z-index:2147483647;background-color: #27A9D8;color: #FFF;} #picinpicBtn:hover {visibility:visible;opacity:1;background-color:#2774D8;}',
"#leftFullStackButton{display:none;position:fixed;width:1px;height:100vh;top:0;left:0;z-index:2147483647;background:#000;}",
"#rightFullStackButton{display:none;position:fixed;width:1px;height:100vh;top:0;right:0;z-index:2147483647;background:#000;}",
].join("\n")
)
document.addEventListener("mouseover", handle.getPlayer, false)
document.addEventListener("keydown", handle.hotKey, false)
tool.print("Ready")
}
init()
})()