Web-Remotion

用代码描述视频。

资源

正文

命令行下:

shell
npx create-video@latest --yes --blank my-video
cd my-video
npm i

开跑:

shell
npm run dev
webp

像视频剪辑工具一样的页面,但是几乎没有任何可编辑的 UI。因为这个视频是由代码控制的,便于使用自然语言教训 AI 来渲染视频。

安装 Skill:

shell
npx remotion skills add # 将 remotion 的 skill 安装至项目目录中
webp

让它操作一下 上网查找中国人口近 10 年变化数据,将数据用 remotion 可视化

webp

得到用 src/populationData.ts 表示的数据和用 src/ChinaPopulation.tsx 表示的视频。

my-video/src
populationData.ts
ChinaPopulation.tsx
webp

这个视频可选择导出成 .mp4

webp

由于这个视频(ChinaPopulation.tsx)是 React 语法,因此这个视频可直接渲染在支持 React 的网页上:

网页中要安装 ``:

shell
npm install remotion @remotion/player

写一个播放器组件:

my-video/src
RemotionPlayer.tsx

开始渲染!

tsx
<RemotionPlayer component="ChinaPopulation" />
Loading animation…