Holodex Watch 观看页深度解析字幕、精彩时刻与直播聊天全功能指南【免费下载链接】HolodexHolodex frontend source code项目地址: https://gitcode.com/gh_mirrors/ho/HolodexHolodex是一个面向虚拟主播Vtuber粉丝的视频与直播聚合前端项目。它的Watch 观看页是核心功能所在一键播放视频同时提供TLdex 字幕叠加、精彩时刻Highlights时间轴和直播聊天回看。本文将带你快速上手这些功能。一键打开观看页路由与入口在 Holodex 中任意视频卡片点击后都会进入观看页。路由格式为/watch/视频ID见 src/router/index.js页面逻辑集中在 src/views/Watch.vue 中它负责加载视频、组装播放器、精彩时刻条、信息栏、评论区和聊天窗口。支持 URL 参数直达指定时间点例如在地址中加?t60即可从第 60 秒开始播放方便分享名场面。字幕功能TLdex 实时翻译直接叠加在画面上Holodex 最大的特色是TLdex 字幕——来自社区 TLTranslator的直播翻译聊天记录。在观看页打开聊天窗口后点击聊天栏上的字幕按钮见 src/components/chat/LiveTranslations.vue翻译消息就会以字幕形式叠加在视频底部。字幕渲染由 src/components/watch/WatchSubtitleOverlay.vue 完成发送者昵称与译文分层显示背景半透明黑底保证不遮挡画面又清晰可读。直播中实时拉取翻译src/components/chat/LiveTranslations.vue已下线的直播则自动切换为存档翻译回放src/components/chat/ArchiveTranslations.vue并按当前播放位置同步显示对应时间点的字幕。精彩时刻条自动从弹幕里挖出的进度条观看页视频下方有一条Highlights 精彩时刻条src/components/watch/WatchHighlights.vue它会扫描视频的所有弹幕/评论用正则提取0:00格式的时间戳把 40 秒内的时间戳归入同一桶按出现次数排序选出最具代表性的文案按时间占比把刻度点精准摆在视频时间轴上——刻度越靠中间越多颜色越深代表该时刻越出圈若该时刻匹配到视频收录的歌曲信息songs会以主题色的粗刻度显示。点击任意刻度即可一键跳转到对应时间点找高光片段再也不用手动拖动进度条了。直播聊天全攻略TLdex 翻译 YouTube 原聊同屏聊天窗口src/components/watch/WatchLiveChat.vue可同时容纳两路内容聊天类型来源适用场景TLdex 翻译聊天社区 TL 实时翻译直播中 / 已存档回放YouTube 原聊嵌入的原生直播弹幕直播中 / 回放移动端除外几个实用细节成员专属直播需先播放视频才会解锁聊天内容聊天断线时会弹出遮罩并给出重试按钮无需刷新页面聊天栏支持拖拽调整高度手机端聊天会自动变为底部悬浮或顶部覆盖两种形态对于已结束的直播回放原聊需要安装 Holodex 浏览器扩展页面会给出提示扩展同时提供在 YouTube 上点赞的一键功能。其他提升观感的小技巧影院模式按Alt T或点击工具栏按钮视频区占满全屏高度信息栏移到底部逻辑见 src/views/Watch.vue。评论跳转src/components/watch/WatchComments.vue 中的时间戳评论同样支持点击跳转与精彩时刻条互补。列表连播从播放列表进入观看页时会自动播放视频结束后自动切到下一集。直播观众数实时刷新直播中观众数通过 WebSocket 增量更新涨红跌绿一目了然。源码速查清单功能文件页面主框架src/views/Watch.vue精彩时刻时间轴src/components/watch/WatchHighlights.vue直播聊天容器src/components/watch/WatchLiveChat.vue字幕叠加层src/components/watch/WatchSubtitleOverlay.vue实时翻译聊天src/components/chat/LiveTranslations.vue存档翻译回放src/components/chat/ArchiveTranslations.vue聊天同步工具src/utils/chat.ts多语言文案src/locales/en/ui.yml想要本地跑起来克隆仓库后执行npm install再npm run serve即可开始开发git clone https://gitcode.com/gh_mirrors/ho/Holodex总结Holodex 的 Watch 观看页把看视频变成了沉浸式追播——字幕、精彩时刻、直播聊天三件套让你不错过任何高光瞬间。快去体验一下吧【免费下载链接】HolodexHolodex frontend source code项目地址: https://gitcode.com/gh_mirrors/ho/Holodex创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考