用前端代码做视频究竟有多好用？

今天，我再次和大家推荐用前端代码做视频。

2月份的时候，我专门写过一篇日课，讲怎么用 Remotion 这个工具「像写文章一样写出视频」。上个月 HeyGen 刚开源了一个叫 HyperFrames 的新东西，也号称用代码做视频。

不管 Remotion 还是 HyperFrames，底层原理都一个东西：把网页录制成视频。

浏览器本身就能渲染文字、图片、动画、3D、视频，所有视觉元素全都能跑。那我能不能写一个会自动播放的网页，然后用一个自动化的摄像机对着它录下来？这就是前端代码做视频的本质。

但在怎么「写这个网页」这件事上，两条路子完全反着来。

Remotion：用 React 写视频

这个在2月6日的日课里讲得很细了，我快速过一下。

Remotion 是让你用 React 组件来定义视频的每一帧。React 是一种前端框架，它的核心思想是把 UI 拆成一个个可复用的零件，你拼零件就行了。

比如说你要做一个视频，里面有三个场景：标题卡、产品演示、结尾二维码。在 Remotion 里你就写三个 React 组件，每个组件管一个场景的动画逻辑。Remotion 再负责把这些组件按时间轴串起来，一帧一帧渲染成 MP4。

它最大特点是「工程化」。什么意思呢？就是它把视频创作当成软件开发来管。

举个真实案例：GitHub 每年的 GitHub Unwrapped 年度回顾视频，给每个用户生成一段专属的年终总结，你今年写了多少代码、提交了多少次、最活跃的时间段。这背后就是 Remotion。每年几十万用户，每个人都生成不一样的视频，靠纯人工剪根本不可能。但用代码写好一个模板，填不同用户的数据进去，自动渲染，就能轻松实现。

类似的还有 Electricity Maps，它用 Remotion 生成欧洲电网碳排放的动态数据可视化视频。数据在变，视频自动跟着变，不需要人重新剪。

这就是 Remotion 的强项：一旦你搭好视频生产线，量产能力是传统剪辑师的几百倍。

HyperFrames：用 HTML/CSS/JS 写视频

HyperFrames 是上个月（4月17日）HeyGen 开源的。GitHub 地址：https://github.com/heygen-com/hyperframes。