Bilibili-Old终极指南：如何一键恢复B站经典界面与播放器

Bilibili-Old终极指南：如何一键恢复B站经典界面与播放器

【免费下载链接】Bilibili-Old恢复旧版Bilibili页面，为了那些念旧的人。项目地址: https://gitcode.com/gh_mirrors/bi/Bilibili-Old

还在为B站新版界面的复杂设计感到困扰吗？Bilibili-Old项目为你提供了完美的解决方案——通过浏览器扩展或用户脚本，一键恢复B站的经典网页布局和小电视播放器。这个开源工具不仅满足怀旧需求，更在旧版框架下融入了现代化的功能特性，为技术爱好者和进阶用户打造了高效、专业的B站使用体验。

🎯 问题场景：当现代设计遇上怀旧需求

Bilibili-Old项目诞生于一个简单却强烈的需求：许多用户对2019年前B站的简洁界面情有独钟。随着B站不断改版，新版界面虽然功能丰富，但对于追求专注观看体验的用户来说，却带来了不必要的视觉干扰和操作复杂度。

"我们怀念的不仅仅是界面，更是那个专注于内容的时代。"——项目维护者MotooriKashin

技术挑战：逆向工程与兼容性维护

恢复旧版界面面临多重技术挑战：

1. API接口变更：B站新版API与旧版完全不兼容
2. 页面结构重构：HTML/CSS/JavaScript全面重写
3. 功能缺失：旧版界面缺乏新版功能支持
4. 持续维护：需要跟踪B站每次更新

🔧 解决方案：双轨制部署架构

Bilibili-Old采用灵活的部署策略，满足不同用户群体的需求：

方案一：Tampermonkey用户脚本（快速部署）

对于希望快速体验的用户，Tampermonkey脚本提供了最便捷的安装方式：

1. 安装脚本管理器：在浏览器中安装Tampermonkey扩展
2. 导入用户脚本：从项目仓库获取最新的用户脚本
3. 一键启用：访问B站页面即可自动生效

Bilibili-Old加载动画，展现旧版小电视的经典眨眼效果

方案二：Chrome扩展程序（专业稳定）

对于需要更稳定运行环境的用户，Chrome扩展版本提供了原生支持：

# 克隆项目到本地 git clone https://gitcode.com/gh_mirrors/bi/Bilibili-Old cd Bilibili-Old

安装步骤：

1. 打开Chrome扩展管理页面（chrome://extensions/）
2. 启用"开发者模式"
3. 点击"加载已解压的扩展程序"
4. 选择项目中的chrome目录

🛠️ 技术实现深度解析

核心架构：模块化设计

Bilibili-Old采用高度模块化的架构设计，主要代码结构如下：

src/ ├── core/ # 核心功能模块 │ ├── player.ts # 播放器恢复逻辑 │ ├── danmaku.ts # 弹幕系统处理 │ └── ui.ts # 用户界面管理 ├── io/ # API接口层 │ ├── api.ts # 通用API处理 │ └── urls.ts # 接口地址管理 └── page/ # 页面转换逻辑 ├── av.ts # 视频页面恢复 └── bangumi.ts # 番剧页面恢复

关键技术：智能页面检测与转换

项目通过src/core/observer.ts实现页面状态监控，实时检测B站页面变化并触发相应的恢复逻辑：

// 页面观察器核心逻辑 class PageObserver { private static instance: PageObserver; private currentPath = ''; private constructor() { // 监听页面导航事件 window.addEventListener('popstate', this.handleNavigation); // 监听DOM变化 new MutationObserver(this.handleDOMChanges); } private handleNavigation = () => { const newPath = location.pathname; if (this.currentPath !== newPath) { this.currentPath = newPath; this.dispatchPageChange(newPath); } }; }

播放器恢复：经典小电视的现代化重生

Bilibili-Old不仅恢复了旧版播放器界面，还为其注入了现代功能：

• 多编码支持：AVC、HEVC、AV1编码自动切换
• 弹幕系统增强：protobuf弹幕格式支持、互动弹幕兼容
• 播放限制解除：港澳台/国际版内容访问
• 自动化功能：自动宽屏、弹幕控制、播放速率记忆

Bilibili-Old项目图标，简约的小电视设计唤起经典回忆

🚀 实际应用场景与配置

场景一：专注观看体验优化

对于追求纯净观看体验的用户，可以配置以下优化参数：

// 在src/core/player.ts中配置播放器行为 const playerConfig = { autoWidescreen: true, // 自动切换宽屏模式 autoPlay: false, // 禁止自动播放 danmakuOpacity: 0.7, // 弹幕透明度 rememberPlaybackRate: true, // 记忆播放速度 skipSponsor: true // 跳过充电鸣谢 };

场景二：跨区域内容访问

通过修改src/io/urls.ts中的API端点配置，可以解除区域限制：

// 替换默认的API服务器 export const URLS = { main: 'https://api.bilibili.com', playurl: 'https://api.bilibili.com/x/player/playurl', // 添加备用服务器 backup: 'https://api.bilibili.tv', international: 'https://api.bilibili.com/intl' };

场景三：弹幕系统定制

在src/core/danmaku.ts中，可以深度定制弹幕行为：

// 弹幕保护列表配置 const danmakuProtect = [ 207527, // 特殊弹幕保护视频 329896, // 白屏弹幕保护 469970, // 黑屏弹幕保护 1474616, // 繁星梅露露(弹幕版) 4335759 // 世界终结舞厅(弹幕PV) ]; // 弹幕加载策略 const danmakuLoadStrategy = { protobuf: true, // 启用protobuf格式 interactive: true, // 支持互动弹幕 localCache: true, // 本地缓存支持 realtimeUpdate: false // 实时更新开关 };

