Remotion 媒体探测实战用 Mediabunny 获取音视频时长与画面尺寸【免费下载链接】remotion Make videos programmatically with React项目地址: https://gitcode.com/GitHub_Trending/re/remotion在 Remotion 项目中经常需要根据真实素材决定画面时长、帧数或布局音乐可视化视频要让durationInFrames与 MP3 的时长完全对齐用户上传的 MP4 则可能需要读取其宽度与高度来决定分辨率。本指南围绕 remotion-multimedia 技能文档 展开讲解如何借助Mediabunny一个可在浏览器、Node.js 与 Bun 中运行的多媒体库探测音频时长、视频时长与视频画面尺寸并给出可直接复用的 TypeScript 实现以及在 Remotion 组合中利用staticFile()与calculateMetadata()落地的完整方案。读完本文你将能写出在任何运行环境下都一致的媒体元数据探测代码。一、技能文档定位Agent 与开发者共用的 Mediabunny 速查入口remotion-multimedia是仓库中面向 AI Agent 与开发者的一份技能Skill文档其职责单一而明确如何在 Remotion 生态内与 Mediabunny 交互。主文档 SKILL.md 将其能力概括为“处理浏览器中音频与视频的多媒体库”并把任务收敛为三个可独立执行的子任务每个子任务都对应一份带完整代码的子文档子任务返回结果关联文档获取音频时长以秒为单位的numberget-audio-duration.md获取视频时长以秒为单位的numberget-video-duration.md获取视频宽高{ width, height }get-video-dimensions.md该技能还配置了供 Agent 使用的元信息在 agents/openai.yaml 中声明了display_name: /remotion-multimedia、short_description: Inspect browser-based audio and video media以及示例指令Make my video the same duration as the footage让视频与素材等时长这正对应了本技能最常见的落地场景。同一份技能在仓库内还有其他副本例如 codex-plugin 下的 remotion-multimedia内容与本目录保持一致。值得注意的是Mediabunny 在仓库中被真实依赖与使用根目录 package.json 的依赖目录中锁定版本为mediabunny: 1.55.5template-music-visualization/package.json、template-recorder、template-three 等模板也将其作为正式依赖。因此本文所有示例均对应仓库当前采用的 Mediabunny API。二、API 基石Input、Source与媒体轨道探测三个子任务在写法上高度一致均遵循同一套 Mediabunny 使用范式可归纳为三步构造Input传入source媒体来源与formats允许解析的容器格式选择来源类型URL 字符串用UrlSource本地File对象或 Node/Bun 文件系统用FileSource发起探测时长统一调用input.computeDuration()画面尺寸调用input.getPrimaryVideoTrack()后读取轨道上的displayWidth与displayHeight。几个关键概念的含义ALL_FORMATS允许 Mediabunny 尝试解析全部已支持的容器/流格式MP3、WAV、MP4、WebM 等用于不确定输入具体封装类型时是文档示例中的标准取值computeDuration()返回以秒为单位的时长类型为number如180.5表示 3 分 0.5 秒getPrimaryVideoTrack()返回主视频轨对象无视频轨时为null调用方需自行判空抛错displayWidth/displayHeight视频画面的显示尺寸像素例如1920×1080。从源码结构看三份子文档刻意把探测逻辑封装为独立的异步函数便于在 Remotion 的calculateMetadata、组件挂载或任意工具函数中复用。三、获取音频时长3.1 基础实现浏览器 / URL 来源子文档 get-audio-duration.md 给出的完整实现如下import { Input, ALL_FORMATS, UrlSource } from mediabunny; export const getAudioDuration async (src: string) { const input new Input({ formats: ALL_FORMATS, source: new UrlSource(src), }); const durationInSeconds await input.computeDuration(); return durationInSeconds; };调用示例const duration await getAudioDuration(https://remotion.media/audio.mp3); console.log(duration); // e.g. 180.5 (seconds)该函数接受任意可被浏览器以 URL 访问的音频地址远端 HTTPS 链接或页面内的public静态资源 URLcomputeDuration()内部会完成解析与时长计算调用方无需关心具体容器差异。3.2 在 Remotion 中使用staticFile()在 Remotion 项目中音频常放置在public/目录下。staticFile()负责把public/中的相对路径转换为可用的静态资源 URL因此传给探测函数前必须用它包裹路径否则文件无法被正确解析import { staticFile } from remotion; const duration await getAudioDuration(staticFile(audio.mp3));这是与 Remotion 文档约定 中staticFile(demo-track.mp3)完全一致的标准做法。3.3 Node.js 与 Bun 环境在 Node.js / Bun 中媒体来源不再是 URL而是本地文件此时改用FileSourceimport { Input, ALL_FORMATS, FileSource } from mediabunny; const input new Input({ formats: ALL_FORMATS, source: new FileSource(file), // File object from input or drag-drop });文档注释明确指出这里的file可以来自input typefile或拖拽产生的File对象——同一套Input抽象让浏览器端文件选择、拖放与 Node/Bun 文件系统访问共用同一份探测代码。四、获取视频时长4.1 基础实现视频时长与音频时长的代码结构完全相同见 get-video-duration.mdimport { Input, ALL_FORMATS, UrlSource } from mediabunny; export const getVideoDuration async (src: string) { const input new Input({ formats: ALL_FORMATS, source: new UrlSource(src), }); const durationInSeconds await input.computeDuration(); return durationInSeconds; };调用示例const duration await getVideoDuration(https://remotion.media/video.mp4); console.log(duration); // e.g. 10.5 (seconds)4.2 引用public/目录中的视频从public/目录取视频同样要包一层staticFile()import { staticFile } from remotion; const duration await getVideoDuration(staticFile(video.mp4));4.3 在 Node.js 与 Bun 中使用本地文件与音频一致本地文件场景将UrlSource替换为FileSource即可import { Input, ALL_FORMATS, FileSource } from mediabunny; const input new Input({ formats: ALL_FORMATS, source: new FileSource(file), // File object from input or drag-drop }); const durationInSeconds await input.computeDuration();五、获取视频画面尺寸5.1 基础实现与时长探测不同尺寸探测需要先取得主视频轨再读取显示尺寸见 get-video-dimensions.mdimport { Input, ALL_FORMATS, UrlSource } from mediabunny; export const getVideoDimensions async (src: string) { const input new Input({ formats: ALL_FORMATS, source: new UrlSource(src), }); const videoTrack await input.getPrimaryVideoTrack(); if (!videoTrack) { throw new Error(No video track found); } return { width: videoTrack.displayWidth, height: videoTrack.displayHeight, }; };调用示例const dimensions await getVideoDimensions(https://remotion.media/video.mp4); console.log(dimensions.width); // e.g. 1920 console.log(dimensions.height); // e.g. 1080实现要点在于getPrimaryVideoTrack()对无视频轨的输入例如把纯音频文件误当作视频会返回空值因此必须先判空并抛出明确错误再访问displayWidth/displayHeight避免对空对象取属性。5.2 使用本地文件import { Input, ALL_FORMATS, FileSource } from mediabunny; const input new Input({ formats: ALL_FORMATS, source: new FileSource(file), // File object from input or drag-drop }); const videoTrack await input.getPrimaryVideoTrack(); const width videoTrack.displayWidth; const height videoTrack.displayHeight;5.3 与staticFile()组合import { staticFile } from remotion; const dimensions await getVideoDimensions(staticFile(video.mp4));六、仓库内的真实落地让视频与音频素材等时长技能文档中的 API 并非纸上谈兵仓库内的 template-music-visualization 模板 就完整示范了“用 Mediabunny 探测音频时长、并据此动态决定 Remotion 合成时长”的典型用法模板在 package.json 中声明依赖mediabunny: 1.55.5并从mediabunny导入ALL_FORMATS, Input, UrlSourcedefaultProps中音频文件地址用staticFile(demo-track.mp3)表示与本文 3.2 的做法一致在calculateMetadata异步回调中构造Input、调用computeDuration()拿到秒级时长再换算成帧const FPS 30; calculateMetadata{async ({ props }) { const input new Input({ source: new UrlSource(props.audioFileUrl), formats: ALL_FORMATS, }); const durationInSeconds await input.computeDuration(); return { durationInFrames: Math.floor( (durationInSeconds - props.audioOffsetInSeconds) * FPS, ), fps: FPS, }; }}这段代码的价值在于印证了技能文档描述的真实工作流当素材时长未知时把“探测时长”放在calculateMetadata中执行合成时长durationInFrames便可跟随音频自动伸缩从而实现 openai.yaml 中那句示例指令Make my video the same duration as the footage。同理视频时长与尺寸探测也可以按此模式嵌入 Remotion 的元数据计算或渲染前预处理环节。七、跨环境差异与使用建议综合三份子文档与仓库实际用法可将使用要点总结为一张决策表场景使用来源类典型输入浏览器访问远程/静态 URLUrlSourcehttps://...、staticFile(a.mp3)返回的 URL浏览器本地选择文件FileSourceinput typefile或拖拽得到的FileNode.js / Bun 本地文件FileSource文件系统 / 上传得到的File对象配套建议时长与尺寸探测 API 正交computeDuration()对音频、视频一视同仁只有尺寸探测依赖getPrimaryVideoTrack()且必须处理“无视频轨”的错误分支ALL_FORMATS保证兼容性不确定输入封装类型时统一使用MP3、WAV、MP4、WebM 等均可尝试解析Remotion 内一律经staticFile()凡指向public/目录的素材先包staticFile()再交给探测函数与 Remotion 的资源解析约定保持一致在calculateMetadata中做探测需要依据素材决定合成时长或分辨率时应放在元数据计算阶段而非渲染阶段避免每帧重复解析。八、继续深入本文依据的完整原始材料均位于本仓库主技能文档 SKILL.md 与 Agent 配置 agents/openai.yaml三个带完整代码的子文档get-audio-duration.md、get-video-duration.md、get-video-dimensions.md同源副本codex-plugin 技能目录可运行示例template-music-visualization 的 Root.tsx 及其 package.json仓库根目录依赖目录 package.json锁定mediabunny版本 1.55.5。借助 Mediabunny 与这三段探测逻辑你可以在浏览器、Node.js、Bun 中写出完全一致的媒体信息读取代码并让 Remotion 合成真正“跟随素材”——这正是remotion-multimedia技能想交付的核心能力。【免费下载链接】remotion Make videos programmatically with React项目地址: https://gitcode.com/GitHub_Trending/re/remotion创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Remotion 媒体探测实战：用 Mediabunny 获取音视频时长与画面尺寸
Remotion 媒体探测实战用 Mediabunny 获取音视频时长与画面尺寸【免费下载链接】remotion Make videos programmatically with React项目地址: https://gitcode.com/GitHub_Trending/re/remotion在 Remotion 项目中经常需要根据真实素材决定画面时长、帧数或布局音乐可视化视频要让durationInFrames与 MP3 的时长完全对齐用户上传的 MP4 则可能需要读取其宽度与高度来决定分辨率。本指南围绕 remotion-multimedia 技能文档 展开讲解如何借助Mediabunny一个可在浏览器、Node.js 与 Bun 中运行的多媒体库探测音频时长、视频时长与视频画面尺寸并给出可直接复用的 TypeScript 实现以及在 Remotion 组合中利用staticFile()与calculateMetadata()落地的完整方案。读完本文你将能写出在任何运行环境下都一致的媒体元数据探测代码。一、技能文档定位Agent 与开发者共用的 Mediabunny 速查入口remotion-multimedia是仓库中面向 AI Agent 与开发者的一份技能Skill文档其职责单一而明确如何在 Remotion 生态内与 Mediabunny 交互。主文档 SKILL.md 将其能力概括为“处理浏览器中音频与视频的多媒体库”并把任务收敛为三个可独立执行的子任务每个子任务都对应一份带完整代码的子文档子任务返回结果关联文档获取音频时长以秒为单位的numberget-audio-duration.md获取视频时长以秒为单位的numberget-video-duration.md获取视频宽高{ width, height }get-video-dimensions.md该技能还配置了供 Agent 使用的元信息在 agents/openai.yaml 中声明了display_name: /remotion-multimedia、short_description: Inspect browser-based audio and video media以及示例指令Make my video the same duration as the footage让视频与素材等时长这正对应了本技能最常见的落地场景。同一份技能在仓库内还有其他副本例如 codex-plugin 下的 remotion-multimedia内容与本目录保持一致。值得注意的是Mediabunny 在仓库中被真实依赖与使用根目录 package.json 的依赖目录中锁定版本为mediabunny: 1.55.5template-music-visualization/package.json、template-recorder、template-three 等模板也将其作为正式依赖。因此本文所有示例均对应仓库当前采用的 Mediabunny API。二、API 基石Input、Source与媒体轨道探测三个子任务在写法上高度一致均遵循同一套 Mediabunny 使用范式可归纳为三步构造Input传入source媒体来源与formats允许解析的容器格式选择来源类型URL 字符串用UrlSource本地File对象或 Node/Bun 文件系统用FileSource发起探测时长统一调用input.computeDuration()画面尺寸调用input.getPrimaryVideoTrack()后读取轨道上的displayWidth与displayHeight。几个关键概念的含义ALL_FORMATS允许 Mediabunny 尝试解析全部已支持的容器/流格式MP3、WAV、MP4、WebM 等用于不确定输入具体封装类型时是文档示例中的标准取值computeDuration()返回以秒为单位的时长类型为number如180.5表示 3 分 0.5 秒getPrimaryVideoTrack()返回主视频轨对象无视频轨时为null调用方需自行判空抛错displayWidth/displayHeight视频画面的显示尺寸像素例如1920×1080。从源码结构看三份子文档刻意把探测逻辑封装为独立的异步函数便于在 Remotion 的calculateMetadata、组件挂载或任意工具函数中复用。三、获取音频时长3.1 基础实现浏览器 / URL 来源子文档 get-audio-duration.md 给出的完整实现如下import { Input, ALL_FORMATS, UrlSource } from mediabunny; export const getAudioDuration async (src: string) { const input new Input({ formats: ALL_FORMATS, source: new UrlSource(src), }); const durationInSeconds await input.computeDuration(); return durationInSeconds; };调用示例const duration await getAudioDuration(https://remotion.media/audio.mp3); console.log(duration); // e.g. 180.5 (seconds)该函数接受任意可被浏览器以 URL 访问的音频地址远端 HTTPS 链接或页面内的public静态资源 URLcomputeDuration()内部会完成解析与时长计算调用方无需关心具体容器差异。3.2 在 Remotion 中使用staticFile()在 Remotion 项目中音频常放置在public/目录下。staticFile()负责把public/中的相对路径转换为可用的静态资源 URL因此传给探测函数前必须用它包裹路径否则文件无法被正确解析import { staticFile } from remotion; const duration await getAudioDuration(staticFile(audio.mp3));这是与 Remotion 文档约定 中staticFile(demo-track.mp3)完全一致的标准做法。3.3 Node.js 与 Bun 环境在 Node.js / Bun 中媒体来源不再是 URL而是本地文件此时改用FileSourceimport { Input, ALL_FORMATS, FileSource } from mediabunny; const input new Input({ formats: ALL_FORMATS, source: new FileSource(file), // File object from input or drag-drop });文档注释明确指出这里的file可以来自input typefile或拖拽产生的File对象——同一套Input抽象让浏览器端文件选择、拖放与 Node/Bun 文件系统访问共用同一份探测代码。四、获取视频时长4.1 基础实现视频时长与音频时长的代码结构完全相同见 get-video-duration.mdimport { Input, ALL_FORMATS, UrlSource } from mediabunny; export const getVideoDuration async (src: string) { const input new Input({ formats: ALL_FORMATS, source: new UrlSource(src), }); const durationInSeconds await input.computeDuration(); return durationInSeconds; };调用示例const duration await getVideoDuration(https://remotion.media/video.mp4); console.log(duration); // e.g. 10.5 (seconds)4.2 引用public/目录中的视频从public/目录取视频同样要包一层staticFile()import { staticFile } from remotion; const duration await getVideoDuration(staticFile(video.mp4));4.3 在 Node.js 与 Bun 中使用本地文件与音频一致本地文件场景将UrlSource替换为FileSource即可import { Input, ALL_FORMATS, FileSource } from mediabunny; const input new Input({ formats: ALL_FORMATS, source: new FileSource(file), // File object from input or drag-drop }); const durationInSeconds await input.computeDuration();五、获取视频画面尺寸5.1 基础实现与时长探测不同尺寸探测需要先取得主视频轨再读取显示尺寸见 get-video-dimensions.mdimport { Input, ALL_FORMATS, UrlSource } from mediabunny; export const getVideoDimensions async (src: string) { const input new Input({ formats: ALL_FORMATS, source: new UrlSource(src), }); const videoTrack await input.getPrimaryVideoTrack(); if (!videoTrack) { throw new Error(No video track found); } return { width: videoTrack.displayWidth, height: videoTrack.displayHeight, }; };调用示例const dimensions await getVideoDimensions(https://remotion.media/video.mp4); console.log(dimensions.width); // e.g. 1920 console.log(dimensions.height); // e.g. 1080实现要点在于getPrimaryVideoTrack()对无视频轨的输入例如把纯音频文件误当作视频会返回空值因此必须先判空并抛出明确错误再访问displayWidth/displayHeight避免对空对象取属性。5.2 使用本地文件import { Input, ALL_FORMATS, FileSource } from mediabunny; const input new Input({ formats: ALL_FORMATS, source: new FileSource(file), // File object from input or drag-drop }); const videoTrack await input.getPrimaryVideoTrack(); const width videoTrack.displayWidth; const height videoTrack.displayHeight;5.3 与staticFile()组合import { staticFile } from remotion; const dimensions await getVideoDimensions(staticFile(video.mp4));六、仓库内的真实落地让视频与音频素材等时长技能文档中的 API 并非纸上谈兵仓库内的 template-music-visualization 模板 就完整示范了“用 Mediabunny 探测音频时长、并据此动态决定 Remotion 合成时长”的典型用法模板在 package.json 中声明依赖mediabunny: 1.55.5并从mediabunny导入ALL_FORMATS, Input, UrlSourcedefaultProps中音频文件地址用staticFile(demo-track.mp3)表示与本文 3.2 的做法一致在calculateMetadata异步回调中构造Input、调用computeDuration()拿到秒级时长再换算成帧const FPS 30; calculateMetadata{async ({ props }) { const input new Input({ source: new UrlSource(props.audioFileUrl), formats: ALL_FORMATS, }); const durationInSeconds await input.computeDuration(); return { durationInFrames: Math.floor( (durationInSeconds - props.audioOffsetInSeconds) * FPS, ), fps: FPS, }; }}这段代码的价值在于印证了技能文档描述的真实工作流当素材时长未知时把“探测时长”放在calculateMetadata中执行合成时长durationInFrames便可跟随音频自动伸缩从而实现 openai.yaml 中那句示例指令Make my video the same duration as the footage。同理视频时长与尺寸探测也可以按此模式嵌入 Remotion 的元数据计算或渲染前预处理环节。七、跨环境差异与使用建议综合三份子文档与仓库实际用法可将使用要点总结为一张决策表场景使用来源类典型输入浏览器访问远程/静态 URLUrlSourcehttps://...、staticFile(a.mp3)返回的 URL浏览器本地选择文件FileSourceinput typefile或拖拽得到的FileNode.js / Bun 本地文件FileSource文件系统 / 上传得到的File对象配套建议时长与尺寸探测 API 正交computeDuration()对音频、视频一视同仁只有尺寸探测依赖getPrimaryVideoTrack()且必须处理“无视频轨”的错误分支ALL_FORMATS保证兼容性不确定输入封装类型时统一使用MP3、WAV、MP4、WebM 等均可尝试解析Remotion 内一律经staticFile()凡指向public/目录的素材先包staticFile()再交给探测函数与 Remotion 的资源解析约定保持一致在calculateMetadata中做探测需要依据素材决定合成时长或分辨率时应放在元数据计算阶段而非渲染阶段避免每帧重复解析。八、继续深入本文依据的完整原始材料均位于本仓库主技能文档 SKILL.md 与 Agent 配置 agents/openai.yaml三个带完整代码的子文档get-audio-duration.md、get-video-duration.md、get-video-dimensions.md同源副本codex-plugin 技能目录可运行示例template-music-visualization 的 Root.tsx 及其 package.json仓库根目录依赖目录 package.json锁定mediabunny版本 1.55.5。借助 Mediabunny 与这三段探测逻辑你可以在浏览器、Node.js、Bun 中写出完全一致的媒体信息读取代码并让 Remotion 合成真正“跟随素材”——这正是remotion-multimedia技能想交付的核心能力。【免费下载链接】remotion Make videos programmatically with React项目地址: https://gitcode.com/GitHub_Trending/re/remotion创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考