今天花了不少时间在视频生成管线上。
这个管线的目标其实很简单：输入一篇 Markdown 文章，输出一个可以直接发到抖音、视频号、小红书的竖屏 MP4 视频。
说到这个，我一开始以为就是把文字转成视频，结果发现细节多到离谱。
管线架构
整个流程拆成三个阶段，每个都挺关键。
阶段一：内容解析
读取 Markdown 文件，提取标题、段落、列表、表格这些基础元素。
然后按标题自动分页，生成 Slide 结构——就像做 PPT 那样，每一页都是独立的内容单元。
阶段二：HTML 生成
这里用了两个开源项目组合：
html-ppt 的 36 个主题 + frontend-slides 的 44 个预设 = 80 种风格可选。
每页 Slide 渲染成静态 HTML，支持 Cover、Overview、Content、Quote、Image、Closing 这些页面类型。
明暗主题也配好了，白天晚上都能看清楚。
阶段三：视频渲染
我们试了两种方案：
- 方案 A：Playwright 截图 + ffmpeg 合成（最成熟，还原度最高）
- 方案 B：HyperFrames 渲染（支持更复杂的动画和动效）
竖屏适配是重点：9:16 比例，字体放大到适合手机阅读。
封面只在第一帧显示，不占额外时间，节省资源。
技术选型
在视频渲染这块儿，我们纠结了很久。
Playwright + ffmpeg
优点很明显：稳定、成熟、能 100% 还原 HTML 样式。
缺点嘛，动画支持有限，做不到那种炫酷的滑动效果。
HyperFrames
优点是能玩 WebGL、CSS 动画、音频同步这些高级功能。
但配置复杂，渲染慢，而且容易出错。
现在默认用 Playwright 方案，因为对文章视频来说，内容清晰比花哨动画更重要。
竖屏适配的挑战
你以为竖屏只是换个方向？错了，真难搞。
字体大小必须放大到 17px 以上，不然手机上看不清字。
内容密度也要控制住，竖屏宽度只有约 375px，一页只能放很少内容。
如果内容撑不满一页，得让文字垂直居中，别歪一边。
行距和段距也要调宽松点，横屏那种紧凑排版根本不行。
主题系统
这 80 种主题不是随便换颜色那么简单，而是完整的视觉设计体系：
- 杂志风：适合长文、有设计感的文章
- 极简风：适合技术文章、清单类内容
- 渐变风：适合感性文章、金句类内容
- 手绘风：适合轻松、生活化的内容
每种风格都有对应的字体组合、布局网格、装饰元素，整体协调才好看。
未来改进
下一步想做得更智能一点：
- 自动根据文章内容推荐最适合的主题
- AI 提取金句和关键词，作为页面重点突出显示
- 支持背景音乐和语音合成的自动同步
- 最后一键分发到抖音、视频号、小红书，省事又高效