Welcome to your Remotion project!
代码结构:见 docs/代码结构说明.md。协议 v0.1(tracks + videoClip/captionBox/audioClip):见 docs/MarketingVideo-JSON协议.md(若已更新为 v0.1)。
Install Dependencies
npm iStart Preview
npm run dev在浏览器中打开后,在左侧列表选择:
- 示例 → ProtocolVideo:多轨道示例,协议
public/neo-protocol-v1.json - 示例 → ShortStyle:流行短视频风格(15s、高冲击力节奏),协议
public/neo-short-style.json - 示例 → TikTokStyle:TikTok/OpusClip 风格(18s、强钩子+动效字幕+CTA),协议
public/neo-tiktok-style.json - 示例 → NYCNight:纽约夜景旅游宣传(25s、A/B-roll + 挂件标签 + 故事线),协议
public/neo-nyc-night.json - 示例 → SplitScreen:前 5 秒上下分屏(上 test1、下 test2)+ 居中白字黑边字幕,后 15 秒三支视频依次全屏,协议
public/neo-split-screen.json
若希望时间轴里的视频轨道显示为橙色:Studio 默认不提供该配置,可用浏览器扩展(如 Stylus)在打开 Studio 的页面注入 public/studio-video-track-orange.css,或按该文件内说明用开发者工具注入样式。
Render video
渲染默认合成(ProtocolVideo):
npx remotion render渲染流行短视频风格(ShortStyle,输出 15s 竖屏):
npx remotion render ShortStyle out/short-style.mp4或使用项目脚本(需先 npm run build,或使用带 --build 的脚本):
npm run render:short
# 或:先打包再渲染
npm run build:and:render
# 或:自定义合成与输出路径
node scripts/render.mjs ProtocolVideo out/my.mp4
node scripts/render.mjs --build ShortStyle
node scripts/render.mjs NYCNight out/nyc-night.mp4Upgrade Remotion
npx remotion upgrade1. 打生产包(Bundle)
npm run build等价于 npx remotion bundle,会在项目根目录生成 build/ 目录(可通过 --out-dir 指定其他目录)。该 bundle 包含 Remotion Studio 与所有合成,可作为「Serve URL」用于远程渲染或部署为静态站点。
2. 本地用 bundle 渲染(不依赖源码)
npx remotion render ShortStyle out/short.mp4 --serve build/使用已打好的 build/ 作为 serve URL,无需再跑 Studio。
3. 部署为静态站点(在线预览 Studio)
将 build/ 部署到任意静态托管即可在浏览器中打开 Remotion Studio:
| 平台 | 构建命令 | 发布目录 |
|---|---|---|
| Vercel | npm run build 或 npx remotion bundle |
build |
| Netlify | npm run build |
发布目录设为 build |
| GitHub Pages | 在 CI 中执行 npm run build,把 build/ 推到 gh-pages 或 Actions 的 artifact |
部署后访问站点根路径即可使用 Studio 预览与渲染(协议 JSON 需在 public/ 内,会一并打进 bundle)。
4. 用 Remotion Lambda 云端渲染
Bundle 可上传到 AWS Lambda,用 Remotion 的 Lambda 方案 按需渲染,此处不展开。
Get started with Remotion by reading the fundamentals page.
We provide help on our Discord server.
Found an issue with Remotion? File an issue here.
Note that for some entities a company license is needed. Read the terms here.