从油猴教程传送过来的.哈哈哈. 之前也研究过一段时间的宽频方案. 撸了一个通用方案 . 可以参考一下
fullscreen: /*#__PURE__*/ (() => {
const ATTR = "data-web-fullscreen";
incss(`[${ATTR}]{
inset:0!important;
margin:0!important;
padding:0!important;
position:fixed!important;
z-index:1234567890!important;
width:100dvw!important;
height:100dvh!important;
min-width:0!important;
min-height:0!important;
max-width:100dvw!important;
max-height:100dvh!important;
background:#000!important;
transform:none!important;
object-fit:contain!important;
}`);
const VIDEO_CONTAINERS = [".xgplayer", ".dplayer", ".art-video-player", ".plyr", ".jwplayer", "#video_container"].join(","); // closest 底层c++， 放心追加， 避免dom.scrollHeight 触发重绘重排
const findContainer = (el) => {
if (!el?.tagName || el.tagName === "IFRAME" || el.controls) return el;
const customContainer = el.closest(VIDEO_CONTAINERS);
if (customContainer) return customContainer;
let parent = el.parentElement;
const height = el.scrollHeight;
for (let n = 2; n-- > 0 && parent && parent !== document.body && Math.abs(height - parent.scrollHeight) < 1; ) parent = parent.parentElement;
console.log("[ parent - 考虑优化： ]", parent);
return parent;
};
let parents = null; // 缓存祖先链，避免清空时重复dom查找
const toggle = (el) => {
if (parents) return (parents.forEach((e) => e.removeAttribute(ATTR)), (parents = null));
for (el = findContainer(el); el?.tagName && el !== document.body; el = el.parentElement) ((parents ||= []).push(el), el.setAttribute(ATTR, ""));
};
const relay = () => imsg.toParent(ATTR, location.pathname + location.search);
const isTop = window.top === window;
imsg.on(ATTR, isTop ? (src) => toggle(document.querySelector(`iframe[src$="${src}"], iframe[src*="m3u8"]`)) : relay);
return {
web: (el = videoController.player) => (toggle(el), isTop || relay()),
full: (el = videoController.player) => (document.fullscreenElement ? document.exitFullscreen() : el.parentElement.requestFullscreen()),
};
})(),
export const imsg = /*#__PURE__*/ (() => {
const send = (target, channel, data) => target?.postMessage && target.postMessage({ __iframeMsg__: true, channel, data }, "*");
return {
send,
toParent(channel, data = {}) {
send(window.parent, channel, data);
},
toTop(channel, data = {}) {
send(window.top, channel, data);
},
reply(event, channel, data = {}) {
event.source && send(event.source, channel, data);
},
on(channel, callback) {
const handler = (e) => {
const m = e.data;
if (m?.__iframeMsg__ && m.channel === channel) callback(m.data, e);
};
window.addEventListener("message", handler);
return () => window.removeEventListener("message", handler);
},
};
})();
置顶卡
沉默卡
照妖镜
