bilibili-ambilight

项目概述

Bilibili 环境光是一款给 B 站视频加上环境光（Ambilight）效果的浏览器扩展，把画面边缘的色彩实时投射到播放器周围，让观看更有沉浸感。它移植自 YouTube 版的环境光插件，渲染引擎沿用原项目，网站整合部分则针对 B 站重写。扩展覆盖普通视频、番剧、播放列表与放映厅等页面，并在开启环境光时自动切换深色主题。

让视频里的光，溢出到整块屏幕上。

主要功能

• 环境光渲染：用 WebGL 与 Canvas2D 把视频画面色彩实时投射到播放器周围
• 黑边处理：自动去除上下或左右黑边，并把视频放大填满剩余空间
• 深色主题联动：开启环境光时自动切换 B 站深色主题，也可改为跟随或浅色
• 沉浸式融合：页首、搜索框、右侧栏、弹幕输入列与留言区都能融入背景
• 快捷键操作：默认用 G 开关环境光，B、V、H 分别处理黑边与画面放大
• 多页面支持：覆盖普通视频与分 P、番剧影视、播放列表、放映厅与课堂
• 设置菜单：在 B 站播放器控制栏提供独立的环境光设置入口

适用人群

• 想在网页端获得沉浸观影体验的用户
• 使用大屏或带背光环境观看视频的用户
• 喜欢深色主题与无边框视觉的用户

快速上手

1. 获取扩展：Chrome 或 Edge 打开 chrome://extensions 并开启开发者模式，加载解包后的 dist 目录；Firefox 使用专用构建后在调试页加载
2. 打开任意 B 站视频页面，环境光会自动生效
3. 点击播放器右下角齿轮按钮左侧的「光芒屏幕」图标，打开环境光设置菜单
4. 用快捷键 G 开关环境光，B、V 调整黑边，H 放大填满
5. 在「基本设置 → 外观（主题）」中选择深色、跟随 B 站或浅色

核心优势

• 沉浸感强：画面色彩延伸到播放器之外，观看氛围更完整
• 自动适配：播放器的各种模式，以及页面滚动后出现的小窗播放，都能正确处理环境光
• 隐私干净：移除了原项目的错误上报，错误只留在浏览器控制台
• 风格统一：深色主题与融入背景的元素让页面与画面连成一体

系统要求

项目	要求
操作系统	不限，取决于浏览器
浏览器	Chrome、Edge，或 Firefox 专用构建
目标站点	Bilibili 视频、番剧、播放列表等页面

注意事项

• 本扩展为非官方第三方项目，与哔哩哔哩及 YouTube 无关
• 受 DRM 保护的影片无法显示环境光
• 暂不支持以 <bwp-video> 播放的影片，例如部分 HEVC 格式的 WebAssembly 播放器
• 从源码构建需要 Node.js 22 及以上版本