Skip to content

cgeffect/remotion-render

Repository files navigation

Remotion video

Animated Remotion Logo

Welcome to your Remotion project!

代码结构:见 docs/代码结构说明.md协议 v0.1(tracks + videoClip/captionBox/audioClip):见 docs/MarketingVideo-JSON协议.md(若已更新为 v0.1)。

Commands

Install Dependencies

npm i

Start 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.mp4

Upgrade Remotion

npx remotion upgrade

打包与部署

1. 打生产包(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 buildnpx 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 方案 按需渲染,此处不展开。

Docs

Get started with Remotion by reading the fundamentals page.

Help

We provide help on our Discord server.

Issues

Found an issue with Remotion? File an issue here.

License

Note that for some entities a company license is needed. Read the terms here.

About

使用remotion实现的视频渲染

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors