用 Remotion 做出带水印、配音和字幕的讲解视频

背景和需求

一个教程站的首页和视频页需要两段演示视频。要求有三条：用第三方成熟的开源库来做，不要临时拼凑；视频里一定要有 @IMWANGXXXL 水印；手机上能直接看，带中文配音和字幕。

怎么跟 Grok Bot 说

text

把网站上两个视频占位做出来：
上集「快速开始」、下集「自动化进阶」，每集 2 分钟左右。
- 用成熟的开源库做，代码放进网站仓库的 /video 目录，以后能重新生成。
- 中文配音 + 字幕；字幕既要烧进画面，也要单独给一份字幕文件。
- 每一帧右下角都有 @IMWANGXXXL 水印，半透明，不挡内容。
- 画面里用网站的真实截图，不要编造应用界面。
做完先发给我看，再上线。

它做了什么

选型：画面用 Remotion（用 React 写视频），配音用 edge-tts，声音选 zh-CN-YunxiNeural；水印、响度和压缩用 FFmpeg；网站截图用 playwright-core 按手机尺寸自动截。
写脚本：每集拆成若干场景，每个场景一段旁白。脚本放在 JSON 里，改一句话不用碰代码。
配音和字幕对齐：逐场景合成语音，并拿到每个词的时间点。旁白按标点切成 18 字左右一行的字幕，场景时长按语音长度自动算，前后各留一点空白。
渲染：Remotion 先出无水印的原片，FFmpeg 再叠加 W 标志和 @IMWANGXXXL 文字水印，做响度标准化，压成手机友好的 H.264，并加 faststart 让网页边下边播。
配套文件：同一套字幕时间轴导出 .zh.vtt 字幕文件，封面图也加同样的水印。
先审再上线：把成片发到聊天里给账号主人看，确认后才放上首页和视频页。

一条命令就能重新生成全部内容：

bash

scripts/build.sh ep1 ep2   # 配音 → 渲染 → 加水印压缩 → 封面 → 字幕文件

踩坑与解决

许可证要先问清楚：Remotion 对个人和 3 人以内的团队免费，更大的公司要买公司授权。做法是不替使用者判断，而是直接问「这些视频算个人用还是公司用」。确认是个人用之后才继续用 Remotion。
界面不能编：画面里只用真实的网站截图，并在视频页注明「界面画面为示意，以应用内实际界面为准」。
水印位置：水印放在右下角，离边留足距离，避开字幕区域，不挡画面主体。

效果

两段成片：上集「快速开始」1 分 55 秒，下集「自动化进阶」1 分 58 秒，都已经放在视频演示页和首页。
视频源码和脚本都在仓库里，想改文案、换配音或者出新一集，都能从原文件重新生成。
后来又加了一条每天 0 点运行的视频例程，每天出一条 30 到 60 秒的竖屏短视频，沿用同一套水印和字幕做法。

可以直接用的提示词

text

用 Remotion + edge-tts + FFmpeg 给我做一条 45 秒的竖屏视频（1080×1920）：
题目：（填写）
- 开头 2 秒内先说结论，抓住人。
- 中文配音用 zh-CN-YunxiNeural，字幕每行不超过 18 个字，烧进画面。
- 右下角加半透明文字水印：（填你的账号）。
- 片尾 3 秒放关注引导和网址。
- 事实部分每一句都给我来源链接，查不到的删掉。
先发成片给我看，不要直接发布。