展开本页目录
开始前准备什么
- 下载本页原创练习素材，或准备自己的有权使用素材。
- 核对本页对应软件或账号实际版本；Remotion 示例需要已有可运行项目。
- 保留原素材、实际参数和独立输出，不覆盖输入。
- 先拿到人工校准的 SRT
- 核对 captions 包版本
- 当前帧转成毫秒
- 设计中文行宽与留白
- 检验空档与边界
- 导出字幕层与工程版本
下载本教程完整练习素材
包含独立输入、模板、原创图形与 HTML 教材、验收表和离线检查；不包含外部账号或付费模型结果。
下载 subtitles.srt
本页具体任务输入或操作模板；按步骤替换为自己的实际材料。
下载验收记录 CSV
保留实际结果证据，默认待验证，不用人工预期填充通过。
1. 先拿到人工校准的 SRT
下载两句字幕样本，保持 UTF-8、合法时码与条目间空行。它不是语音识别结果；真实视频须先对音轨人工校准，再交给渲染代码。
2. 核对 captions 包版本
官方 parseSrt 返回 captions 数组，时间单位是毫秒。下载组件使用 parseSrt({input})，不依赖新版本专有 strict 参数；安装与项目匹配版本后先跑自己的构建检查。
3. 当前帧转成毫秒
用 frame/fps*1000 得到当前时间，条件为 startMs <= now 且 now < endMs。结束边界采用左闭右开，避免相邻字幕在同一时刻同时显示。
subtitles.srt
srt
1
00:00:00,000 --> 00:00:01,800
先对齐音轨。
2
00:00:02,100 --> 00:00:03,900
再导出字幕。4. 设计中文行宽与留白
将字幕放在固定底部容器，限定宽度、居中并保留背景对比。先用最长句预览，避免每字强行拆行；横转竖后需要重新调整字号与边距。
5. 检验空档与边界
本样本在 1800 到 2100 毫秒留白。检查空档不显示旧句，开始前不显示下一句；node check.mjs 验证时间数据，画面仍要在实际合成中查看。
6. 导出字幕层与工程版本
先渲染几帧边界图，再导出完整视频并试听。保持 SRT 单独可下载，烧录字幕只是一种交付；页面配图为文字显示规则的真实教材渲染。
7. 下载材料并关联实际结果
先运行素材包内的 node check.mjs 检查输入结构，再完成需要账号或编辑器的步骤。离线通过不表示模型生成、外部软件导出或自然流量已经验证。
怎样确认已经完成
- 左闭右开的边界条件不会重叠字幕。
- 最长中文句没有溢出画布。
- 空档、起止帧和实际音轨已核对。
常见问题
为什么字幕消失后一帧又出现？
检查帧与毫秒单位是否混用、结束条件是否用了 <=，再核对 SRT 条目重叠。
素材截图是 Remotion 渲染结果吗？
不是。截图为本站可下载 HTML 教材按同样时间规则渲染；实际 Remotion 输出需要在你的项目中运行。