📊 功能对比：新旧版界面的技术差异

🔍 技术亮点：逆向工程的艺术

1. API接口逆向

项目通过分析B站网络请求，重建了完整的API调用链：

// src/io/api.ts中的API封装 export async function apiCall<T>(endpoint: string, params: any): Promise<T> { const url = `${URLS.main}${endpoint}`; const response = await fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json', 'User-Agent': 'Mozilla/5.0 Bilibili-Old' }, body: JSON.stringify(params) }); return jsonCheck<T>(await response.json()); }

2. 页面结构恢复

通过分析Wayback Machine存档，项目重建了旧版页面结构：

<!-- src/html/av.html中的旧版视频页面结构 --> <div class="player-wrapper"> <div class="bilibili-player"></div> <div class="video-info"> <h1 class="video-title"></h1> <div class="video-desc"></div> </div> <div class="comment-area"> <!-- 经典评论区结构 --> </div> </div>

3. 弹幕格式转换

支持新旧弹幕格式的互转，确保兼容性：

// src/core/danmaku.ts中的格式转换 function convertDanmakuFormat(danmaku: any, targetFormat: 'xml' | 'protobuf') { if (targetFormat === 'xml') { // 转换为XML格式 return `<d p="${danmaku.time},${danmaku.type},${danmaku.size},${danmaku.color}">${danmaku.text}</d>`; } else { // 转换为protobuf格式 return protobuf.encode(danmaku); } }

🛡️ 兼容性保障策略

持续跟踪B站更新

项目维护者密切跟踪B站的每次更新，及时调整兼容性策略：

// src/core/observer.ts中的更新检测 class UpdateDetector { private lastVersion = ''; async checkBilibiliUpdate() { const response = await fetch('https://www.bilibili.com/version'); const currentVersion = await response.text(); if (this.lastVersion !== currentVersion) { this.lastVersion = currentVersion; this.triggerCompatibilityCheck(); } } private triggerCompatibilityCheck() { // 触发兼容性测试 this.testCoreFeatures(); this.reportIssues(); } }

渐进式功能降级

当某些功能无法完全恢复时，采用降级策略：

1. 功能替代：用新版功能模拟旧版体验
2. 优雅降级：保留核心功能，移除次要特性
3. 用户提示：明确告知用户限制和替代方案

🚀 快速开始：5分钟部署指南

步骤1：环境准备

确保你的环境满足以下要求：

• 现代浏览器（Chrome 108+ 或 Firefox 100+）
• Node.js 19+（仅开发者需要）
• Git命令行工具

步骤2：获取项目代码

# 克隆项目到本地 git clone https://gitcode.com/gh_mirrors/bi/Bilibili-Old cd Bilibili-Old

步骤3：选择部署方式

方式A：用户脚本（推荐新手）

1. 安装Tampermonkey浏览器扩展
2. 打开tampermonkey/main.user.js
3. 复制脚本内容到Tampermonkey新建脚本
4. 保存并启用

方式B：Chrome扩展（推荐高级用户）

# 构建扩展 npm run chrome # 然后在chrome://extensions中加载chrome/dist目录

步骤4：个性化配置

访问B站页面，点击右下角的齿轮图标，根据需求调整：

• 界面风格：选择经典配色方案
• 播放器设置：配置自动宽屏、弹幕透明度等
• 功能开关：启用/禁用特定恢复功能

🔮 未来发展方向与社区参与

技术路线图

1. 性能优化：减少页面转换时的闪烁现象
2. 功能完善：恢复更多旧版页面类型
3. 兼容性扩展：支持更多浏览器和移动端
4. 用户体验：添加更多自定义选项

参与贡献

Bilibili-Old是开源项目，欢迎开发者参与：

1. 报告问题：在GitCode仓库提交Issue
2. 提交代码：Fork项目并提交Pull Request
3. 文档改进：帮助完善使用文档和API文档
4. 测试反馈：测试新功能并提供使用反馈

技术栈要求

• TypeScript/JavaScript前端开发经验
• 熟悉浏览器扩展开发
• 了解网络请求拦截和DOM操作
• 有逆向工程经验者优先

💡 最佳实践与注意事项

性能优化建议

1. 缓存策略：合理配置本地缓存，减少重复请求
2. 懒加载：非关键资源延迟加载
3. 代码分割：按需加载功能模块
4. 错误处理：完善的错误恢复机制

常见问题解决

Q: 页面转换时有闪烁现象？A: 这是正常现象，Bilibili-Old需要在页面加载完成后执行转换。可以通过刷新页面或等待几秒钟解决。

Q: 某些功能无法使用？A: 部分B站API可能已失效。建议检查项目Issues页面，看是否有已知问题。也可以尝试切换到新版页面使用特定功能。

Q: 如何更新扩展版本？A: 由于未上架商店，需要手动下载最新构建包，解压覆盖原有文件，然后重启浏览器。

🎉 开始你的怀旧之旅

Bilibili-Old不仅仅是一个技术项目，它代表了对简洁、专注用户体验的坚持。无论你是B站的老用户怀念经典界面，还是技术爱好者对逆向工程感兴趣，这个项目都值得你尝试。

立即行动：

1. 选择适合你的安装方式
2. 体验经典B站界面
3. 根据需求调整配置
4. 参与社区贡献

"技术可以改变界面，但改变不了我们对美好体验的追求。"——开源社区共识

通过Bilibili-Old，你不仅找回了经典的B站界面，更获得了一个可定制、可扩展的技术平台。现在就开始你的怀旧之旅，重温那个专注于内容的时代！

【免费下载链接】Bilibili-Old恢复旧版Bilibili页面，为了那些念旧的人。项目地址: https://gitcode.com/gh_mirrors/bi/Bilibili-Old