使用 Codex 制作 HTML 动画视频

把文字、画面和动画要求交给 Codex，从一个 HTML 页面做出可播放的 MP4。

想做一段文字逐渐出现、图片随时间移动的动画视频，可以把制作任务交给 Codex：说明画面和节奏，让它编写 HTML 动画、运行截帧脚本，再导出 MP4。

我们负责确定内容、查看效果和提出修改，Codex 负责把这些要求落实成页面、脚本和视频文件。

这篇文章用一段 5 秒文字动画，演示从创建项目到导出视频的过程。下面的提示词是根据这次实践整理的示例，可以按自己的内容替换；它们不是生成相同画面的保证。

一、准备项目，检查制作环境

先在 Codex 中打开一个用于制作视频的本地项目目录。如果已有图片、字体或配音，把素材放进项目，并在任务中说明文件位置。本例只有文字动画，不需要额外图片或配音。

本地制作需要 Codex 能读写项目文件、运行命令。先让它检查环境，避免等画面做好后才发现无法导出。

可以输入：

我要在当前项目中使用 HTML 制作动画视频。
请检查 Node.js、Playwright、浏览器运行环境和
FFmpeg 是否可用，优先复用已经安装的工具。
有图片处理需求时再检查 Python 和 Pillow。

请说明缺少哪些依赖，并完成当前权限允许的配置。
如有无法完成的步骤，告诉我具体原因和需要的操作。
将这次视频的文件集中放在独立目录中。

这一步要得到的是环境检查结果和明确的项目目录。如果缺少依赖，按实际提示完成配置；不能把“已经写出代码”当成“已经可以生成视频”。

这些工具在制作中的分工如下。我们只需理解流程，具体代码和命令由 Codex 完成。

HTML、CSS 和 JavaScript 负责画面与动画，Playwright 按时间截图，FFmpeg 将画面编码为视频。Pillow 用于按需绘制、裁剪或缩放图片，纯文字示例可以不使用。

二、生成第一版 HTML 动画

开始制作时，把文字内容、尺寸、时长、颜色和动画节奏一起告诉 Codex。这里沿用现有示例中的标题，制作横版、无声音的短片。

可以输入：

请在项目中制作一个 5 秒的 HTML 文字动画。

画面：1280 × 720，横版。
背景：暖白 #F7F5EF。
文字：深绿 #243E38，橙色 #DD703C 少量点缀。
标题：用 HTML 制作视频
说明：让文字与画面，跟随时间变化。

0～1 秒：标题从向下偏移 40 px 的位置上移归位，
同时从完全透明变为完全可见。
1.2～2 秒：说明文字逐渐出现。
2～5 秒：保持完整画面。
这版不加配音或背景音乐。

请直接创建 HTML 文件，提供可播放、可重播的预览。
使用统一时间控制动画，便于之后逐帧导出。
先给我看网页效果。

这一步应该得到能打开预览的 HTML 文件。先看标题有没有换行、文字是否被裁切、说明文字何时出现，以及最后的停留时间是否合适。

尺寸也可以换成竖版的 1080 × 1920，但需要同时重新安排布局，不能只改变视频文件的尺寸。

三、查看效果，继续修改

预览之后，直接在同一个制作任务里提出修改。可以附上截图，指出要改的元素、位置和时间段。

例如，觉得标题出现得太快，可以继续输入：

标题出现得有些快。
请把标题动画从 1 秒延长到 1.5 秒，
说明文字改为在 1.7～2.5 秒出现，
视频总时长仍为 5 秒。
修改后重新提供预览，并列出调整后的时间安排。

这是一种修改示例，并未应用到本文现有视频。它说明了如何把“慢一点”变成能落实的时间调整。

如果想检查动画中途的状态，还可以输入：

请截取当前动画在 0 秒、0.5 秒和 1 秒的画面，
并排展示，标明时间。
检查标题是否逐渐显现、位置是否连续变化，
以及文字有没有溢出画布。

下图是现有 1 秒标题动画的三个时间点。0 秒时标题完全透明，所以看不到标题；到 1 秒时，它已经完整显示。

图中的 renderAt(t) 是这次示例使用的时间控制函数，t 表示秒数。它由代码实现；使用 Codex 制作时，可以直接要求它按时间生成截图，无需自己编写这个函数。

四、导出 MP4，检查成片

确认网页效果后，再让 Codex 生成视频。网页预览和 MP4 是两份不同的交付物，需要明确提出导出要求。

可以输入：

请将当前确认的 HTML 动画导出为 MP4。
保持 1280 × 720、5 秒、30 帧每秒，无音轨。

使用 Playwright 按视频时间逐帧截图，
等待字体和图片加载完成后再开始。
使用 FFmpeg 编码，输入帧率与截帧帧率保持一致。

请实际运行导出流程，检查分辨率、时长、
总帧数和全片解码是否正常。
再提取第 3 秒的视频画面，与网页同一时间点对照。

交付 MP4、HTML 源文件、渲染脚本，
以及下次重新导出的方法。

本例 5 秒、30 帧每秒，对应 150 帧。Codex 需要生成这些画面，再调用 FFmpeg 完成编码。如果运行报错，可以继续让它根据报错检查和修复，直到拿到可播放的文件，或明确说明尚未解决的问题。

左侧来自网页，右侧来自导出的 MP4。两者应保持相同布局；有损编码可能带来轻微的像素差异。

本次已经生成的效果：5 秒示例视频

配套文件：HTML 动画源码

这段示例为 1280 × 720、30 帧每秒、无音轨，已经完成 150 帧渲染和全片解码检查。拿到视频后，仍要实际播放一遍，查看动画节奏、文字清晰度以及首尾画面。

五、从短片扩展到自己的内容

跑通短片后，可以换成自己的知识说明、数据展示或产品介绍。把文章和素材放进项目，再让 Codex 先整理成口播稿与分镜。

例如：

请根据项目中我指定的文章，制作一段 30 秒竖版
HTML 动画视频，尺寸为 1080 × 1920。

先列出各段的时间、屏幕文字和所用素材，
给我看分镜。每个画面只保留一个重点。
分镜确认后，再制作动画并导出 MP4。

如果需要配音，先说明可用方案和所需素材。
使用配音后，按实际音频长度安排画面与字幕。

这里新增的是内容组织、镜头切换和声音配合。30 秒、30 帧每秒需要生成 900 帧，完整导出也会比 5 秒示例更费时。可以先完成一个片段，确认效果后再继续。

保留 HTML、素材和渲染脚本，后续就能在同一项目中继续修改。 换文字、调整颜色或改变节奏后，都需要重新导出视频。

这套方法适合文字、图片和图表为主的动画。大量实拍素材的筛选、复杂剪辑或细致声音处理，仍可能需要结合其他制作工具。

最后

使用 Codex 制作 HTML 动画视频，可以从一个很小的任务开始：写清楚要展示什么，让它生成动画，查看预览，再导出 MP4。

先完成一段 5 秒短片，再逐步加入自己的内容、图片和声音。

参考：OpenAI 的 Codex 使用实践。本文的制作步骤和提示词基于本项目实践整理。

---