JSON 转视频工具 - 使用 Remotion 渲染器将 JSON 时间线规范转换为动态视频
json-render-remotion by vercel-labs/json-render
安装命令
npx skills add https://github.com/vercel-labs/json-render --skill json-render-remotion🇨🇳中文介绍
@json-render/remotion
将 JSON 时间线规范转换为视频合成的 Remotion 渲染器。
快速开始
import { Player } from "@remotion/player";
import { Renderer, type TimelineSpec } from "@json-render/remotion";
function VideoPlayer({ spec }: { spec: TimelineSpec }) {
return (
<Player
component={Renderer}
inputProps={{ spec }}
durationInFrames={spec.composition.durationInFrames}
fps={spec.composition.fps}
compositionWidth={spec.composition.width}
compositionHeight={spec.composition.height}
controls
/>
);
}
使用标准组件
import { defineCatalog } from "@json-render/core";
import {
schema,
standardComponentDefinitions,
standardTransitionDefinitions,
standardEffectDefinitions,
} from "@json-render/remotion";
export const videoCatalog = defineCatalog(schema, {
components: standardComponentDefinitions,
transitions: standardTransitionDefinitions,
effects: standardEffectDefinitions,
});
添加自定义组件
import { z } from "zod";
const catalog = defineCatalog(schema, {
components: {
...standardComponentDefinitions,
MyCustomClip: {
props: z.object({ text: z.string() }),
type: "scene",
defaultDuration: 90,
description: "My custom video clip",
},
},
});
// 将自定义组件传递给 Renderer
<Player
component={Renderer}
inputProps={{
spec,
components: { MyCustomClip: MyCustomComponent },
}}
/>
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者，精准高效
