前端音视频【免费下载链接】Bilibili-Evolved强大的哔哩哔哩增强脚本项目地址https://gitcode.com/gh_mirrors/bi/Bilibili-Evolved点击查看免费下载导读视频末尾的充电鸣谢列表会打断观看节奏尤其在连续追剧时非常烦人。Bilibili-Evolved哔哩哔哩增强脚本内置了跳过充电鸣谢组件可在视频播放结束后自动跳过 UP 主充电鸣谢展示并支持隐藏播放器内的充电鸣谢面板。本文以该组件的功能文档为起点结合仓库源码逐层拆解其CSS 隐藏 事件触发自动点击的双重实现机制、页面匹配范围、生命周期管理与功能边界帮助读者理解增强脚本如何以最小侵入方式干预 B 站播放器并掌握该组件在 Bilibili-Evolved 中的启用与行为控制方式。一、功能概述与使用场景该组件的功能描述定义在 registry/lib/components/video/player/skip-charge-list/index.md自动跳过视频结尾的充电鸣谢。注意不包括番剧承包鸣谢。这段描述虽然简短但明确了三个关键事实自动跳过无需手动点击视频播放结束后组件会自动触发跳过操作跳过对象是充电鸣谢即视频播放完毕、画面结束后展示的 UP 主充电打赏用户名单功能边界番剧Bangumi承包鸣谢不在此组件处理范围内二者是 B 站两套不同的鸣谢机制。从使用场景看该组件主要服务于追番/看视频时不想被片尾鸣谢列表打断希望在视频结束的第一时间自动跳过进入推荐流或下一集。组件属于视频播放器类别tags: [componentsTags.video]可在 Bilibili-Evolved 的设置面板中按组件名skipChargeList查找并开关。二、双重实现机制隐藏面板与自动点击跳过充电鸣谢并非单一的 JS 逻辑而是由样式隐藏与事件监听两条链路共同完成二者分别承载静态隐藏与动态跳过两个职责。2.1 样式层直接隐藏充电鸣谢面板组件通过 SCSS 文件 charge-list.scss 定义隐藏规则body:not(.skip-charge-list-disable) .bilibili-player .bilibili-player-electric-panel, body:not(.skip-charge-list-disable) #bilibili-player .bpx-player-electric-panel { display: none !important; }该规则同时覆盖了 B 站两代播放器的充电鸣谢面板.bilibili-player .bilibili-player-electric-panel老版2.X播放器的充电鸣谢面板#bilibili-player .bpx-player-electric-panel新版3.X即 bpx播放器的充电鸣谢面板。选择器以body:not(.skip-charge-list-disable)作为前置条件意味着当body上存在skip-charge-list-disable类时隐藏规则失效——这正是组件卸载unload时恢复原状的开关详见下文生命周期分析。2.2 逻辑层监听 ended 事件自动点击跳过按钮样式隐藏适用于面板已经出现的情况但如果播放器在视频结束后立即弹出充电鸣谢并阻塞播放流程仅靠隐藏 DOM 不够彻底组件因此在 index.ts 中实现了自动点击逻辑videoChange(async () { const video await select(video) video?.addEventListener(ended, async () { if (document.body.classList.contains(SkipChargeListDisabledClass)) { return } // 选择2.X或3.X的跳过按钮 const jumpButton (await select( .bilibili-player-electric-panel-jump,.bpx-player-electric-jump, )) as HTMLElement jumpButton?.click() }) })核心流程分为三步等待视频变化通过videoChange监听当前页面的视频切换换集、换 P 等场景每次视频变化后重新绑定监听等待 video 元素就绪使用select(video)轮询获取播放器中的video元素监听 ended 事件视频播放结束时轮询查找跳过按钮并触发.click()。按钮选择器同样兼容两代播放器——.bilibili-player-electric-panel-jump2.X与.bpx-player-electric-jump3.X。轮询机制select 的底层实现select来自 src/core/spin-query.ts其本质是基于setTimeout的轮询查询器spin-query。默认轮询配置定义在源码第 11-14 行const defaultConfig: RequiredSpinQueryConfig { maxRetry: 15, // 最大重试次数 queryInterval: 1000, // 重试间隔(ms) }即每隔 1 秒查询一次选择器结果最多重试 15 次查询期间若页面处于后台标签页会通过waitForForeground等待页面重新获得焦点后再继续重试见 spin-query.ts。这种带前台等待的轮询避免了后台标签页空转消耗资源也保证了切换回页面时组件能及时响应。select还带有查询缓存同一选择器在短时间内重复调用会复用上一次的 Promise源码selectCache减少重复轮询开销查询结束后缓存自动清除防止拿到过期的 DOM 引用。事件驱动videoChange 的视频变化监听videoChange定义在 src/core/observer.ts它通过allMutationsMutationObserver 封装持续观察页面 DOM 变化并检测全局unsafeWindow.cid的变更来判定视频是否切换。源码中还对 B 站的一个特殊行为做了兼容——更换 cid 时 B 站代码会临时把 cid 改成一个数组监听逻辑会忽略这种异常值仅在 cid 正常变化时触发videoChange事件见 observer.ts。这意味着在普通视频页、分 P 切换、连续播放下一集等场景下组件都会重新绑定ended监听确保每一段视频的结尾都能被自动跳过而不是只在首次加载时生效。三、组件生命周期reload 与 unload 的正确开关组件在元数据中显式声明了reload与unload钩子见 index.tsreload: () document.body.classList.remove(SkipChargeListDisabledClass), unload: () document.body.classList.add(SkipChargeListDisabledClass),其中SkipChargeListDisabledClass skip-charge-list-disable源码第 5 行。这套设计非常精巧卸载unload时向body添加skip-charge-list-disable类。由于 SCSS 中所有规则都以body:not(.skip-charge-list-disable)为前置条件样式隐藏立即失效充电鸣谢面板恢复显示同时 JS 逻辑在ended回调开头检查该类一旦存在就直接return不再自动点击跳过按钮。两条链路被一个类名同时关停且无需移除已注入的style标签代价极低、切换瞬时完成重载reload时移除该类两条链路即刻恢复。与之对比styled-component.ts 中提供的通用toggleStyle工具源码第 22-45 行采用动态创建/移除style标签的方式实现样式开关。skip-charge-list 组件选择类名开关方案而非移除样式标签既避免了频繁增删 DOM 节点也保证了样式隐藏与 JS 跳过逻辑在开关状态上始终一致——这是该组件在工程实现上一个值得借鉴的细节。四、页面匹配范围仅在播放器页面生效组件元数据中声明了urlInclude: playerUrls见 index.ts限定组件只在包含播放器的页面注入。playerUrls定义于 src/core/utils/urls.tsexport const playerUrls [ //player.bilibili.com, //www.bilibili.com/html/player.html, ...videoUrls, // 普通视频页 ...bangumiUrls, // 番剧页 ...cheeseUrls, // 课程页 ]即组件覆盖四类页面页面类型匹配模式说明嵌入式播放器//player.bilibili.com嵌入第三方页面的播放器 iframe播放器独立页//www.bilibili.com/html/player.html播放器独立页面普通视频页videoUrlswww.bilibili.com/video/等番剧/课程页bangumiUrls、cheeseUrls番剧与付费课程播放页页面匹配通过 urls.ts 的matchCurrentPage实现videoChange内部也会先调用matchCurrentPage(playerUrls)做一次页面预检非播放器页面直接返回false避免无意义的监听注册见 observer.ts。五、组件注册方式与扩展阅读从组件定义结构看defineComponentMetadata定义于 src/components/define.tsskipChargeList是一个典型的 Bilibili-Evolved 标准组件具备名称、显示名、分类标签、入口、生命周期钩子与 URL 匹配规则等完整元数据。其入口entry经由styledComponentEntry包装styled-component.ts 实际上是 src/components/styled-component.ts该包装器会先动态加载组件 SCSS 并注入全局样式再执行真正的逻辑入口——也就是说样式注入与逻辑挂载被统一封装任何采用styledComponentEntry的组件都遵循先样式、后逻辑的加载顺序。读者如果希望深入理解本文涉及的底层能力可以按以下路径继续阅读仓库源码registry/lib/components/video/player/skip-charge-list/index.ts组件完整实现入口、选择器、生命周期钩子registry/lib/components/video/player/skip-charge-list/charge-list.scss样式隐藏规则两代播放器面板选择器src/core/spin-query.tsselect轮询器实现重试次数、间隔、缓存与前台等待策略src/core/observer.tsvideoChange视频变化监听机制cid 钩子与数组异常值兼容src/core/utils/urls.tsplayerUrls页面匹配列表定义src/components/styled-component.tsstyledComponentEntry样式注入封装与toggleStyle工具对比。六、小结一个小而完整的增强组件范本跳过充电鸣谢虽然功能描述只有一句话但它的实现浓缩了 Bilibili-Evolved 组件体系的多项核心能力样式与逻辑的双通道协作SCSS 隐藏面板 ended 事件自动点击、跨播放器版本兼容2.X 与 3.X 选择器双覆盖、低开销的开关机制body 类名统一控制两条链路、事件驱动的动态绑定videoChange 跟随视频切换重挂监听以及页面范围精确限定playerUrls。对于希望理解 Bilibili-Evolved 组件如何与 B 站播放器交互、或参考其模式编写新组件的开发者而言这是一个麻雀虽小、五脏俱全的范本。使用时只需在脚本设置面板中找到跳过充电鸣谢并保持开启即可组件会自动完成其余工作。赞分享前端音视频【免费下载链接】Bilibili-Evolved强大的哔哩哔哩增强脚本项目地址https://gitcode.com/gh_mirrors/bi/Bilibili-Evolved点击查看免费下载相关推荐Intro Skipper终极指南如何自动跳过电视节目片头片尾Intro Skipper终极指南如何自动跳过电视节目片头片尾 想要告别重复观看电视剧的片头片尾吗Intro Skipper 是一个专为 Jellyfin音视频音频处理视频处理插件系统Bilibili-Evolved 的 BiliPlus 跳转支持组件视频、番剧与空间页的一键跳转实现解析Bilibili Evolved 的 BiliPlus 跳转支持组件视频、番剧与空间页的一键跳转实现解析 BiliPlus 是一个提供 B 站视频信息增强查询前端音视频Bilibili-Evolved 动态分组过滤组件深度解析按关注分组筛选动态的实现原理与使用指南Bilibili Evolved 动态分组过滤组件深度解析按关注分组筛选动态的实现原理与使用指南 Bilibili Evolved 的动态首页 t.bili前端音视频创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
前端音视频【免费下载链接】Bilibili-Evolved强大的哔哩哔哩增强脚本项目地址https://gitcode.com/gh_mirrors/bi/Bilibili-Evolved点击查看免费下载导读视频末尾的充电鸣谢列表会打断观看节奏尤其在连续追剧时非常烦人。Bilibili-Evolved哔哩哔哩增强脚本内置了跳过充电鸣谢组件可在视频播放结束后自动跳过 UP 主充电鸣谢展示并支持隐藏播放器内的充电鸣谢面板。本文以该组件的功能文档为起点结合仓库源码逐层拆解其CSS 隐藏 事件触发自动点击的双重实现机制、页面匹配范围、生命周期管理与功能边界帮助读者理解增强脚本如何以最小侵入方式干预 B 站播放器并掌握该组件在 Bilibili-Evolved 中的启用与行为控制方式。一、功能概述与使用场景该组件的功能描述定义在 registry/lib/components/video/player/skip-charge-list/index.md自动跳过视频结尾的充电鸣谢。注意不包括番剧承包鸣谢。这段描述虽然简短但明确了三个关键事实自动跳过无需手动点击视频播放结束后组件会自动触发跳过操作跳过对象是充电鸣谢即视频播放完毕、画面结束后展示的 UP 主充电打赏用户名单功能边界番剧Bangumi承包鸣谢不在此组件处理范围内二者是 B 站两套不同的鸣谢机制。从使用场景看该组件主要服务于追番/看视频时不想被片尾鸣谢列表打断希望在视频结束的第一时间自动跳过进入推荐流或下一集。组件属于视频播放器类别tags: [componentsTags.video]可在 Bilibili-Evolved 的设置面板中按组件名skipChargeList查找并开关。二、双重实现机制隐藏面板与自动点击跳过充电鸣谢并非单一的 JS 逻辑而是由样式隐藏与事件监听两条链路共同完成二者分别承载静态隐藏与动态跳过两个职责。2.1 样式层直接隐藏充电鸣谢面板组件通过 SCSS 文件 charge-list.scss 定义隐藏规则body:not(.skip-charge-list-disable) .bilibili-player .bilibili-player-electric-panel, body:not(.skip-charge-list-disable) #bilibili-player .bpx-player-electric-panel { display: none !important; }该规则同时覆盖了 B 站两代播放器的充电鸣谢面板.bilibili-player .bilibili-player-electric-panel老版2.X播放器的充电鸣谢面板#bilibili-player .bpx-player-electric-panel新版3.X即 bpx播放器的充电鸣谢面板。选择器以body:not(.skip-charge-list-disable)作为前置条件意味着当body上存在skip-charge-list-disable类时隐藏规则失效——这正是组件卸载unload时恢复原状的开关详见下文生命周期分析。2.2 逻辑层监听 ended 事件自动点击跳过按钮样式隐藏适用于面板已经出现的情况但如果播放器在视频结束后立即弹出充电鸣谢并阻塞播放流程仅靠隐藏 DOM 不够彻底组件因此在 index.ts 中实现了自动点击逻辑videoChange(async () { const video await select(video) video?.addEventListener(ended, async () { if (document.body.classList.contains(SkipChargeListDisabledClass)) { return } // 选择2.X或3.X的跳过按钮 const jumpButton (await select( .bilibili-player-electric-panel-jump,.bpx-player-electric-jump, )) as HTMLElement jumpButton?.click() }) })核心流程分为三步等待视频变化通过videoChange监听当前页面的视频切换换集、换 P 等场景每次视频变化后重新绑定监听等待 video 元素就绪使用select(video)轮询获取播放器中的video元素监听 ended 事件视频播放结束时轮询查找跳过按钮并触发.click()。按钮选择器同样兼容两代播放器——.bilibili-player-electric-panel-jump2.X与.bpx-player-electric-jump3.X。轮询机制select 的底层实现select来自 src/core/spin-query.ts其本质是基于setTimeout的轮询查询器spin-query。默认轮询配置定义在源码第 11-14 行const defaultConfig: RequiredSpinQueryConfig { maxRetry: 15, // 最大重试次数 queryInterval: 1000, // 重试间隔(ms) }即每隔 1 秒查询一次选择器结果最多重试 15 次查询期间若页面处于后台标签页会通过waitForForeground等待页面重新获得焦点后再继续重试见 spin-query.ts。这种带前台等待的轮询避免了后台标签页空转消耗资源也保证了切换回页面时组件能及时响应。select还带有查询缓存同一选择器在短时间内重复调用会复用上一次的 Promise源码selectCache减少重复轮询开销查询结束后缓存自动清除防止拿到过期的 DOM 引用。事件驱动videoChange 的视频变化监听videoChange定义在 src/core/observer.ts它通过allMutationsMutationObserver 封装持续观察页面 DOM 变化并检测全局unsafeWindow.cid的变更来判定视频是否切换。源码中还对 B 站的一个特殊行为做了兼容——更换 cid 时 B 站代码会临时把 cid 改成一个数组监听逻辑会忽略这种异常值仅在 cid 正常变化时触发videoChange事件见 observer.ts。这意味着在普通视频页、分 P 切换、连续播放下一集等场景下组件都会重新绑定ended监听确保每一段视频的结尾都能被自动跳过而不是只在首次加载时生效。三、组件生命周期reload 与 unload 的正确开关组件在元数据中显式声明了reload与unload钩子见 index.tsreload: () document.body.classList.remove(SkipChargeListDisabledClass), unload: () document.body.classList.add(SkipChargeListDisabledClass),其中SkipChargeListDisabledClass skip-charge-list-disable源码第 5 行。这套设计非常精巧卸载unload时向body添加skip-charge-list-disable类。由于 SCSS 中所有规则都以body:not(.skip-charge-list-disable)为前置条件样式隐藏立即失效充电鸣谢面板恢复显示同时 JS 逻辑在ended回调开头检查该类一旦存在就直接return不再自动点击跳过按钮。两条链路被一个类名同时关停且无需移除已注入的style标签代价极低、切换瞬时完成重载reload时移除该类两条链路即刻恢复。与之对比styled-component.ts 中提供的通用toggleStyle工具源码第 22-45 行采用动态创建/移除style标签的方式实现样式开关。skip-charge-list 组件选择类名开关方案而非移除样式标签既避免了频繁增删 DOM 节点也保证了样式隐藏与 JS 跳过逻辑在开关状态上始终一致——这是该组件在工程实现上一个值得借鉴的细节。四、页面匹配范围仅在播放器页面生效组件元数据中声明了urlInclude: playerUrls见 index.ts限定组件只在包含播放器的页面注入。playerUrls定义于 src/core/utils/urls.tsexport const playerUrls [ //player.bilibili.com, //www.bilibili.com/html/player.html, ...videoUrls, // 普通视频页 ...bangumiUrls, // 番剧页 ...cheeseUrls, // 课程页 ]即组件覆盖四类页面页面类型匹配模式说明嵌入式播放器//player.bilibili.com嵌入第三方页面的播放器 iframe播放器独立页//www.bilibili.com/html/player.html播放器独立页面普通视频页videoUrlswww.bilibili.com/video/等番剧/课程页bangumiUrls、cheeseUrls番剧与付费课程播放页页面匹配通过 urls.ts 的matchCurrentPage实现videoChange内部也会先调用matchCurrentPage(playerUrls)做一次页面预检非播放器页面直接返回false避免无意义的监听注册见 observer.ts。五、组件注册方式与扩展阅读从组件定义结构看defineComponentMetadata定义于 src/components/define.tsskipChargeList是一个典型的 Bilibili-Evolved 标准组件具备名称、显示名、分类标签、入口、生命周期钩子与 URL 匹配规则等完整元数据。其入口entry经由styledComponentEntry包装styled-component.ts 实际上是 src/components/styled-component.ts该包装器会先动态加载组件 SCSS 并注入全局样式再执行真正的逻辑入口——也就是说样式注入与逻辑挂载被统一封装任何采用styledComponentEntry的组件都遵循先样式、后逻辑的加载顺序。读者如果希望深入理解本文涉及的底层能力可以按以下路径继续阅读仓库源码registry/lib/components/video/player/skip-charge-list/index.ts组件完整实现入口、选择器、生命周期钩子registry/lib/components/video/player/skip-charge-list/charge-list.scss样式隐藏规则两代播放器面板选择器src/core/spin-query.tsselect轮询器实现重试次数、间隔、缓存与前台等待策略src/core/observer.tsvideoChange视频变化监听机制cid 钩子与数组异常值兼容src/core/utils/urls.tsplayerUrls页面匹配列表定义src/components/styled-component.tsstyledComponentEntry样式注入封装与toggleStyle工具对比。六、小结一个小而完整的增强组件范本跳过充电鸣谢虽然功能描述只有一句话但它的实现浓缩了 Bilibili-Evolved 组件体系的多项核心能力样式与逻辑的双通道协作SCSS 隐藏面板 ended 事件自动点击、跨播放器版本兼容2.X 与 3.X 选择器双覆盖、低开销的开关机制body 类名统一控制两条链路、事件驱动的动态绑定videoChange 跟随视频切换重挂监听以及页面范围精确限定playerUrls。对于希望理解 Bilibili-Evolved 组件如何与 B 站播放器交互、或参考其模式编写新组件的开发者而言这是一个麻雀虽小、五脏俱全的范本。使用时只需在脚本设置面板中找到跳过充电鸣谢并保持开启即可组件会自动完成其余工作。赞分享前端音视频【免费下载链接】Bilibili-Evolved强大的哔哩哔哩增强脚本项目地址https://gitcode.com/gh_mirrors/bi/Bilibili-Evolved点击查看免费下载相关推荐Intro Skipper终极指南如何自动跳过电视节目片头片尾Intro Skipper终极指南如何自动跳过电视节目片头片尾 想要告别重复观看电视剧的片头片尾吗Intro Skipper 是一个专为 Jellyfin音视频音频处理视频处理插件系统Bilibili-Evolved 的 BiliPlus 跳转支持组件视频、番剧与空间页的一键跳转实现解析Bilibili Evolved 的 BiliPlus 跳转支持组件视频、番剧与空间页的一键跳转实现解析 BiliPlus 是一个提供 B 站视频信息增强查询前端音视频Bilibili-Evolved 动态分组过滤组件深度解析按关注分组筛选动态的实现原理与使用指南Bilibili Evolved 动态分组过滤组件深度解析按关注分组筛选动态的实现原理与使用指南 Bilibili Evolved 的动态首页 t.bili前端音视频创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
