根据Bilibili Player 小窗口助手这个脚本用AI修改而来，部分地方不太严谨，能用。
适用于普通横竖视频、番剧、电视剧、电影视频播放页面。
横竖视频的高度分别设置为浏览器窗口的0.5和0.6。
对于背景有图片的电影页面，若浏览器窗口较小时，底部的发送栏没有隐藏，并且自动铺满窗口，示例图在最后。
代码部分
// @name Bilibili Player 小窗口助手
// @namespace https://www.bilibili.com/
// @version 2024-12-02
// @description 自改 调整小窗位置和大小 浏览器脚本
// @author Anthony Lee
// @match https://www.bilibili.com/*
// @icon https://www.bilibili.com/favicon.ico
// @grant none
// @license MIT
// ==/UserScript==
(function() {
'use strict';
const getMaxHeights = () => {
const windowHeight = window.innerHeight;
return {
maxLandscapeHeight: `${windowHeight * 0.5}px`, // 横屏视频最大高度为窗口高度的50%
maxPortraitHeight: `${windowHeight * 0.6}px` // 竖屏视频最大高度为窗口高度的60%
};
};
const getResponsiveStyles = (videoElement) => {
if (videoElement && videoElement.videoWidth && videoElement.videoHeight) {
const aspectRatio = videoElement.videoWidth / videoElement.videoHeight; // 计算宽高比
let width, height;
if (aspectRatio > 1) { // 横屏
height = `${window.innerHeight * 0.5}px`; // 动态高度受限
width = `${parseInt(height) * aspectRatio}px`; // 根据高度计算宽度
} else { // 竖屏
height = `${window.innerHeight * 0.6}px`; // 动态高度受限
width = `${parseInt(height) * aspectRatio}px`; // 根据高度计算宽度
}
// 如果计算出的宽度大于窗口宽度，重新计算高度
if (parseInt(width) > window.innerWidth) {
width = `${window.innerWidth}px`; // 将宽度设为窗口的宽度
//height = `${parseInt(width) / aspectRatio}px`; // 重新根据宽度计算高度
height = `${window.innerWidth / aspectRatio}px`; // 重新根据宽度计算高度
}
return {
width: Math.min(parseInt(width), window.innerWidth) + "px", // 宽度取计算值或窗口宽度中较小值
height: Math.min(parseInt(height), aspectRatio > 1 ? parseInt(getMaxHeights().maxLandscapeHeight) : parseInt(getMaxHeights().maxPortraitHeight)) + "px" // 设置动态高度，确保不超过最大高度
};
}
return { width: "auto", height: "auto" }; // 如果无法获得视频信息，则返回自适应
};
const getIntersectionThreshold = () => {
return window.innerWidth < 1000 ? 1.0 : 0.9;
};
const observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
const playerContainer = document.querySelector(".bpx-player-container") || document.querySelector(".video_playerInner__ox52b");
const videoElement = playerContainer ? playerContainer.querySelector("video") : null; // 获取视频元素
const danmakuContainer = document.querySelector(".bpx-player-sending-area"); // 获取弹幕栏
if (playerContainer) {
const styles = getResponsiveStyles(videoElement); // 获取自适应样式
if (entry.isIntersecting) {
// 当播放器在视口内时，应用自适应样式
playerContainer.style.position = '';
playerContainer.style.left = '';
playerContainer.style.top = '';
playerContainer.style.width = '';
playerContainer.style.height = '';
playerContainer.style.zIndex = '';
if (danmakuContainer) {
danmakuContainer.style.display = ''; // 显示弹幕栏
}
} else {
// 当小窗口不在视口内时，使用固定位置和自适应样式
playerContainer.style.position = "fixed";
playerContainer.style.left = window.innerWidth < 1000 ? "0%" : "0%";
playerContainer.style.top = "0px";
playerContainer.style.width = styles.width; // 设置自适应宽度
playerContainer.style.height = styles.height; // 设置自适应高度
playerContainer.style.zIndex = "9999";
if (danmakuContainer) {
danmakuContainer.style.display = 'none'; // 隐藏弹幕栏
}
}
}
});
},
{ threshold: getIntersectionThreshold() }
);
const playerWrap = document.getElementById("playerWrap") || document.getElementById("bilibili-player");
if (playerWrap) {
observer.observe(playerWrap); // 观察播放区域的可见性
} else {
console.warn("#playerWrap or #bilibili-player element not found."); // 找不到播放区域时的警告
}
})();
效果图示
部分电影小窗时会有出入
