5.3 HTML 渲染路线

5.3 HTML 渲染路线

本节摘要：本节介绍剪辑段的第三条路线：用 Web 技术做视频。代表项目是 hyperframes（heygen-com/hyperframes，约 64.7k stars，社区口径、增速需甄别），官方描述一句话说尽思路：「写 HTML，渲染视频」。洞察在于：字幕条、数据可视化、动效这类动态图形，Web 生态的工具（样式、动画、图表库）比视频剪辑工具强大得多——与其在剪辑软件里笨拙地做图形动画，不如直接写页面，再无头渲染成片。技术路径是本节的骨架：页面做成「时间纯函数」——每一帧的画面由 seekTo 函数唯一决定；无头浏览器逐帧截图，ffmpeg 帧序列合成（5.1 速查表已有那条命令）。适用面聚焦信息可视化类内容：数据故事、产品说明、栏目片头；与 AI 生成的实拍感画面是互补而非竞争，混合路线（AI 画面打底、HTML 图形层叠加）是知识类内容的常见最优解。具体生态与工具链以 hyperframes 官方仓库为准。

学习目标

• 复述「写 HTML 渲染视频」的思路及其成立的理由。
• 说出该路线的适用面与不适用的场景。
• 实现「时间纯函数」页面：seekTo 决定每一帧。
• 用无头浏览器加 ffmpeg 跑通逐帧渲染到成片的链路。
• 为知识类内容设计「AI 画面打底加 HTML 图形叠加」的混合路线。

一、思路：写 HTML，渲成视频

 传统路线                            HTML 渲染路线
 ┌────────────────┐                ┌────────────────┐
 │ 剪辑软件里做图形动画 │               │ 写页面：样式、动画、  │
 │ 图形能力受剪辑工具限制│              │ 图表库全是现成的     │
 │ 逐帧调，费人         │              │ 代码可复用、可 diff   │
 └────────────────┘                └───────┬────────┘
                                            │ 无头浏览器逐帧截图
                                   ffmpeg 帧序列合成 ──▶ 成片
​

这条路线把「做动态图形」从视频工具的弱项换成 Web 生态的强项：一个数字滚动动画在剪辑软件里要手调关键帧，在页面里是一段代码；同一套栏目片头模板改标题就能复用，因为它是模板而不是工程文件。hyperframes 把这条路工程化（面向智能体使用做了优化，官方描述如此），本书取其思想自建轻量链路——三段代码就能跑通，不依赖该项目本身。

二、适用面：信息可视化类的主场

判断口诀：画面里「图形比镜头多」走 HTML，「镜头比图形多」走生成加剪辑，两者都重就混合。0.1 节的彩虹短片其实是混合路线的典型——三段光路动画用图形绘制最干净，首尾空镜交给生成。

三、技术路径：时间纯函数加逐帧渲染

页面要满足一个关键约束：每一帧的画面由时间唯一决定。禁用浏览器的自动播放与平滑过渡，把动画全部改成「根据当前时间计算状态」的纯函数：

 index.html 的结构（文字描述，不贴标记代码）：

 ┌────────────────────────────────────┐
 │ 根容器：1920 by 1080，深色背景         │
 │   ├─ 标题区：大字标题，透明度随时间上升  │
 │   ├─ 数据区：三根统计条                │
 │   │     宽度由 CSS 变量按进度驱动       │
 │   └─ 字幕条：固定定位在底部             │
 │                                      │
 │ window.seekTo(秒)：按时间更新全部状态， │
 │ 每一帧画面由此函数唯一决定（可复现）      │
 └────────────────────────────────────┘
​

/* overlay.css —— 统计条与字幕条样式示意（帧渲染模式禁用平滑过渡） */
.stat-bar {
  width: var(--progress);       /* seekTo 逐帧更新该变量 */
  height: 64px;
  background: linear-gradient(90deg, #3a7bd5, #6fb1fc);
  transition: none;             /* 帧渲染要逐帧精确，禁用插值 */
}
.caption-strip {
  position: fixed;
  left: 8%;
  width: 84%;
  bottom: 6%;
  font-size: 42px;
  color: #f5f6f8;
  background: rgba(14, 16, 22, 0.75);
}
​

# record_frames.py —— 无头浏览器逐帧渲染截图（写法示意，以 Playwright 官方文档为准）
from playwright.sync_api import sync_playwright

WIDTH, HEIGHT, FPS, SECONDS = 1920, 1080, 30, 5

with sync_playwright() as p:
    browser = p.chromium.launch()
    page = browser.new_page(viewport={"width": WIDTH, "height": HEIGHT})
    page.goto("file://overlay/index.html")
    for frame in range(FPS * SECONDS):
        page.evaluate("window.seekTo(%d / %d)" % (frame, FPS))
        page.wait_for_timeout(20)
        page.screenshot(path="frames/frame_%04d.png" % frame)
    browser.close()
​

# bash —— 帧序列合成视频（5.1 速查表同款命令）
ffmpeg -framerate 30 -i frames/frame_%04d.png -c:v libx264 -crf 18 -pix_fmt yuv420p html_track.mp4
​

链路四步：写页面（时间纯函数）、逐帧截图（无头浏览器）、帧序列合成（ffmpeg）、必要时与 AI 画面轨混叠（上一节 CompositeVideoClip 或 ffmpeg overlay 滤镜）。渲染速度的量级（示意）：1080p、30 帧、逐帧截图大约每帧几十毫秒，五秒片子的图形层渲染在分钟内；更快的路径（浏览器内直接录制成片、WebCodecs 硬编）hyperframes 生态有现成方案，以官方仓库为准。

四、与直接剪辑的对照与选型

选型建议按内容形态走，不看技术偏好：数据与演示类内容 HTML 为主；叙事内容生成加剪辑为主；知识短片取混合——AI 生成画面打底（第 3 章）、图形与字幕层 HTML 渲染、moviepy 或 ffmpeg 完成两层合成。混合路线里两层的帧率与分辨率对齐交给配置（1.3 节），模板的复用让栏目化生产的边际成本持续下降。

本节要点回顾

• 思路一句话：动态图形是 Web 主场，写页面再无头渲染成片；hyperframes 是该路线的工程化代表。
• 适用口诀：图形多走 HTML，镜头多走生成剪辑，知识短片常取混合。
• 页面铁律是时间纯函数：seekTo 唯一决定每帧，禁用平滑过渡。
• 链路四步：页面、逐帧截图、ffmpeg 合成、双层混叠；速度慢是代价，复用性是回报。

至此前半本合拢：从一句想法到七段流水线到一条无音轨成片。后半本第 6 章从音轨接手，一路走到发布与合规。