做直播的人大概都有过这种时刻画面调好了、麦克风也试过了直播间的“时间感”却还是空的。观众不知道现在几点你也说不清还有多久开播于是屏幕上架一部手机、贴一张静态图片、甚至放一个秒表APP的窗口效果都很出戏。我认真研究过OBS的时间插件、时钟插件和倒计时插件之后发现这件事完全可以用更干净的方式解决而且不需要付费工具。这篇文章就把各种插件的下载、安装流程以及比插件更灵活的替代方案一次讲清楚。1. 先理清需求时间、时钟、倒计时到底怎么做1.1 三种显示需求的本质区别先说一个经常被搞混的点时间、时钟、倒计时看起来都是“跳动的数字”但本质逻辑完全不同。时间指“当前时刻”比如 2025 年 3 月 21 日 20:30:45。它依赖电脑系统时钟需要每秒刷新。时钟可以理解为“时间的可视化呈现”通常是一个钟表盘或者大的数字显示同样需要实时更新。倒计时指“从当前时刻到某个未来时刻的剩余时间”比如距离开播还有 00:59:59。它更像一个动态计算器每秒重新计算一次差值。很多新手一上来就搜“OBS时间插件”装上之后发现只能显示静态文字就是因为没想清楚自己要的是实时刷新还是一个固定文案。所以第一步不是急着下载安装而是确定需求你是要让观众看到“现在几点”还是看到“还有多久到点”这两个方向会影响后续所有的方案选型。1.2 主流实现方案的优劣对比实现方式比想象中多常见的有四种方案定制程度稳定性学习成本适合场景浏览器源 本地HTML极高可做任意样式高需会一点HTML/CSS/JS美观时钟、倒计时、自定义排版OBS自带文本源 外部刷新低只能显示纯文字中刷新有延迟低会复制文件就能用应急、分钟级时间显示第三方插件取决于插件功能取决于插件质量低但安装有风险需要原生集成、长期固定使用屏幕捕获计时器APP低受第三方界面限制中容易遮挡最低临时救场从表里能看到浏览器源 HTML 几乎在绝大多数需求里都是最优解。它本质上是让 OBS 内置的浏览器内核去渲染一个网页而网页里可以同时装下时钟、倒计时、文字公告甚至动态背景。第三方插件虽然叫“插件”但很多所谓的时间/时钟/倒计时插件内部也只是把一张网页包装成了独立源。1.3 我给新手的选型建议如果你只想要一个能看的倒计时并且希望今天就能上线我建议别先碰插件直接用浏览器源方案。原因有两个一是插件的版本兼容问题很容易让人劝退二是 HTML 方案改样式只需要改一个文件不用重启 OBS。如果你是直播工具的老手工作流里需要插件提供的其他功能比如自动切换场景、定时提醒那再去研究第三方插件才不亏。本篇文章后面也会详细讲插件的下载安装流程以及万一装坏了怎么处理。2. 方案一浏览器源 自制HTML页面最推荐2.1 为什么浏览器源能搞定时间时钟倒计时OBS 的浏览器源是一个相当好用的功能它内置了一个完整的浏览器渲染引擎。你在电脑上用浏览器能打开的任何网页它都能拉进直播画面里显示。这意味着你完全可以自己写一个网页让网页里的 JavaScript 每秒读取系统时间再显示在直播间画面上。这个方案最大的优势是自由度。你可以在一个 HTML 里同时放当前时间时钟倒计时某些直播间公告自定义字体、背景、透明度而且它透明背景支持得很好。网页的 body 设置为透明OBS 里就能直接透出下层画面不会像屏幕捕获那样带一个方框。这个能力是很多插件没法比的。2.2 先准备一份可直接用的HTML文件“下载”这个词在浏览器源方案里实际指的就是“写一份 HTML 文件并保存到本地”。你不需要额外下载什么插件我这里直接给出一份能用的代码复制保存成 clock.html 就能用。!DOCTYPE html html langzh-CN head meta charsetUTF-8 style body { background: transparent; margin: 0; font-family: Arial, Microsoft YaHei, sans-serif; color: #ffffff; text-shadow: 0 0 10px rgba(0, 0, 0, 0.8); } .clock { position: absolute; top: 20px; left: 20px; font-size: 72px; font-weight: bold; letter-spacing: 2px; } .countdown { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); font-size: 56px; padding: 8px 24px; background: rgba(0, 0, 0, 0.35); border-radius: 12px; } /style /head body div classclock idclock--:--:--/div div classcountdown idcountdown00:00:00/div script // 注意修改这一行改成你需要的倒计时目标时间 const targetTime new Date(2025-12-31T23:59:59).getTime(); function two(n) { return n 10 ? 0 n : n; } function update() { const now new Date(); // 时钟部分 document.getElementById(clock).textContent two(now.getHours()) : two(now.getMinutes()) : two(now.getSeconds()); // 倒计时部分 let diff targetTime - now.getTime(); if (diff 0) diff 0; const totalSeconds Math.floor(diff / 1000); const h Math.floor(totalSeconds / 3600); const m Math.floor((totalSeconds % 3600) / 60); const s totalSeconds % 60; document.getElementById(countdown).textContent two(h) : two(m) : two(s); } update(); setInterval(update, 1000); /script /body /html保存时文件名随便取但最好保持英文比如 clock.html。然后双击用浏览器打开你会看到一个左上角的大时钟以及底部中央的倒计时。先在浏览器里确认能正常走动再进入 OBS。2.3 在OBS里添加浏览器源的具体步骤打开 OBS按下面的路径操作在“来源”面板里点左下角的加号。选择“浏览器”。弹出的窗口中勾选“本地文件”。点击“浏览”选中刚才保存的 clock.html。设置宽度和高度。我习惯用 1280x720这是 16:9 的基础分辨率后期缩放也比较清晰。点击确定。这时直播画面上就会出现刚才网页的内容。如果位置不对直接用鼠标拖动即可。如果觉得太大或太小可以按住 Alt 键拖动角落的控制点来自由裁剪。这样做完一个实时跳动的时钟和一个倒计时就同时出现在 OBS 里了。整个过程没有安装任何插件也没有下载任何第三方程序。2.4 调整样式和透明背景的小细节HTML 代码里的 body 已经设置了background: transparent所以在 OBS 中浏览器源只会显示文字和半透明的倒计时背景框不会遮挡下层游戏画面或摄像头。如果想改数字颜色改 CSS 里的color就行想改字体在font-family里换成你电脑装了的字体比如 “SimHei”、“DIN Alternate” 等。这里有几个我踩过坑后的经验字体别用太细的直播画面经过编码压缩之后细字体会发虚。text-shadow能明显提升文字在亮背景下的可读性建议保留。如果想让倒计时背景颜色更淡把rgba(0,0,0,0.35)里的 0.35 降低一点就好。这个 HTML 文件还可以继续扩展。比如加一段公告文字、在倒计时结束后显示“已开始”或者用不同的画面样式做多个 HTML然后在 OBS 场景切换时一起切换。它的灵活性完全取决于你的 CSS 和 JavaScript 水平。3. 方案二OBS自带文本源 外部刷新零插件极简路线3.1 直接输入时间为什么一动不动OBS 自带的“文本GDI”源有一个很大的局限它只是把文字渲染成一张静态图并不会每秒重新读取系统时间。所以很多人尝试直接在文本框里输入%H:%M:%S结果画面上显示的是一行字符原样或者一直不变化。但 OBS 文本源里有一个“从文件读取”的选项。这个选项的意思是OBS 会去读一个纯文本文件的内容并显示出来。虽然它不会监听文件内容变化后立刻更新但可以做到周期性检查。也就是说只要外部有一个程序不断把当前时间写进这个 txt 文件OBS 里显示的文字就会跟着变。这个方案不需要安装任何插件本质上是靠“外部刷新”驱动。3.2 用Python脚本刷新时间文件下面给一个最简单的 Python 脚本运行后会在当前目录创建一个 clock.txt并每秒写入一次当前系统时间。import datetime import pathlib import time text_file pathlib.Path(clock.txt) while True: now datetime.datetime.now().strftime(%Y-%m-%d %H:%M:%S) text_file.write_text(now, encodingutf-8) time.sleep(1)把上面内容保存为 clockwriter.py在命令行里执行python clockwriter.py它就会开始无限循环写文件。第一次运行后clock.txt 会出现在脚本同目录下。3.3 在OBS中挂接txt文件与常见坑接下来在 OBS 里操作添加“文本GDI”源。勾选“从文件读取”。点击“浏览”选择刚才生成的 clock.txt。调整字体大小、颜色和位置。这时画面里就会显示类似2025-03-21 20:30:45的文字并且随着文件更新而变化。这个方案有几个明显的坑我先把话说明白OBS 对文件变化的检测不是毫秒级实测下来经常要卡几秒到几十秒才刷新一次。所以只适合显示日期和分钟级别的时间做不到流畅的秒表倒计时。如果 Python 脚本没运行txt 内容不变化画面上的时间就是死的。文件的写入路径不要放在系统盘权限过高的目录里比如C:\Windows否则脚本可能没权限写文件。所以这个方案我更多是当作“备胎”来用比如临时需要显示一个日期或者我不想开浏览器源时用它顶一下。真要美观的倒计时还是回到浏览器源方案。4. 方案三时间/时钟/倒计时插件的下载与安装4.1 插件和HTML/文本源的本质区别插件是 OBS 的原生扩展安装后会集成到 OBS 的源代码类型或工具菜单里。比如某些插件安装后你添加来源时会多出一个“时钟”或“倒计时”的选项。它的优点是和 OBS 深度绑定不需要额外维护网页文件调用系统资源也更直接缺点是版本兼容问题多而且很多“时间插件”其实做得还不如 HTML 灵活。如果你已经决定走插件这条路我先提醒三件事都是常见翻车点。第一确认你的 OBS 版本和系统位数。打开 OBS菜单栏“帮助”里可以看版本号。绝大多数现代 OBS 是 64 位但插件作者如果只发布了 32 位版本你装进去也不会生效。第二只从可信渠道下载。不要在各种弹窗广告网站输入“OBS时钟插件下载”大概率会下一堆捆绑软件。优先选择 OBS 官方网站的插件列表、开源社区、作者公开的主页。下载之前看发布时间和评论区确认它适配你的 OBS 版本。第三下载后先解压别急着双击。很多 OBS 插件是以源码或绿色压缩包形式发布的你需要手动复制文件只有部分插件提供 exe 安装程序。4.2 手动安装插件的标准步骤如果你拿到的是一个 zip 压缩包解压后通常会看到两类目录obs-plugins里面是插件本体比如 64bit 下的 .dll 文件。data插件的数据文件比如图片、语言包、资源。手动安装就是把这两个目录里的内容合并到 OBS 安装目录下同名目录里。具体操作右键 OBS 的桌面快捷方式点击“打开文件所在位置”找到 OBS 安装根目录。一般会看到一个obs-studio文件夹进入后里面有obs-plugins和data两个目录。把解压出来的obs-plugins文件夹内容复制到obs-studio/obs-plugins里注意是合并不是覆盖替换。把解压出来的data文件夹内容复制到obs-studio/data里。关闭并重新打开 OBS。重启后如果插件安装成功你会在“来源”列表里看到新的类型或者在“工具”菜单里看到新的入口。不同插件出现的位置不一样最好去它的说明文档确认。macOS 的插件路径通常是/Library/Application Support/obs-studio/pluginsLinux 通常在/usr/lib/x86_64-linux-gnu/obs-plugins。不同系统路径有差异但“把插件文件放进 OBS 识别目录”这个逻辑是通用的。4.3 带安装程序的插件怎么处理有的插件发布的是一个 exe 安装包那就简单了双击运行按提示下一步。但安装时要留心两点不要在安装过程中被勾选安装“推荐浏览器主页”之类的捆绑软件。安装路径一定要指向你现在使用的 OBS 目录。不少人把 OBS 装在 D 盘安装包却默认指向 C 盘结果插件装完OBS 里什么也看不到。4.4 插件装完不生效、OBS崩溃怎么排查插件的兼容性问题是老生常谈。如果你严格按照流程操作重启后还是看不到插件按下面的顺序排查。先看日志。OBS 的日志在系统的用户目录下Windows 一般在%APPDATA%\obs-studio\logs。用记事本打开最新的日志文件搜索“error”或者插件名通常能看到具体报错原因。确认插件位数。你下载的插件如果标明是 32 位在 64 位 OBS 里是肯定不工作的。尝试以管理员身份运行 OBS。有些插件需要写入配置文件普通权限下会被拦截。如果 OBS 启动后直接崩溃很大概率是插件版本和 OBS 版本不匹配。这时候把你刚复制进去的 dll 文件删除就能恢复正常。这也是为什么我强调安装前先备份 OBS 的插件目录。不要一次安装两个同类型插件。比如你装了一个时钟插件又装了一个倒计时插件两个插件都试图修改默认设置结果可能互相冲突连 OBS 都打不开。5. 常见问题与排查技巧实录5.1 问题速查表我把自己遇到过的问题整理成了表格不一定每个都覆盖但命中率很高。问题可能原因解决办法浏览器源白屏HTML文件路径或文件名包含中文改成英文路径再重新选择本地文件倒计时一直停在同一个数字JavaScript目标时间已过或代码写死检查targetTime把目标时间改为未来的时间OBS里时间插件找不到插件目录复制错重新核对OBS安装路径合并到obs-plugins/64bit数字字体发虚输出分辨率低或者字体太细加大浏览器源分辨率CSS里加text-shadow倒计时插件导致OBS崩溃插件版本与OBS不兼容删除插件文件更换匹配版本时钟插件显示的时间不对系统时区设置错误在操作系统里校准时区和时间浏览器源占用CPU过高JS循环太频繁或网页里有复杂动画把setInterval改成 1000ms 一次减少CSS动画5.2 几个给新手的额外提醒浏览器源本地文件的位置一旦移动OBS 里就会找不到文件画面会变空白。所以 HTML 文件放好之后就尽量别挪动了。如果非要移动记得在浏览器源的属性里重新选择一次。倒计时的目标时间用的是 JavaScript 的new Date(2025-12-31T23:59:59)这种写法它读取的是你电脑的本地时区。如果跨时区协作最好用 ISO 带时区格式不然容易差好几个小时。如果你想在同一个画面里显示多种信息建议把它们写进同一个 HTML 文件然后用 CSS 控制显示位置。这样 OBS 里只加一个浏览器源既省资源又方便整体拖拽。5.3 我的选择按需求给你一句话结论如果你更重视样式和可定制性浏览器源 本地 HTML 是目前最省心的方案。如果你已经会看插件日志、能应对兼容问题正规渠道下载的插件也完全可用。如果你只是临时救场连 HTML 都不想写那就用手机计时器对着屏幕虽然不专业但总比没有强。我自己在多数情况下都选浏览器源。因为这个方案遇事不慌改样式改文字直接改 HTML 文件回到 OBS 刷新页面就好插件则需要卸载、重装、排查耗时会多不少。写在最后的经验折腾直播间工具这件事越简单越不容易出事故。我最常用的还是那份本地 HTML 文件配浏览器源颜色、文案、倒计时目标时间都能在代码里直接改而且实时生效。如果你想快速试试把代码里的目标时间先改成你最近一次开播的时间保存后拖进 OBS立刻就会看到一个干净利落的倒计时。最后分享一个小细节如果数字在直播画面里发虚并不一定是分辨率不够很可能是文字被缩放之后缺少抗锯齿。把浏览器源的分辨率适当调高到 1280x720 或更高再在 CSS 里给文字加一点text-shadow清晰度会有肉眼可见的提升。希望这篇教程能让你省下在弹窗广告网站里乱找插件的时间把更多精力留给直播内容本身。