【自动宽屏模式支持视频/番剧/列表】此插件主要是为了兼容在宽屏模式下直接滚动至最上方会导致播放器不完整，所以把标题栏和头像移至视频下方
目前為
// ==UserScript==
// @name 【自动宽屏模式】哔哩哔哩标题及头像移至视频下方-优化BiliBili宽屏模式
// @namespace https://github.com/iMortRex
// @version 0.0.9
// @description 【自动宽屏模式支持视频/番剧/列表】此插件主要是为了兼容在宽屏模式下直接滚动至最上方会导致播放器不完整，所以把标题栏和头像移至视频下方
// @author Mort Rex
// @run-at document-end
// @match *.bilibili.com/video/*
// @match *.bilibili.com/bangumi/*
// @match *.bilibili.com/medialist/*
// @require https://code.jquery.com/jquery-2.1.4.min.js
// @icon https://www.bilibili.com/favicon.ico
// @grant GM_addStyle
// @grant GM_setValue
// @grant GM_getValue
// @grant GM_deleteValue
// @grant GM_registerMenuCommand
// @grant GM_unregisterMenuCommand
// @license CC BY-NC-SA
// ==/UserScript==
//初始化全局变量
if (GM_getValue("delayTime") == null) {
//默认延迟1.5秒
GM_setValue("delayTime", 1500);
}
if (GM_getValue("mode") == null) {
//默认模式为“适配宽屏模式”
GM_setValue("mode", 1);
}
if (GM_getValue("autoWidescreenSwitch") == null) {
//默认打开自动宽屏模式
GM_setValue("autoWidescreenSwitch", 1);
}
//菜单按钮
let time = GM_registerMenuCommand("更改延迟时间", function () {
timeClick();
});
let mode = GM_registerMenuCommand("更改模式", function () {
modeClick();
});
let autoWidescreen = GM_registerMenuCommand("开关自动宽屏模式", function () {
autoWidescreenClick();
});
//点击菜单按钮后触发事件
function timeClick() {
if (GM_getValue("delayTime") == 1000) {
GM_setValue("delayTime", 1500);
} else if (GM_getValue("delayTime") == 1500) {
GM_setValue("delayTime", 2000);
} else if (GM_getValue("delayTime") == 2000) {
GM_setValue("delayTime", 2500);
} else if (GM_getValue("delayTime") == 2500) {
GM_setValue("delayTime", 3000);
} else if (GM_getValue("delayTime") == 3000) {
GM_setValue("delayTime", 3500);
} else if (GM_getValue("delayTime") == 3500) {
GM_setValue("delayTime", 4000);
} else if (GM_getValue("delayTime") == 4000) {
GM_setValue("delayTime", 4500);
} else if (GM_getValue("delayTime") == 4500) {
GM_setValue("delayTime", 5000);
} else if (GM_getValue("delayTime") == 5000) {
GM_setValue("delayTime", 1000);
}
alert("已将延迟时间设置为：" + GM_getValue("delayTime") / 1000 + "秒");
}
function modeClick() {
if (GM_getValue("mode") == 1) {
GM_setValue("mode", 2);
alert("已设置成：适配宽屏模式");
} else {
GM_setValue("mode", 1);
alert("已设置成：延迟模式");
}
}
function autoWidescreenClick() {
if (GM_getValue("autoWidescreenSwitch") == 1) {
GM_setValue("autoWidescreenSwitch", 2);
alert("已开启自动宽屏模式");
} else {
GM_setValue("autoWidescreenSwitch", 1);
alert("已关闭自动宽屏模式");
}
}
//执行代码
(function () {
'use strict';
//自动宽屏模式
if (GM_getValue("autoWidescreenSwitch") == 1) {
//当开启自动宽屏模式时再执行脚本
var autoWidescreenEtime = 0;
autoWidescreen();
function autoWidescreen() {
if (window.location.href.match("bilibili.com/bangumi/")) {
console.log("哔哩哔哩宽屏优化-当前页面是：番剧");
autoWidescreenBangumi();
function autoWidescreenBangumi() {
if ($(".bpx-docker.bpx-docker-major div.bpx-player-container").length && $(".squirtle-video-widescreen.squirtle-video-item").length) {
//检测番剧页面宽屏模式相关元素是否加载完毕
if ($(".bpx-docker.bpx-docker-major div.bpx-player-container").attr("data-screen") == "normal") {
//如果当前不是宽屏模式则点击宽屏模式按钮
$(".squirtle-video-widescreen.squirtle-video-item").click();
}
} else {
//每100毫秒检测一次，8秒后不再执行
autoWidescreenEtime = autoWidescreenEtime + 100;
if (autoWidescreenEtime < 8000) {
setTimeout(autoWidescreenBangumi, 100);
}
}
}
} else {
console.log("哔哩哔哩宽屏优化-当前页面是：视频");
autoWidescreenVideo();
function autoWidescreenVideo() {
if ($(".bilibili-player-video-btn.bilibili-player-video-btn-widescreen").length) {
//检测视频页面宽屏模式相关元素是否加载完毕
if (document.querySelector(".bilibili-player-video-btn.bilibili-player-video-btn-widescreen:not(.closed)")) {
//检测当前是否已是宽屏模式
$(".bilibili-player-video-btn.bilibili-player-video-btn-widescreen").click();
}
} else {
//每100毫秒检测一次，8秒后不再执行
autoWidescreenEtime = autoWidescreenEtime + 100;
if (autoWidescreenEtime < 8000) {
setTimeout(autoWidescreenVideo, 100);
}
}
}
}
}
}
var modeCheckEtime = 0;
modeCheck();
console.log("哔哩哔哩宽屏优化-正在检测宽屏模式");
function modeCheck() {
if (GM_getValue("mode") == 1 && !window.location.href.match("bilibili.com/bangumi/")) {
//当前不为番剧页时
if (document.getElementById("bilibiliPlayer") && document.getElementById("bilibiliPlayer").classList.contains("mode-widescreen")) {
console.log("哔哩哔哩宽屏优化-宽屏模式已开启");
mainScript();
} else {
modeCheckEtime = modeCheckEtime + 100;
if (modeCheckEtime >= 8000) {
mainScript();
} else {
setTimeout(modeCheck, 100);
}
}
} else {
//延迟指定时间等待页面及其他脚本全部加载完毕后执行代码，否则会影响页面元素的加载及其他脚本的执行或干脆脚本执行后被后加载的页面逻辑覆盖掉
setTimeout(function () {
mainScript();
}, GM_getValue("delayTime"));//这里的时间是毫秒，可以根据自己的电脑性能进行调整
}
}
function mainScript() {
console.log("哔哩哔哩宽屏优化-当前延迟时间：" + GM_getValue("delayTime"));
if (GM_getValue("mode") == 1) {
console.log("哔哩哔哩宽屏优化-当前模式：适配宽屏模式");
} else {
console.log("哔哩哔哩宽屏优化-当前模式：延迟模式");
}
//
var viewboxCheckEtime = 0;
viewboxCheck();
function viewboxCheck() {
if (document.getElementById("viewbox_report")) {
//把标题栏移至视频下方
if (window.location.href.match("bilibili.com/video/")) {
//视频页和收藏列表页由于元素命名不同执行不同逻辑
$('#viewbox_report').insertAfter('#playerWrap');
} else {
$('#viewbox_report').insertAfter('#video-player');
}
} else {
viewboxCheckEtime = viewboxCheckEtime + 100;
if (viewboxCheckEtime >= 8000) {
$('#v_upinfo').insertAfter('#viewbox_report');
} else {
setTimeout(viewboxCheck, 100);
}
}
}
//
var upinfoCheckEtime = 0;
upinfoCheck();
function upinfoCheck() {
//把头像栏移至标题栏下方
if (document.getElementById("v_upinfo")) {
//检测头像栏是否加载完毕，如果是则继续运行
$('#v_upinfo').insertAfter('#viewbox_report');
} else {
upinfoCheckEtime = upinfoCheckEtime + 100;
if (upinfoCheckEtime >= 8000) {
$('#v_upinfo').insertAfter('#viewbox_report');
} else {
setTimeout(upinfoCheck, 100);
}
}
}
//
if ($('.v-wrap').length && $('.v-wrap').length > 0) {
//旧版界面
console.log("哔哩哔哩宽屏优化-当前为旧版界面");
//
if (window.location.href.match("bilibili.com/video/")) {
//调整标题栏样式
/*
为标题栏添加底部横线:横线[border-bottom]
调整标题栏高度和上下距离:高度[height]顶部间隙[padding-top]底部间隙[padding-bottom]
*/
//正常使用.css方法无法添加important后缀，使用cssText强行添加important后缀，想添加某个元素就用cssText，例如：$("a").css("cssText", "b")，删除某个元素就把后方变量留空，例如：$("a").css("b", "");
$(".video-info.report-wrap-module.report-scroll-module").css("cssText", "border-bottom: 1px solid #e5e9ef ! important; height: 80px ! important; padding-top: 16px ! important; padding-bottom: 12px ! important;");
//
//调整头像栏样式
/*
为头像蓝添加底部横线:横线[border-bottom]
调整头像栏高度与标题栏一致:高度[height]顶部间隙[padding-top]底部间隙[padding-bottom]
*/
$(".up-info.report-wrap-module.report-scroll-module").css("cssText", "border-bottom: 1px solid #e5e9ef ! important; height: 80px ! important; padding-top: 16px ! important; padding-bottom: 12px ! important;");
//调整头像栏宽度
/*
宽度[width]位置布局[margin]
*/
$(".up-info_right").css("cssText", "width: 100% ! important; margin: 6px 0px 0px 62px ! important;");
//调整头像右边距离
/*
位置布局[margin]
*/
$(".u-face").css("cssText", "margin: 2px -48px 0px 0px ! important;");
//调整名称
/*
调整名称高度:高度[line-height]
调整名称左边间距:位置布局[margin]
*/
//$(".name").css("cssText", "line-height: 24px ! important; margin: 4px 0px 0px 62px ! important");
//调整介绍
/*
调整介绍高度:顶部距离[margin-top]
调整介绍宽度:宽度[width]
*/
$(".desc").css("cssText", "width: 45% ! important;");
//调整充电和关注按钮
/*
调整充电和关注按钮与头像平齐:位置布局[margin]
调整充电和关注按钮高度和宽度:高度[height]位置布局[margin]
*/
$(".default-btn.follow-btn.btn-transition.b-gz").css("cssText", "height: 48px ! important; margin: 0px 0px 0px auto ! important;");
$(".default-btn.charge-btn.btn-transition").css("cssText", "height: 48px ! important;");
$(".btn-panel").css("cssText", "margin: -44px 6px 0px 0px ! important;");
if ($(".default-btn.charge-btn").length) {
//如果存在充电按钮则移除关注按钮的一个布局属性
$(".default-btn.follow-btn.btn-transition.b-gz").css("margin", "");
}
//调整三连栏底部横线样式
/*
横线[border-bottom]
*/
$(".video-toolbar.report-wrap-module.report-scroll-module").css("cssText", "border-bottom: 1px solid #e5e9ef ! important;");
} else if (window.location.href.match("bilibili.com/medialist/")) {
var bangumiCheckEtime = 0;
bangumiScript();
function bangumiScript() {
if ($(".btn-panel").length) {
//判断头像栏是否加载完毕
//调整标题栏样式
/*
为标题栏添加底部横线:横线颜色[border-bottom-color]横线粗细[border-bottom]
调整标题栏高度和上下距离:高度[height]顶部间隙[padding-top]底部间隙[padding-bottom]
*/
//正常使用.css方法无法添加important后缀，使用cssText强行添加important后缀，想添加某个元素就用cssText，例如：$("a").css("cssText", "b")，删除某个元素就把后方变量留空，例如：$("a").css("b", "");
$(".video-info.report-wrap-module.report-scroll-module").css("cssText", "border-bottom: 1px solid #e5e9ef ! important; height: 80px ! important; padding-top: 16px ! important; padding-bottom: 12px ! important;");
//
//调整头像栏样式
/*
为头像蓝添加底部横线:横线颜色[border-bottom-color]横线粗细[border-bottom]
调整头像栏高度与标题栏一致:高度[height]顶部间隙[padding-top]底部间隙[padding-bottom]
*/
$(".up-info.report-wrap-module.report-scroll-module").css("cssText", "border-bottom: 1px solid #e5e9ef ! important; height: 80px ! important; padding-top: 16px ! important; padding-bottom: 12px ! important;");
//调整头像栏宽度
/*
宽度[width]位置布局[margin]
*/
$(".up-info_right").css("cssText", "width: 100% ! important; margin: 6px 0px 0px 62px ! important;");
//调整头像右边距离
/*
位置布局[margin]
*/
$(".u-face").css("cssText", "margin: 2px -48px 0px 0px ! important;");
//调整名称
/*
调整名称高度:高度[line-height]
调整名称左边间距:位置布局[margin]
*/
//$(".up-info.up-info_right.name").css("cssText", "line-height: 24px ! important; margin: 4px 0px 0px 62px ! important");
//调整介绍
/*
调整介绍高度:顶部距离[margin-top]
调整介绍宽度:宽度[width]
*/
$(".desc").css("cssText", "width: 45% ! important;");
//调整充电和关注按钮
/*
调整充电和关注按钮与头像平齐:位置布局[margin]
调整充电和关注按钮高度和宽度:高度[height]位置布局[margin]
*/
$(".default-btn.follow-btn.btn-transition.b-gz").css("cssText", "height: 48px ! important; margin: 0px 0px 0px auto ! important;");
$(".default-btn.charge-btn.btn-transition").css("cssText", "height: 48px ! important;");
$(".btn-panel").css("cssText", "margin: -44px 6px 0px 0px ! important;");
if ($(".default-btn.charge-btn").length) {
//如果存在充电按钮则移除关注按钮的一个布局属性
$(".default-btn.follow-btn.btn-transition.b-gz").css("margin", "");
}
//调整三连栏底部横线样式
/*
横线[border-bottom]
*/
$(".video-toolbar.report-wrap-module.report-scroll-module").css("cssText", "border-bottom: 1px solid #e5e9ef ! important;");
} else {
bangumiCheckEtime = bangumiCheckEtime + 100;
if (bangumiCheckEtime < 5000) {
setTimeout(bangumiScript, 100);
}
}
}
}
} else {
//新版界面
console.log("哔哩哔哩宽屏优化-当前为新版界面");
//
//调整标题栏样式
/*
为标题栏添加底部横线:横线[border-bottom]
调整标题栏高度:高度[height]顶部间隙[padding-top]底部间隙[padding-bottom]
*/
$(".video-info-v1").css("cssText", "border-bottom: 1px solid #e5e9ef ! important; height: 86px ! important; padding-top: 16px ! important; padding-bottom: 12px ! important;");
//
//调整头像栏样式
/*
为头像栏添加底部横线:横线[border-bottom]
调整头像栏高度与标题栏一致:高度[height]顶部间隙[padding-top]底部间隙[padding-bottom]位置布局[margin]
*/
$(".up-info-v1").css("cssText", "border-bottom: 1px solid #e5e9ef ! important; height: 86px ! important; padding-top: 16px ! important; padding-bottom: 12px ! important; margin: 0px 0px 0px 0px ! important;");
//调整头像右侧信息/关注宽度
/*
宽度[width]左侧距离[margin-left]
*/
$(".up-info_right").css("cssText", "width: 100% ! important; margin-left: 0px ! important;");
//调整头像位置
/*
位置布局[margin]
*/
$(".u-face").css("cssText", "margin: 4px 0px 0px 0px ! important;");
//调整头像栏有装饰时的位置
/*
宽度[width]高度[height]布局中位置[position]
*/
if ($('.u-face.has-pendant').length && $('.u-face.has-pendant').length > 0) {
//存在头像装饰
$(".u-face.has-pendant").css("cssText", "width: 48px ! important; height: 48px ! important;");
$(".u-face__avatar.avatar-loaded").css("cssText", "width: 40px ! important; height: 40px ! important; position: unset ! important;");
}
//调整名称
/*
调整名称高度:位置布局[margin]
*/
$(".up-info_right").css("cssText", "padding-top: 4px ! important; margin: 0px 0px 0px 14px ! important;");
//调整介绍
/*
调整介绍高度:位置布局[margin]
调整介绍宽度:宽度[width]顶部间隙[padding-top]
*/
$(".desc").css("cssText", "margin: 0px 0px 0px 0px ! important; width: 54% ! important;");
//调整充电和关注按钮
/*
调整充电和关注按钮与头像平齐:位置布局[margin]对其位置[float]
调整充电和关注按钮高度和宽度:高度[height]宽度[width]右侧距离[margin-right]
*/
//
//整体
$(".btn-panel").css("cssText", "margin: -42px 0px 0px 0px ! important; float: right ! important; height: 48px ! important;");
//关注按钮
$(".default-btn.follow-btn.btn-transition.b-gz").css("cssText", "width: 120px ! important; margin-right: 10px ! important; height: 48px ! important;");
//充电按钮
$(".default-btn.charge-btn.btn-transition").css("cssText", "width: 70px ! important; height: 48px ! important;");
}
window.scrollTo(0, 0);
}
})();
QingJ © 2025
镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址