Bilibili-Evolved 样式组件解析隐藏视频标题层hideVideoTopMask的实现原理与使用指南【免费下载链接】Bilibili-Evolved强大的哔哩哔哩增强脚本项目地址: https://gitcode.com/gh_mirrors/bi/Bilibili-EvolvedBilibili-Evolved 是面向 B 站页面的增强脚本其功能以组件形式组织其中大量功能是纯样式类组件。本文聚焦其中的hideVideoTopMask隐藏视频标题层组件讲解它解决了什么界面问题、如何在源码层面通过instantStyles注入 CSS、针对新旧两代播放器如何选择选择器以及它只在哪些页面生效。读完本文你既能熟练启用与验证这一功能也能理解 Bilibili-Evolved 样式组件元数据声明 按需注入的底层工作机制。一、功能定位鼠标经过时右上角出现的覆盖层该组件在 registry/lib/components/style/hide/video/top-mask/index.md 中的官方描述只有一句话隐藏视频里鼠标经过时出现在右上角的覆盖层.这句描述指向的是 B 站播放器的一个交互细节当鼠标移入播放器区域时播放器右上角会浮现一层半透明覆盖层用来展示视频标题、清晰度入口等信息即标题层。对追求沉浸式观看或需要录屏、截图的用户而言这层浮层属于干扰元素因此该组件将其整体隐藏。在组件设置面板中它的显示名称为隐藏视频标题层组件内部标识为hideVideoTopMask与隐藏视频分享hideVideoShare、隐藏视频笔记等一同归属于style/hide/video这一组隐藏视频元素的样式功能族。二、组件元数据一段不到二十行的声明该组件的全部逻辑定义在 index.ts 中整个文件非常精简import { defineComponentMetadata } from /components/define import { playerUrls } from /core/utils/urls const name hideVideoTopMask export const component defineComponentMetadata({ name, displayName: 隐藏视频标题层, entry: none, instantStyles: [ { name, style: () import(./top-mask.scss), }, ], tags: [componentsTags.style, componentsTags.video], urlInclude: playerUrls, })逐字段拆解这段元数据可以看出它属于典型的纯样式组件name/displayName内部标识hideVideoTopMask与面向用户的显示名隐藏视频标题层分离前者用于注册、配置存储与功能文档索引见 doc/features/features.md 中的hideVideoTopMask条目及 features.json 中对应的注册数据。entry: none声明本组件没有 JavaScript 入口函数。它不需要监听事件、不需要操作 DOM唯一职责就是注入样式因此省去了入口逻辑。instantStyles即时样式注入列表其类型定义见 src/components/types.ts 中的instantStyles?: (DomInstantStyleDefinition | ShadowDomInstantStyleDefinition)[]。这里通过() import(./top-mask.scss)做了动态导入只有在该组件被启用时才会真正加载并注入对应的 SCSS 编译产物。tags打上style样式与video视频相关两个分类标签便于设置面板按标签过滤与检索。urlInclude限定组件只在匹配的页面生效此处复用 src/core/utils/urls.ts 中导出的playerUrls详见下文。可见一个样式组件的声明式骨架由defineComponentMetadata定义于 src/components/define.ts统一提供组件作者只需要描述何时注入、注入什么而加载、匹配、注入的机制全部由框架承担。三、样式实现两条选择器对应两代播放器实际隐藏效果由 top-mask.scss 完成完整内容如下.bpx-player-top-wrap, .bilibili-player-video-top { display: none !important; }这段规则的要点在于它同时覆盖了 B 站两代播放器的标题层容器.bpx-player-top-wrap新版播放器bpx 内核即 B 站逐步推广的播放器体系中位于顶部的包裹容器鼠标悬停时承载标题等浮层内容。.bilibili-player-video-top旧版播放器bilibili-player体系中对应的顶部浮层容器。之所以必须写成两条并列选择器而非只针对其中之一是因为不同版本、不同页面形态下 B 站播放器 DOM 结构并不一致两条规则同时生效才能保证无论命中新旧哪一代播放器浮层都能被隐藏。display: none !important则确保不会被页面自身的样式规则覆盖达到强制隐藏的目的。从实现方式看这正体现了 Bilibili-Evolved 中样式组件 零 JS 逻辑 纯 CSS 注入的典型模式不依赖任何运行时逻辑只要页面结构包含上述任一选择器注入的样式就会立即生效性能开销极小。四、生效范围playerUrls 到底覆盖哪些页面urlInclude: playerUrls是决定该样式在哪些页面注入的关键。playerUrls定义于 src/core/utils/urls.tsexport const playerUrls [ //player.bilibili.com, //www.bilibili.com/html/player.html, ...videoUrls, ...bangumiUrls, ...cheeseUrls, ]展开后它聚合了四类 URL 模式来源匹配内容//player.bilibili.com独立播放器域如内嵌/iframe 播放场景//www.bilibili.com/html/player.html播放器宿主页面...videoUrls常规视频页如//www.bilibili.com/video/及其相关页面...bangumiUrls番剧播放页//www.bilibili.com/bangumi/play/...cheeseUrls课堂芝士播放页//www.bilibili.com/cheese/也就是说只要页面 URL 命中上述任一模式视频、番剧、课堂或独立播放器页面组件匹配逻辑就会认为当前页含播放器并在满足启用条件时注入隐藏标题层的样式而在首页、动态、专栏等其他页面则不会注入避免无谓的样式干扰。匹配机制由 src/core/utils/urls.ts 中的matchCurrentPage等工具统一处理playerUrls本身也被多个视频相关组件复用。五、使用方式与效果验证该组件随 Bilibili-Evolved 脚本一起分发无需单独安装。启用步骤为打开 B 站任意视频、番剧或课堂页面呼出 Bilibili-Evolved 的设置面板在样式分类对应组件标签style且可结合video标签过滤下找到隐藏视频标题层打开该组件开关样式会即时注入并立即生效无需刷新页面。验证生效与否非常直观进入任意视频播放页将鼠标移入播放器区域原本应出现在右上角的标题浮层将不再显示。若想确认样式确实被注入可以打开浏览器开发者工具检查页面style中是否包含.bpx-player-top-wrap/.bilibili-player-video-top的display: none !important规则。该组件同样被收录进功能打包清单见 pack.json 中的hideVideoTopMask条目这意味着它与其他组件一样可以通过 Bilibili-Evolved 的打包机制随脚本整体发布功能注册信息也可在 features.md 与 features.json 中交叉检索便于开发者了解组件在功能体系中的位置。六、小结hideVideoTopMask是一个体量极小但机制完整的样式组件范例一行文档描述、一份元数据声明、一段双选择器 CSS就完成了跨新旧播放器隐藏右上角覆盖层的目标。从它身上可以清晰看到 Bilibili-Evolved 组件体系的设计取向——用defineComponentMetadata统一描述组件能力用instantStyles实现按需懒加载样式用urlInclude精确划定生效页面让纯样式功能也能以统一、可配置、可打包的方式融入整个脚本生态。对于想为 Bilibili-Evolved 贡献类似样式功能的开发者而言hide/video/top-mask目录index.ts top-mask.scss就是一份可以直接参考的最小模板。【免费下载链接】Bilibili-Evolved强大的哔哩哔哩增强脚本项目地址: https://gitcode.com/gh_mirrors/bi/Bilibili-Evolved创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考