Communitygithub.com

kuzeyozel-1/remotion-video-pipeline

使用 Remotion 从原始手机/摄像机素材制作短视频广告(竖屏 9:16 动态贴片、横屏 16:9 网页短片),包括代理生成、接触表选片、品牌主题设置以及避免耗时的渲染陷阱(土耳其语大写、ffmpeg stdin、HEVC 输出、缺少 drawtext)。当用户说“制作宣传视频”、“从这段素材制作动态贴片”、“Remotion”、“tanıtım videosu”、“kısa video render”或需要基于代码的文本/品牌叠加时使用。

remotion-video-pipeline 是什么?

这是一个基于 Remotion 的视频流水线技能,专为从原始手机或摄像机素材快速生成短片宣传视频(竖屏 9:16 短视频、横屏 16:9 网页广告)而设计。其核心流程包括素材清单、代理文件生成(1080p、30fps、全内帧 H.264)、接触表选帧、在 Remotion 模板中合成(支持剪辑、渐变遮罩、动画文字),以及最终渲染输出。该技能详细记录了常见陷阱及其解决方案,例如土耳其语 CSS 大小写问题('İ' 变成 'I')、ffmpeg 循环中避免 stdin 被吞、Remotion 渲染时避免缺少 'drawtext' 滤镜、HEVC 手机素材旋转导致的黑边、以及前台渲染避免后台任务被取消等。它适用于代码驱动的文字/品牌叠加场景,并强调保持素材真实性,不虚构规格或价格。支持的平台包括 Claude Code、Cursor、Codex 等 AI 编码助手。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/kuzeyozel-1/vinci-skills/tree/main/skills/remotion-video-pipeline

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

Remotion 视频流水线

真实素材 + 代码绘制的文字排版 = 无拼写错误且可重复编辑的品牌视频。

流水线

  1. 盘点原始素材:scripts/inventory.sh <raw-dir> > index.tsv(id、路径、时长、分辨率)。
  2. 代理文件:scripts/make-proxies.sh index.tsv proxy/ 创建 1080 宽、30 fps、全内帧式 H.264(-g 15)且不带音频的副本。在代理文件上进行编辑和渲染;4K/HEVC 原始文件会使 Remotion 寻道缓慢,甚至导致 Chrome 崩溃。
  3. 通过查看而非猜测来选择片段:scripts/contact-sheet.sh proxy/v01.mp4 sheets/v01.jpg 每秒打印一帧到网格中。打开接触表,记下每个剪辑的起始秒数。
  4. 在 template/ 中合成(复制它):Footage(修剪、缩放后的素材)、Scrim(用于文字易读性的渐变遮罩)、Line(动画文字)。每个输出一个合成(例如 Main 30 秒、Teaser 9 秒、Spot16x9 20 秒)。
  5. 渲染:npx remotion render <CompositionId> out/<name>.mp4。配置已设置 H.264、CRF 17、yuv420p。
  6. 验证:提取 3 帧静帧(ffmpeg -ss 5 -i out.mp4 -frames:v 1 still.png)并检查;检查时长以及音频策略(静音或音乐)是否符合客户预期。

陷阱(每个都浪费过实际时间)

  • 在根元素上设置 lang="tr"(或正确的语言);否则 CSS text-transform: uppercase 会将土耳其语的 i 变为 I(MAKINASI、TEKLIF)。最好在字符串中直接键入最终的大小写形式。
  • while read 循环内部的 ffmpeg 会吞掉 stdin:始终传递 -nostdin。
  • zsh 的分词方式与 bash 不同:set -- $p 和 $2:s 会出错。请使用 #!/usr/bin/env bash 编写脚本。
  • 许多 ffmpeg 版本没有 drawtext。在 Remotion 中绘制文字,绝不在 ffmpeg 中绘制。
  • 基于 HTML 的渲染器(例如 Hyperframes)可能会在场景之间留下“暗淡”的叠加图层;同时使用显式的透明度动画来淡入淡出场景。将这些渲染放在前台运行(后台 nohup 运行会被取消),并使用 ffmpeg -i in.mp4 -c:v libx264 -crf 18 -pix_fmt yuv420p out.mp4 转换 HEVC 输出。
  • 手机素材旋转:检查 ffprobe 的旋转标签;竖屏素材放在横屏合成中需要 objectFit: cover 加上显式的裁切。
  • 只展示素材中实际出现的内容。不要在屏幕文字中虚构规格、容量或价格。
  • 将客户文件排除在你发布的仓库之外;素材和徽标属于客户。

参见 references/checklist.md 获取交付清单。

相关技能