Remotion 动态元数据实战用 calculateMetadata 在 OpenMontage 中按素材自适应时长、分辨率与 Props【免费下载链接】OpenMontageWorlds first open-source, agentic video production system. 12 production pipelines, 100 tools, 700 agent skill and production-knowledge files. Turn your AI coding assistant into a full video production studio.项目地址: https://gitcode.com/GitHub_Trending/op/OpenMontage导读calculateMetadata是 Remotion 中挂在Composition上的一个可选回调它允许在渲染真正开始之前基于运行时才能拿到的信息如外部视频的时长、分辨率、接口数据动态改写组合的时长、尺寸、帧率与 Props。本文以 OpenMontage 仓库中内置的 calculate-metadata 规则文档 为核心骨架结合仓库内 remotion-composer 的Root.tsx、TitledVideo.tsx、CinematicRenderer.tsx等真实实现讲解它的注册方式、典型场景、返回值字段以及生产级容错写法。读完你可以让同一份 Composition 智能适配任意来源的素材避免硬编码时长造成的裁切、黑帧或空白尾部。1. 什么是 calculateMetadata渲染前的“数据闸门”在 Remotion 里一个 Composition 的时长、宽高、fps 与 props 通常是在注册时以静态值写死的Composition idMyComp component{MyComponent} durationInFrames{300} fps{30} width{1920} height{1080} defaultProps{{ videoSrc: https://remotion.media/video.mp4 }} /问题在于素材是运行时才确定的。如果拿到一段 25 秒的视频而组合固定只有 300 帧30fps 下为 10 秒渲染结果必然被截断反过来则会出现大片静止的黑尾。calculateMetadata就是为解决这类问题设计的“数据闸门”。把它挂到Composition上之后Remotion 在渲染/预览前会先调用它用其返回值覆盖组合上对应字段Composition idMyComp component{MyComponent} durationInFrames{300} fps{30} width{1920} height{1080} defaultProps{{ videoSrc: https://remotion.media/video.mp4 }} calculateMetadata{calculateMetadata} /OpenMontage 的 remotion-composer/src/Root.tsx 里几乎每个数据驱动的组合都注册了该回调例如Explainer、CinematicRenderer、SignalFromTomorrowWithMusic、TitledVideo四个Composition均传入各自独立的 metadata 计算函数见 Root.tsx。这种“每个组合自带一套动态规则”的写法正是把一段 React 模板变成可被上层视频流水线驱动引擎的前提。2. 场景一根据单个视频的时长决定组合时长最典型的用法是“视频有多长组合就有多长”。此时需要先用媒体探测工具拿到源视频的秒数。在 OpenMontage 的 best-practices 技能集中配套规则文件 rules/get-video-duration.md 给出了基于 Mediabunny 的封装InputALL_FORMATSUrlSource再调用input.computeDuration()返回秒数。基于它即可编写 metadata 函数import { CalculateMetadataFunction } from remotion; import { getVideoDuration } from ./get-video-duration; const calculateMetadata: CalculateMetadataFunctionProps async ({ props, }) { const durationInSeconds await getVideoDuration(props.videoSrc); return { durationInFrames: Math.ceil(durationInSeconds * 30), }; };关键点durationInSeconds是浮点秒数例如10.5需要乘以 fps 并向上取整Math.ceil保证最后一帧不会因为小数截断而被吃掉这里的getVideoDuration是对 Mediabunny 的二次封装具体实现见规则文件并非 Remotion 内置 API若视频文件位于public/目录源路径需用 Remotion 的staticFile()包装例如getVideoDuration(staticFile(video.mp4))在浏览器环境之外Node.js / Bun / 渲染端将UrlSource换成FileSource即可读取本地File对象。仓库中真实的同类实现可对比 remotion-composer/src/TitledVideo.tsxexport const calculateTitledVideoMetadata: CalculateMetadataFunction TitledVideoProps async ({ props }) { try { const meta await getVideoMetadata(resolveAsset(props.videoSrc)); return { durationInFrames: Math.max(1, Math.round(meta.durationInSeconds * 30)), fps: 30, width: 1920, height: 1080, }; } catch { return { durationInFrames: 30 * 60, fps: 30, width: 1920, height: 1080, }; } };这段代码体现了两个生产实践其一用Math.roundMath.max(1, ...)兜底确保组合至少存在一帧其二用 try/catch 提供回退方案——一旦探测失败则回落到 60 秒 × 30fps 的默认时长而不是让整个渲染直接抛错。3. 场景二让组合分辨率与视频完全一致横向/竖屏、4K/1080P 混用的素材库中组合分辨率必须跟着素材走。借助配套的 rules/get-video-dimensions.md 拿到主视频轨的displayWidth/displayHeight然后写回组合import { CalculateMetadataFunction } from remotion; import { getVideoDuration } from ./get-video-duration; import { getVideoDimensions } from ./get-video-dimensions; const calculateMetadata: CalculateMetadataFunctionProps async ({ props, }) { const dimensions await getVideoDimensions(props.videoSrc); return { width: dimensions.width, height: dimensions.height, }; };对应的 Mediabunny 封装要点见规则文件通过input.getPrimaryVideoTrack()取出主视频轨读取videoTrack.displayWidth与videoTrack.displayHeight若不存在视频轨封装内会显式throw new Error(No video track found)此时应让外层 metadata 函数做异常兜底。需要注意返回width/height而不返回fps、durationInFrames时其余字段仍保持Composition上的静态声明值——返回对象里未声明的字段不会被重置这让“只改尺寸、保留固定时长”的组合成为可能。4. 场景三根据多个视频的时长叠加求总长剪辑类组合多段 B-roll 拼接、逐场景串联需要把若干段素材的时长求和得到整条时间线长度。此时应并发探测而非串行 awaitconst calculateMetadata: CalculateMetadataFunctionProps async ({ props, }) { const metadataPromises props.videos.map((video) getVideoDuration(video.src), ); const allMetadata await Promise.all(metadataPromises); const totalDuration allMetadata.reduce( (sum, durationInSeconds) sum durationInSeconds, 0, ); return { durationInFrames: Math.ceil(totalDuration * 30), }; };OpenMontage 的 remotion-composer/src/CinematicRenderer.tsx 是“多段素材叠加”的另一套实现——它不是把场景拼接成总长而是取所有场景结束点的最大值作为总时长export const calculateCinematicMetadata: CalculateMetadataFunctionCinematicRendererProps async ({ props }) { const totalSeconds props.scenes.length 0 ? 30 : Math.max( ...props.scenes.map((scene) scene.startSeconds scene.durationSeconds), ); return { durationInFrames: Math.max(1, Math.ceil(totalSeconds * FPS)), fps: FPS, width: 1920, height: 1080, }; };当多个场景在时间线上存在重叠或并行如旁白与画面场景并行推进时“取最大 end 值”远比“求和”准确配合Math.max(1, ...)防止空场景导致 0 帧组合。Root.tsx 中Explainer的 metadata 则展示了另一种常见修正以最后一个镜头的out_seconds为基准额外追加 1 秒余量用于最终淡出避免结尾转场被硬切const calculateMetadata: CalculateMetadataFunctionExplainerProps async ({ props, }) { const cuts props.cuts || []; if (cuts.length 0) { return { durationInFrames: 30 * 60 }; } const lastEnd Math.max(...cuts.map((c) c.out_seconds || 0)); // Add 1 second padding for final fade return { durationInFrames: Math.ceil((lastEnd 1) * 30) }; };这印证了一个普适规律凡是依赖时间线的 metadata 计算都应显式考虑“空数据兜底”和“尾部淡出/转场余量”否则要么空组合崩溃要么结尾动画被截断。5. 场景四通过 props 生成默认输出文件名渲染产物如宣传片、字幕版、竖屏版往往需要在 props 中携带标识据此生成默认文件名避免手工改名const calculateMetadata: CalculateMetadataFunctionProps async ({ props, }) { return { defaultOutName: video-${props.id}.mp4, }; };该字段会被渲染 CLI 采纳为输出文件的默认名仍可通过命令行参数覆盖适合在流水线里按id、locale、variant等维度自动归档产物减少“渲染完再批量改名”的胶水脚本。6. 场景五渲染前拉取数据并改写 PropscalculateMetadata不仅改时长和尺寸还能改写组件最终收到的 props——这相当于给 Composition 增加了一个“预取数据层”。以接口拉取为例const calculateMetadata: CalculateMetadataFunctionProps async ({ props, abortSignal, }) { const response await fetch(props.dataUrl, { signal: abortSignal }); const data await response.json(); return { props: { ...props, fetchedData: data, }, }; };两点须知返回对象中的props会整体替换原有 props因此通常用展开运算符...props保留原字段再追加新字段解构出的abortSignal用于取消过期请求在 Studio 中当 props 变化导致 metadata 被重新求值时上一次尚未完成的fetch会随abortSignal被中止避免陈旧响应覆盖新状态、避免无效网络开销。这条规则与 Remotion 组件设计中“纯组件只管根据 props 渲染、副作用收敛到 metadata/数据层”的思路一致可在 rules/compositions.mddefault props 与动态元数据中看到更多配套约定。7. 返回值字段清单与覆盖语义calculateMetadata返回对象中所有字段均为可选返回的字段会覆盖Composition上对应的声明值返回字段含义覆盖目标durationInFrames总帧数组合的durationInFrameswidth画布宽度像素组合的widthheight画布高度像素组合的heightfps帧率组合的fpsprops传递给组件的新 propsdefaultProps以及渲染时传入的 propsdefaultOutName默认输出文件名渲染 CLI 的默认输出名defaultCodec默认编码器渲染 CLI 的默认编码未出现的字段保持原值不变因此你可以拆分出多个职责单一的 metadata 函数一个只算时长、一个只算尺寸再分别用于不同的Composition正如 Root.tsx 中Explainer/CinematicRenderer/TitledVideo各挂各的回调函数那样注册列表见 Root.tsx。8. 生产实践小结综合 calculate-metadata 规则文档 与 OpenMontage 的 remotion-composer 实际代码可沉淀出以下四条可复用经验秒转帧务必乘 fps 后向上/就近取整视频探测结果多为浮点秒Math.ceil(seconds * fps)或Math.round(...)后用Math.max(1, ...)兜底防止 0 帧或丢尾帧探测与网络操作必须容错源文件缺失、网络异常、无视频轨等都要有 try/catch 回退如 TitledVideo.tsx 回退到 60 秒metadata 阶段抛错会导致整个渲染链路失败时间线型组合显式处理空数据与尾部余量空 cuts/scenes 回退到固定时长多场景并行时取最大结束点而非求和结尾有转场时预留 1 秒 padding对照 Root.tsx 与 CinematicRenderer.tsxStudio 场景善用abortSignalprops 变化引发的重算中用它取消过期请求避免陈旧数据污染画面。要彻底掌握这套能力建议沿着仓库内的技能索引继续阅读remotion-best-practices SKILL.md总览与规则清单、get-video-duration 规则、get-video-dimensions 规则以及面向创作者场景的 skills/core/remotion.md再对照remotion-composer/src下的注册与渲染代码做实际改造验证。【免费下载链接】OpenMontageWorlds first open-source, agentic video production system. 12 production pipelines, 100 tools, 700 agent skill and production-knowledge files. Turn your AI coding assistant into a full video production studio.项目地址: https://gitcode.com/GitHub_Trending/op/OpenMontage创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Remotion 动态元数据实战用 calculateMetadata 在 OpenMontage 中按素材自适应时长、分辨率与 Props【免费下载链接】OpenMontageWorlds first open-source, agentic video production system. 12 production pipelines, 100 tools, 700 agent skill and production-knowledge files. Turn your AI coding assistant into a full video production studio.项目地址: https://gitcode.com/GitHub_Trending/op/OpenMontage导读calculateMetadata是 Remotion 中挂在Composition上的一个可选回调它允许在渲染真正开始之前基于运行时才能拿到的信息如外部视频的时长、分辨率、接口数据动态改写组合的时长、尺寸、帧率与 Props。本文以 OpenMontage 仓库中内置的 calculate-metadata 规则文档 为核心骨架结合仓库内 remotion-composer 的Root.tsx、TitledVideo.tsx、CinematicRenderer.tsx等真实实现讲解它的注册方式、典型场景、返回值字段以及生产级容错写法。读完你可以让同一份 Composition 智能适配任意来源的素材避免硬编码时长造成的裁切、黑帧或空白尾部。1. 什么是 calculateMetadata渲染前的“数据闸门”在 Remotion 里一个 Composition 的时长、宽高、fps 与 props 通常是在注册时以静态值写死的Composition idMyComp component{MyComponent} durationInFrames{300} fps{30} width{1920} height{1080} defaultProps{{ videoSrc: https://remotion.media/video.mp4 }} /问题在于素材是运行时才确定的。如果拿到一段 25 秒的视频而组合固定只有 300 帧30fps 下为 10 秒渲染结果必然被截断反过来则会出现大片静止的黑尾。calculateMetadata就是为解决这类问题设计的“数据闸门”。把它挂到Composition上之后Remotion 在渲染/预览前会先调用它用其返回值覆盖组合上对应字段Composition idMyComp component{MyComponent} durationInFrames{300} fps{30} width{1920} height{1080} defaultProps{{ videoSrc: https://remotion.media/video.mp4 }} calculateMetadata{calculateMetadata} /OpenMontage 的 remotion-composer/src/Root.tsx 里几乎每个数据驱动的组合都注册了该回调例如Explainer、CinematicRenderer、SignalFromTomorrowWithMusic、TitledVideo四个Composition均传入各自独立的 metadata 计算函数见 Root.tsx。这种“每个组合自带一套动态规则”的写法正是把一段 React 模板变成可被上层视频流水线驱动引擎的前提。2. 场景一根据单个视频的时长决定组合时长最典型的用法是“视频有多长组合就有多长”。此时需要先用媒体探测工具拿到源视频的秒数。在 OpenMontage 的 best-practices 技能集中配套规则文件 rules/get-video-duration.md 给出了基于 Mediabunny 的封装InputALL_FORMATSUrlSource再调用input.computeDuration()返回秒数。基于它即可编写 metadata 函数import { CalculateMetadataFunction } from remotion; import { getVideoDuration } from ./get-video-duration; const calculateMetadata: CalculateMetadataFunctionProps async ({ props, }) { const durationInSeconds await getVideoDuration(props.videoSrc); return { durationInFrames: Math.ceil(durationInSeconds * 30), }; };关键点durationInSeconds是浮点秒数例如10.5需要乘以 fps 并向上取整Math.ceil保证最后一帧不会因为小数截断而被吃掉这里的getVideoDuration是对 Mediabunny 的二次封装具体实现见规则文件并非 Remotion 内置 API若视频文件位于public/目录源路径需用 Remotion 的staticFile()包装例如getVideoDuration(staticFile(video.mp4))在浏览器环境之外Node.js / Bun / 渲染端将UrlSource换成FileSource即可读取本地File对象。仓库中真实的同类实现可对比 remotion-composer/src/TitledVideo.tsxexport const calculateTitledVideoMetadata: CalculateMetadataFunction TitledVideoProps async ({ props }) { try { const meta await getVideoMetadata(resolveAsset(props.videoSrc)); return { durationInFrames: Math.max(1, Math.round(meta.durationInSeconds * 30)), fps: 30, width: 1920, height: 1080, }; } catch { return { durationInFrames: 30 * 60, fps: 30, width: 1920, height: 1080, }; } };这段代码体现了两个生产实践其一用Math.roundMath.max(1, ...)兜底确保组合至少存在一帧其二用 try/catch 提供回退方案——一旦探测失败则回落到 60 秒 × 30fps 的默认时长而不是让整个渲染直接抛错。3. 场景二让组合分辨率与视频完全一致横向/竖屏、4K/1080P 混用的素材库中组合分辨率必须跟着素材走。借助配套的 rules/get-video-dimensions.md 拿到主视频轨的displayWidth/displayHeight然后写回组合import { CalculateMetadataFunction } from remotion; import { getVideoDuration } from ./get-video-duration; import { getVideoDimensions } from ./get-video-dimensions; const calculateMetadata: CalculateMetadataFunctionProps async ({ props, }) { const dimensions await getVideoDimensions(props.videoSrc); return { width: dimensions.width, height: dimensions.height, }; };对应的 Mediabunny 封装要点见规则文件通过input.getPrimaryVideoTrack()取出主视频轨读取videoTrack.displayWidth与videoTrack.displayHeight若不存在视频轨封装内会显式throw new Error(No video track found)此时应让外层 metadata 函数做异常兜底。需要注意返回width/height而不返回fps、durationInFrames时其余字段仍保持Composition上的静态声明值——返回对象里未声明的字段不会被重置这让“只改尺寸、保留固定时长”的组合成为可能。4. 场景三根据多个视频的时长叠加求总长剪辑类组合多段 B-roll 拼接、逐场景串联需要把若干段素材的时长求和得到整条时间线长度。此时应并发探测而非串行 awaitconst calculateMetadata: CalculateMetadataFunctionProps async ({ props, }) { const metadataPromises props.videos.map((video) getVideoDuration(video.src), ); const allMetadata await Promise.all(metadataPromises); const totalDuration allMetadata.reduce( (sum, durationInSeconds) sum durationInSeconds, 0, ); return { durationInFrames: Math.ceil(totalDuration * 30), }; };OpenMontage 的 remotion-composer/src/CinematicRenderer.tsx 是“多段素材叠加”的另一套实现——它不是把场景拼接成总长而是取所有场景结束点的最大值作为总时长export const calculateCinematicMetadata: CalculateMetadataFunctionCinematicRendererProps async ({ props }) { const totalSeconds props.scenes.length 0 ? 30 : Math.max( ...props.scenes.map((scene) scene.startSeconds scene.durationSeconds), ); return { durationInFrames: Math.max(1, Math.ceil(totalSeconds * FPS)), fps: FPS, width: 1920, height: 1080, }; };当多个场景在时间线上存在重叠或并行如旁白与画面场景并行推进时“取最大 end 值”远比“求和”准确配合Math.max(1, ...)防止空场景导致 0 帧组合。Root.tsx 中Explainer的 metadata 则展示了另一种常见修正以最后一个镜头的out_seconds为基准额外追加 1 秒余量用于最终淡出避免结尾转场被硬切const calculateMetadata: CalculateMetadataFunctionExplainerProps async ({ props, }) { const cuts props.cuts || []; if (cuts.length 0) { return { durationInFrames: 30 * 60 }; } const lastEnd Math.max(...cuts.map((c) c.out_seconds || 0)); // Add 1 second padding for final fade return { durationInFrames: Math.ceil((lastEnd 1) * 30) }; };这印证了一个普适规律凡是依赖时间线的 metadata 计算都应显式考虑“空数据兜底”和“尾部淡出/转场余量”否则要么空组合崩溃要么结尾动画被截断。5. 场景四通过 props 生成默认输出文件名渲染产物如宣传片、字幕版、竖屏版往往需要在 props 中携带标识据此生成默认文件名避免手工改名const calculateMetadata: CalculateMetadataFunctionProps async ({ props, }) { return { defaultOutName: video-${props.id}.mp4, }; };该字段会被渲染 CLI 采纳为输出文件的默认名仍可通过命令行参数覆盖适合在流水线里按id、locale、variant等维度自动归档产物减少“渲染完再批量改名”的胶水脚本。6. 场景五渲染前拉取数据并改写 PropscalculateMetadata不仅改时长和尺寸还能改写组件最终收到的 props——这相当于给 Composition 增加了一个“预取数据层”。以接口拉取为例const calculateMetadata: CalculateMetadataFunctionProps async ({ props, abortSignal, }) { const response await fetch(props.dataUrl, { signal: abortSignal }); const data await response.json(); return { props: { ...props, fetchedData: data, }, }; };两点须知返回对象中的props会整体替换原有 props因此通常用展开运算符...props保留原字段再追加新字段解构出的abortSignal用于取消过期请求在 Studio 中当 props 变化导致 metadata 被重新求值时上一次尚未完成的fetch会随abortSignal被中止避免陈旧响应覆盖新状态、避免无效网络开销。这条规则与 Remotion 组件设计中“纯组件只管根据 props 渲染、副作用收敛到 metadata/数据层”的思路一致可在 rules/compositions.mddefault props 与动态元数据中看到更多配套约定。7. 返回值字段清单与覆盖语义calculateMetadata返回对象中所有字段均为可选返回的字段会覆盖Composition上对应的声明值返回字段含义覆盖目标durationInFrames总帧数组合的durationInFrameswidth画布宽度像素组合的widthheight画布高度像素组合的heightfps帧率组合的fpsprops传递给组件的新 propsdefaultProps以及渲染时传入的 propsdefaultOutName默认输出文件名渲染 CLI 的默认输出名defaultCodec默认编码器渲染 CLI 的默认编码未出现的字段保持原值不变因此你可以拆分出多个职责单一的 metadata 函数一个只算时长、一个只算尺寸再分别用于不同的Composition正如 Root.tsx 中Explainer/CinematicRenderer/TitledVideo各挂各的回调函数那样注册列表见 Root.tsx。8. 生产实践小结综合 calculate-metadata 规则文档 与 OpenMontage 的 remotion-composer 实际代码可沉淀出以下四条可复用经验秒转帧务必乘 fps 后向上/就近取整视频探测结果多为浮点秒Math.ceil(seconds * fps)或Math.round(...)后用Math.max(1, ...)兜底防止 0 帧或丢尾帧探测与网络操作必须容错源文件缺失、网络异常、无视频轨等都要有 try/catch 回退如 TitledVideo.tsx 回退到 60 秒metadata 阶段抛错会导致整个渲染链路失败时间线型组合显式处理空数据与尾部余量空 cuts/scenes 回退到固定时长多场景并行时取最大结束点而非求和结尾有转场时预留 1 秒 padding对照 Root.tsx 与 CinematicRenderer.tsxStudio 场景善用abortSignalprops 变化引发的重算中用它取消过期请求避免陈旧数据污染画面。要彻底掌握这套能力建议沿着仓库内的技能索引继续阅读remotion-best-practices SKILL.md总览与规则清单、get-video-duration 规则、get-video-dimensions 规则以及面向创作者场景的 skills/core/remotion.md再对照remotion-composer/src下的注册与渲染代码做实际改造验证。【免费下载链接】OpenMontageWorlds first open-source, agentic video production system. 12 production pipelines, 100 tools, 700 agent skill and production-knowledge files. Turn your AI coding assistant into a full video production studio.项目地址: https://gitcode.com/GitHub_Trending/op/OpenMontage创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
