发出去之后我自己回看那条片子，左边一行「1998」少了个 1。金色描边框没有左边框，「9%」被头像压住半个数字。
手机上看着不像 bug，像我活儿没干完。
这条片子 36.8 秒，竖屏，讲 AI 为什么会一本正经地胡说八道。全程没有打开任何剪辑软件，画面是一行行代码画出来的。
下面是我返工七轮踩到的五个坑。它们没一个出在「画得好不好看」上。
先说这条片子是怎么来的
一个单文件 index.html，Canvas 画布 1080×1920，暴露一个 render(t) 函数。给它秒数，它画出那一秒该有的样子。外面用无头浏览器逐帧调这个函数、截图，30 帧一秒，一共 1104 帧，最后交给 ffmpeg 编码。
渲染 1104 帧用了 56 秒，大约 20 帧每秒。
选这条路的原因很实际。改一行坐标，一分钟就能看到结果。而且画面只由 t 决定，同一秒渲两遍像素完全一致，改坏了能立刻复现是哪一帧出的问题。
代价是所有版式细节都得自己算。字号和行宽要算准，居中对齐、安全边距也一样，没一样能靠「看起来差不多」蒙过去。
平台替我放大了 12%
我做设计时留了 5.9% 的左右边距。这个数字不算宽裕，但在电脑上看是够的。
问题在于抖音的沉浸式播放会再放大一截。我拿手机截图和原始帧逐像素对了一遍，放大量大概 12%，等于每边再切掉 5.4%。加上我自己做的推镜又放大 5.5%，三者叠起来，5.9% 的边距直接变成负数。
看左边这张。「这家公司成立于」的「这」贴着屏幕边缘，「1998」的第一个 1 被削掉一半，「9%」压在头像下面，右下角那行「示意数据」正好盖在点赞按钮上。
改法是把内容整体缩到 88% 再居中，背景保持满幅不动。这样等效边距从 5.9% 提到 11%，推镜幅度也从 5.5% 压到 3%。
顺带做了个检查工具。把静帧放大 1.12 倍再裁回 9:16，叠上三块半透明色块，分别是顶部状态栏、右侧图标栏，还有底部评论条。扫一眼就知道有没有东西被盖住。以后每条竖屏片出片前都跑一次。
居中了，看着还是偏
第二处是那个不等号。代码里它明明写的是居中。
问题出在两件互不相干的事上。
一件是色块和文字用了两套中心。两个色块画在安全区的左右边界之间，从 64 到 904，中心在 484；而不等号按画面中心 540 定位。差 56 像素，缩放之后还剩 50。所以它在画面正中，但不在两个框的正中。
另一件更隐蔽。canvas 的居中对齐按字宽算，不看墨迹。「你被 AI 骗过吗？」里的问号是全角符号，字宽占一整格，墨水只画在左半边。按字宽居中，整行看起来就偏左了 26 像素。
这个偏移量可以算出来。那个符号的左沿是 -25、右沿是 147，字宽 172。我要的是让墨迹的中心落在 x 上，所以不能直接减字宽的一半。
改法是居中时一律先设成左对齐，再用 x 减掉「墨右减墨左」的一半。
中间我走错过一次，把公式写成了加号，不等号反而右偏 22 像素。原因是量位置时掩膜开得太大，把背景微光也算进去了，误判了初版公式是对的。后来在浏览器里画了三遍不同偏移、直接读像素，才把它定下来。
顺带一个小的，中文字幕把词拆开了
开场那句「哈佛 Smith 教授的论文」，换行时把「哈佛」拆成了两行，哈在行尾，佛在下一行。
中英混排的换行只按字符切，没有词边界的概念。西文我做了处理，按单词整体切，不会把 Smith 拆成 S 和 mith；中文没做，两个字的词照样能断。
改起来不难，在语义断点手动插一个换行符，字号从 52 降到 48 给点余量。这类问题机器查不出来，只能自己盯着看。
红叉挂在了框外面
红叉的坐标是写死的，锚在气泡底部往下 150 像素。气泡本身只有 196 高，所以叉的下半边直接出了框，看着像贴纸没贴牢。
同一个画面里还有个更尴尬的。左上角那个「很多人以为」是下一场的标题，它淡入的时候上一场的对话气泡还没退完，两行字叠在一起，截图上能看到「人以为」三个字透出来。
改法都简单。叉改成按气泡高度取中线，尺寸收小一点。两场之间的时间轴错开，上一场提前 0.3 秒退干净，下一场才进场。
文件做好了，对方说打不开
视频渲染完，丢给同事预览，弹一句「该视频编码格式浏览器不支持在线预览」。
我查了参数，H.264 High、Level 4.0、yuv420p，标准得不能再标准，ffmpeg 全量解码零报错。
真正的原因是没有音轨。这条片子我做的是无声版，整条流里只有画面。不少在线预览服务碰到没音轨的 mp4 会直接拒绝转码，然后统一回一句「编码格式不支持」。这句提示会把人带到编码格式上去查，其实完全无关。
补一条静音 AAC 轨就好了，画面码流原样复制，不重新编码，画质一像素不掉。
顺手做了两个版本。一个 6.4 Mbps 的给平台上传，一个 2.1 Mbps 的用来预览和转发。两个版本算下来 SSIM 是 0.9965，肉眼分不出，体积差了三倍。
每一帧都对，连起来像 PPT
这个最难受。逐帧看每一张都没毛病，连起来放一遍，感觉像幻灯片。
我把整片按 10fps 抽帧，算相邻帧的平均像素差，画了条曲线。最长的一段连续低变化有 2.4 秒，落在一个信息量很足、但画面完全静止的镜头上。
画画得没错，问题出在镜头完全不动。观众的眼睛需要一点持续的变化，才能确认「这是视频」。
改法是给每个长停留的镜头加缓慢推近，幅度 3% 左右，从镜头开始一直走到结束。转场也不再用淡入淡出，改成上一场朝镜头推穿、下一场从下方沉定，靠运动交接。
改完再跑一遍曲线，最长静止段压到 1.8 秒。
什么时候别用这套
| 场景 | 结论 |
|---|---|
| AI 概念、统计、流程、对比 | 正合适。全是几何形状和字，代码画得比剪辑软件快，改个数字不用重做时间线 |
| 一稿多平台 | 合适。抖音要 38 秒、小红书要 60 秒，改时间轴比重剪一遍省事 |
| 实拍、录屏、访谈 | 不合适。这套完全使不上劲，还是老老实实用剪辑软件 |
| 多人同时编辑 | 不合适。版式全在代码里，两个人改一个文件就是灾难 |
| 已经知道要什么的一次成型 | 不合适。剪辑软件半小时能出的东西，写代码可能要两小时 |
还有一点得说清楚，这套流程对我这种「改二十遍」的工作方式很友好。凡是我自己也不确定成品该长什么样的活，改代码的成本比拖时间线低得多。反过来，需求一开始就清楚的话，它是浪费。
五个坑里，四个跟画得好不好看没关系。它们全在画面之外：平台怎么裁、字怎么排、文件怎么封装、镜头怎么动。画得好只是入场券，画面交出去之后会发生什么，才是真正要操心的。