1. 从标题说起一个模型怎么“做”出视频第一次看到“Claude Opus 5.5 是怎么做出视频的”这个标题我脑子里冒出来的第一个念头是它到底是在“生成视频”还是在“用代码把视频拼出来”这两个方向差别很大。前者是模型直接输出像素帧序列后者是模型写代码代码再去驱动浏览器或命令行工具把画面和声音合成出来。结合热搜词里反复出现的 JS、Canvas、FFmpeg 这几个关键词我基本可以判断这里说的“做视频”大概率是后者——模型负责写逻辑、写渲染、写合成脚本真正干活的还是 Canvas 和 FFmpeg 这套老搭档。这个思路其实很务实。直接让模型吐视频帧成本高、可控性差、分辨率一上去就崩而让模型写一段可运行的渲染代码你就能在本地反复调、反复改最后用 FFmpeg 把帧序列压成 mp4。整条链路是透明的每一帧怎么来的你都能查。适合谁来参考我觉得三类人最合适一是想用 AI 辅助做动画或数据可视化的前端二是想批量生成短视频素材的运营或内容创作者三是单纯好奇“模型写代码做视频”到底靠不靠谱的技术爱好者。下面我就按我自己的理解把这条链路从头到尾拆一遍。2. 整体设计思路为什么是 Canvas 加 FFmpeg 这套组合2.1 模型负责“写”不负责“渲染”很多人对“AI 做视频”有个误解以为模型会直接输出一段视频文件。实际用下来更稳的做法是让模型输出可执行的渲染脚本。原因很简单视频本质是“一帧一帧的图片按时间轴排列”而生成单帧图片这件事用代码画比用模型猜要精确得多。模型擅长的是把“我要一个蓝色背景、中间有个跳动的小球、右下角有文字”这种自然语言描述翻译成 Canvas 的绘制指令。它不需要理解像素只需要理解 API。我试过让模型直接描述每一帧的画面结果就是帧与帧之间不连贯小球的位置会跳。后来改成让它写一个requestAnimationFrame循环用时间变量t去算小球位置连贯性问题一下就没了。这就是“写代码”和“生成画面”的本质区别代码里有状态、有函数、有数学关系画面自然就连续了。2.2 Canvas 负责“画”浏览器负责“跑”Canvas 是浏览器里的一块画布你可以用 JS 在上面画线、画圆、贴图、写字。它的优势是即时反馈——写完代码刷新页面就能看到效果调颜色、调位置、调动画曲线都非常快。对于做视频来说Canvas 还有一个隐藏好处它可以通过canvas.toDataURL()或captureStream()把每一帧导出来。导出成图片序列之后FFmpeg 就能接手了。这里有个关键选择是用captureStream()实时录制还是逐帧导出图片我两种都试过。实时录制的问题是帧率不稳定浏览器卡一下就会丢帧最后视频会一卡一卡的。逐帧导出虽然慢一点但每一帧都是确定的压出来的视频丝滑得多。所以如果你追求质量我建议走“逐帧导出 PNG 序列再用 FFmpeg 合成”这条路。2.3 FFmpeg 负责“合”把帧变成视频FFmpeg 是视频处理领域的万能工具把一堆图片按顺序压成视频对它来说就是一条命令的事。核心命令大概长这样ffmpeg -framerate 30 -i frame_%04d.png -c:v libx264 -pix_fmt yuv420p output.mp4这条命令的意思是以每秒 30 帧的速率读取frame_0001.png、frame_0002.png这样的序列用 H.264 编码输出成兼容性最好的 mp4。-pix_fmt yuv420p这个参数特别重要不加的话有些播放器会显示不了。我第一次做的时候就是漏了这个结果视频在本地能播发到手机上就是黑屏排查了半天才发现是像素格式的问题。2.4 为什么不让模型直接调 FFmpeg有人会问既然模型能写代码为什么不直接让它写 FFmpeg 命令答案是可以但不够。FFmpeg 只能处理已有的素材它不会“无中生有”地画出画面。所以整条链路必须是“Canvas 生成素材 → FFmpeg 合成视频”。模型的价值在于把这两步都自动化它既写 Canvas 的绘制逻辑也写 FFmpeg 的合成脚本甚至还能写一个 Node.js 脚本把两步串起来。这才是“模型做视频”的完整含义。3. 核心细节解析Canvas 渲染与 FFmpeg 合成的关键点3.1 Canvas 逐帧导出的正确姿势逐帧导出听起来简单但有几个坑必须提前说。第一不要用setInterval控制帧因为它的时间精度不够容易导致帧与帧之间的时间间隔不均匀。正确做法是用一个循环手动计算每一帧对应的时间t然后调用绘制函数再导出。伪代码大概是这样const totalFrames 300; // 10秒 * 30帧 const fps 30; for (let i 0; i totalFrames; i) { const t i / fps; drawScene(t); // 根据时间t绘制画面 const dataURL canvas.toDataURL(image/png); saveFrame(dataURL, i); // 保存为 frame_0001.png }第二toDataURL是同步的帧数一多浏览器会卡死。解决办法是分批次导出或者用canvas.toBlob()配合异步保存。我一般会把总帧数控制在 300 到 600 之间也就是 10 到 20 秒的视频再长就分段做最后用 FFmpeg 拼接。第三分辨率别贪大。1080p 的 Canvas 导出 PNG一帧大概 2 到 3 MB600 帧就是 1.5 GB 左右。如果你的硬盘不够快导出过程会非常痛苦。我通常先用 720p 做预览确认动画没问题了再切到 1080p 正式导出。3.2 动画的时间函数怎么设计视频好不好看很大程度上取决于动画的“节奏”。线性运动看起来很机械加入缓动函数就会自然很多。比如小球弹跳可以用Math.sin或者二次函数来模拟重力。下面这个缓动函数是我常用的function easeOutCubic(t) { return 1 - Math.pow(1 - t, 3); }它的效果是“开始快、结尾慢”适合做元素入场。反过来easeInCubic适合出场。如果你想让动画有“回弹”效果可以用easeOutBack。这些函数都不复杂但能让画面质感提升一个档次。模型在写代码的时候如果你在提示词里明确说“用 easeOutCubic 做入场”它一般都能正确实现。3.3 FFmpeg 参数里的门道FFmpeg 的命令行参数很多但做图片序列合成视频真正需要关心的就那么几个。我整理了一个对照表方便你按需调整参数作用推荐值说明-framerate输入帧率30要和导出帧数匹配-c:v视频编码器libx264兼容性最好-pix_fmt像素格式yuv420p不加手机可能黑屏-crf画质等级18数值越小画质越好18 到 23 是常用范围-preset编码速度medium越快画质略差越慢画质略好-vf视频滤镜scale1280:720需要缩放时使用-crf这个参数值得多说一句。它的全称是“恒定速率因子”范围是 0 到 51。0 是无损但文件巨大51 是画质最差。我一般用 18 到 20肉眼几乎看不出压缩痕迹文件大小也还能接受。如果你做的是文字较多的画面建议用 16 到 18因为文字边缘的压缩瑕疵比较明显。3.4 音频怎么加进去纯画面视频看起来会比较干加个背景音乐或者音效会好很多。FFmpeg 加音频有两种方式一种是合成视频时直接混入另一种是后期再合并。我推荐后者因为调起来方便。合并命令如下ffmpeg -i video.mp4 -i audio.mp3 -c:v copy -c:a aac -shortest output.mp4-c:v copy表示视频流不重新编码直接复制速度快-c:a aac表示音频用 AAC 编码-shortest表示以较短的流为准避免音频比视频长导致黑屏。这个命令我用了无数次基本没出过问题。4. 实操过程从零做一段 10 秒动画视频4.1 第一步搭一个最小的 Canvas 页面先建一个index.html里面放一个 Canvas 和一个导出按钮。代码不用复杂能画东西就行!DOCTYPE html html head meta charsetutf-8 titleCanvas 视频导出/title /head body canvas idstage width1280 height720/canvas button idexport导出帧序列/button script srcrender.js/script /body /html这里我把 Canvas 尺寸设成 1280x720也就是 720p。如果你想做竖屏视频改成 720x1280 就行。注意 Canvas 的width和height属性是绘图分辨率和 CSS 里的显示尺寸是两回事别搞混了。4.2 第二步写绘制逻辑在render.js里我定义一个drawScene(t)函数t是当前时间秒。比如画一个从左到右移动的圆const canvas document.getElementById(stage); const ctx canvas.getContext(2d); function drawScene(t) { // 清空画布 ctx.fillStyle #1a1a2e; ctx.fillRect(0, 0, canvas.width, canvas.height); // 计算圆的位置 const progress Math.min(t / 5, 1); // 5秒内完成移动 const x 100 progress * (canvas.width - 200); const y canvas.height / 2; // 画圆 ctx.beginPath(); ctx.arc(x, y, 60, 0, Math.PI * 2); ctx.fillStyle #e94560; ctx.fill(); // 画文字 ctx.fillStyle #ffffff; ctx.font 48px sans-serif; ctx.fillText(Claude Opus 5.5, 100, 100); }这段代码里progress用Math.min限制在 0 到 1 之间保证圆不会跑出画布。文字用的是系统无衬线字体兼容性最好。如果你想用自定义字体记得等字体加载完再开始导出否则第一帧可能是默认字体。4.3 第三步逐帧导出并保存浏览器里没法直接写文件所以我的做法是每导出 30 帧打包成一个 zip 下载或者用 Node.js 起一个本地服务接收数据。如果你不想折腾最简单的办法是用canvas.toDataURL()生成图片然后手动右键保存——但 300 帧手动保存会疯掉。所以我推荐用 Node.js 配合puppeteer做自动化或者直接用CCapture.js这个库它能直接把 Canvas 帧录成视频。不过CCapture.js底层还是用 WebM 编码画质和兼容性不如 FFmpeg。我的折中方案是用 Puppeteer 打开页面在页面里逐帧调用drawScene然后用page.screenshot()截图保存。这样每一帧都是 PNG质量有保证。Puppeteer 的代码大概是这样const puppeteer require(puppeteer); const fs require(fs); (async () { const browser await puppeteer.launch(); const page await browser.newPage(); await page.setViewport({ width: 1280, height: 720 }); await page.goto(file:// __dirname /index.html); const fps 30; const duration 10; const totalFrames fps * duration; for (let i 0; i totalFrames; i) { const t i / fps; await page.evaluate((time) { drawScene(time); }, t); await page.screenshot({ path: frames/frame_${String(i).padStart(4, 0)}.png }); } await browser.close(); })();这段代码的关键是page.evaluate它能在页面上下文里执行drawScene。padStart(4, 0)保证文件名是frame_0000.png这种格式FFmpeg 才能正确识别序列。4.4 第四步用 FFmpeg 合成视频帧序列导出完之后打开终端进入frames目录的上一级执行ffmpeg -framerate 30 -i frames/frame_%04d.png -c:v libx264 -pix_fmt yuv420p -crf 18 output.mp4等几秒钟output.mp4就出来了。你可以用播放器打开看看效果。如果发现视频速度不对检查-framerate是不是和导出时的 fps 一致。如果发现画面颜色偏了检查-pix_fmt是不是yuv420p。这两个问题我几乎每次做新项目都会遇到一次现在已经成为肌肉记忆了。4.5 第五步加背景音乐并做最终输出假设你有一个bgm.mp3执行ffmpeg -i output.mp4 -i bgm.mp3 -c:v copy -c:a aac -shortest final.mp4这样final.mp4就是带声音的完整视频了。如果你想让音乐淡入淡出可以加afade滤镜ffmpeg -i output.mp4 -i bgm.mp3 -c:v copy -c:a aac -af afadetin:st0:d2,afadetout:st8:d2 -shortest final.mp4afadetin:st0:d2表示从第 0 秒开始用 2 秒淡入afadetout:st8:d2表示从第 8 秒开始用 2 秒淡出。这个细节能让视频看起来专业不少。5. 常见问题与排查技巧实录5.1 导出的视频在手机上黑屏这是最经典的问题原因几乎都是像素格式不对。H.264 编码的视频如果像素格式是yuv444p或yuvj420p很多手机播放器不支持。解决办法就是加-pix_fmt yuv420p。如果你已经生成了视频可以用下面这条命令重新编码ffmpeg -i input.mp4 -c:v libx264 -pix_fmt yuv420p -crf 18 output.mp45.2 帧序列命名不对导致 FFmpeg 报错FFmpeg 对图片序列的命名有严格要求必须是连续的编号比如frame_0001.png、frame_0002.png。如果你导出的是frame_1.png、frame_2.pngFFmpeg 会找不到文件。解决办法是用padStart补零或者在 FFmpeg 命令里用-start_number指定起始编号。我一般统一用四位补零从0000开始这样最省心。5.3 导出速度太慢怎么办逐帧截图确实慢尤其是 1080p 分辨率。我的优化经验是第一把 Puppeteer 的screenshot改成canvas.toDataURL然后在 Node.js 里写文件能快不少第二用page.evaluate一次性导出多帧的数据减少通信次数第三如果只是预览把分辨率降到 640x360速度会快好几倍。正式导出再切回高分辨率。5.4 动画看起来不流畅如果帧率是 30但动画看起来还是一顿一顿的可能是绘制逻辑里用了整数运算导致位置变化不连续。解决办法是把位置计算改成浮点数Canvas 会自动做抗锯齿。另外避免在每一帧里重新创建对象或加载图片这些操作很耗时会导致帧率波动。5.5 常见问题速查表问题现象可能原因解决办法手机黑屏像素格式不对加-pix_fmt yuv420pFFmpeg 找不到图片命名不连续用四位补零命名视频速度不对帧率不匹配检查-framerate和导出 fps导出卡死帧数太多分批导出或降低分辨率画面颜色偏暗色彩空间问题加-vf scaleout_color_matrixbt709音频视频不同步时长不一致加-shortest6. 一些实操心得和扩展思路6.1 提示词怎么写才能让模型输出可用的代码如果你想让模型帮你写渲染代码提示词里最好包含这几个要素画布尺寸、帧率、总时长、动画元素、运动方式、配色方案。比如“用 Canvas 写一个 1280x720 的动画30 帧每秒总长 10 秒画面中间有一个红色圆球从左到右匀速移动背景深蓝色左上角有白色文字。”这样模型输出的代码基本能直接跑。如果你只说“做个视频”它可能会给你一堆伪代码或者不完整的片段。6.2 用数据驱动画面变化Canvas 做视频的一个强大之处是你可以把数据映射成视觉元素。比如你有一组销售数据可以让柱状图的高度随时间增长或者你有一组地理位置可以让点在地图上依次亮起。这种“数据可视化视频”在汇报和传播中非常有用。模型可以帮你写数据映射的逻辑你只需要提供数据格式。6.3 批量生成的思路如果你需要生成很多条类似的视频比如每天一条数据播报可以把整个流程脚本化用 Node.js 读取数据生成对应的 Canvas 页面用 Puppeteer 导出帧再调 FFmpeg 合成。模型可以帮你写这个脚本的骨架你只需要替换数据源和模板。这样一套流程跑通之后每天的视频生成就是一条命令的事。6.4 关于“模型直接生成视频”的边界最后说一点我的观察。目前让模型直接输出视频帧序列在短片段、低分辨率、简单画面上是可行的但一旦涉及复杂场景、长时长、高分辨率质量和稳定性都会明显下降。而“模型写代码 Canvas 渲染 FFmpeg 合成”这条路虽然多了一步但可控性和可复现性都强得多。我个人在实际操作中的体会是把模型当成一个“会写渲染代码的助手”而不是“会画视频的画家”整个流程会顺畅很多。你得到的不仅是一段视频还有一套可以反复修改、反复运行的代码这才是最有价值的部分。