人工智能AI Agent代码智能体开发工具【免费下载链接】stagewiseThe Open Source Agentic IDE. Create and orchestrate coding agents, show app previews and run git workflows. Use your favorite models across all providers.项目地址https://gitcode.com/gh_mirrors/st/stagewise点击查看免费下载导读本文以 Stagewise 仓库内置的 Remotion 视频创作技能SKILL.md中的规则文档为核心系统讲解在 Remotion 项目中如何通过remotion/media的Video组件导入本地与远程视频并完成裁剪trim、延迟delay、缩放定位style、音量volume、静音muted、变速playbackRate、循环loop与变调toneFrequency等全套控制。文章同时结合仓库中同目录的配套规则文档assets、audio、trimming、sequencing、can-decode、get-video-dimensions、get-video-duration 等与技能流程给出可直接复制运行的代码示例与底层原理帮助你无论作为 Agent 还是开发者都能在 Stagewise 的创建 Remotion 视频工作流中精确地使用视频素材。一、前置准备把视频放进 Remotion 项目在 Stagewise 的 Remotion 技能流程中所有素材图片、视频、音频、字体都必须先复制进项目根目录的public/文件夹再通过staticFile()引用见 assets.md。这条规则同样适用于视频永远不要把视频文件散落在组件目录里一律放入public/。import { Video } from remotion/media; import { staticFile } from remotion; export const MyComposition () { return Video src{staticFile(video.mp4)} /; };若项目尚未安装remotion/media先通过npx remotion add remotion/media或pnpm exec remotion add remotion/media依据项目包管理器选择安装。staticFile()会返回经过编码的 URL在子目录部署subdirectory deploys下依然可用是引用public/内文件的推荐方式。文件名中的特殊字符#、?、会被自动编码无需手工处理。远程 URL 同样可用规则文档明确远程 URL 可以直接作为src传入不需要包staticFile()Video srchttps://remotion.media/video.mp4 /加载行为说明Video以及Img、Audio这类 Remotion 组件会等待资源完全加载完成后才进入渲染因此无须在组件内自行做加载状态判断这是 assets.md 明确给出的行为约定。二、裁剪视频trimBefore与trimAfter规则文档给出的裁剪方式与音频规则audio.md一致通过trimBeforetrimAfter指定要保留的片段数值单位是帧frames需要结合useVideoConfig()拿到的fps换算成秒。import { useVideoConfig } from remotion; export const MyComposition () { const { fps } useVideoConfig(); return ( Video src{staticFile(video.mp4)} trimBefore{2 * fps} // 剪掉前 2 秒 trimAfter{10 * fps} // 保留到第 10 秒 / ); };要点裁剪后视频仍然从合成composition的第 0 帧开始播放只是实际播放的内容是被选中区间的那一段这与音频规则中Still starts at composition start. Only selected slice plays.的行为一致。通过fps而不是写死帧数可以保证不同帧率项目下的裁剪时间语义一致。三、延迟出现用Sequence包装如果希望视频不是从第 0 帧就开始而是在若干秒后出现规则文档给出的做法是把它包进Sequence并设置fromimport { Sequence, staticFile, useVideoConfig } from remotion; import { Video } from remotion/media; export const MyComposition () { const { fps } useVideoConfig(); return ( Sequence from{1 * fps} Video src{staticFile(video.mp4)} / /Sequence ); };上面的例子中from{1 * fps}表示视频在合成开始 1 秒后才出现。配套的 sequencing.md 补充了更多时序控制细节可作为深化参考Sequence默认会把子元素包裹进一个absolute fill绝对定位填充容器若不需要这种包裹行为可传layoutnone。建议给Sequence加premountFor让组件在真正进入播放时间之前提前加载避免出现卡顿Sequence from{1 * fps} durationInFrames{2 * fps} premountFor{1 * fps} Title / /Sequence在Sequence内部使用useCurrentFrame()时返回的是从 0 开始的局部帧号而不是全局帧号这一点在做内部动画时要注意。四、缩放与定位style视频在合成中的尺寸和位置通过标准的style对象控制规则文档给出的示例同时演示了固定宽高、绝对定位与裁剪适配三种能力Video src{staticFile(video.mp4)} style{{ width: 500, height: 300, position: absolute, top: 100, left: 50, objectFit: cover, }} /position: absolutetop/left用于把视频精确放到合成画布的任意位置。objectFit: cover让视频按封面模式填满指定宽高、必要时裁掉溢出部分常用于背景视频或需要统一比例的卡片场景。由于 Remotion 本身就是 Reactstyle的语义与浏览器 CSS 一致任何响应式布局思路如基于useVideoConfig()计算百分比都可以直接复用。五、音量控制静态volume与动态回调规则文档给出了两条音量控制路径。5.1 静态音量volume取值范围为0 到 1直接传入常量即可Video src{staticFile(video.mp4)} volume{0.5} /5.2 动态音量回调把volume写成接收当前帧f的回调函数再配合interpolate做随时间变化的音量曲线import { interpolate, useVideoConfig } from remotion; export const MyComposition () { const { fps } useVideoConfig(); return ( Video src{staticFile(video.mp4)} volume{(f) interpolate(f, [0, 1 * fps], [0, 1], { extrapolateRight: clamp }) } / ); };上面的写法实现前 1 秒从无声渐入到全音量。extrapolateRight: clamp保证超过输入区间后音量维持在末端值不再继续增长。需要注意在Audio组件中回调的f是从音频开始播放时算起从 0 开始而不是合成全局帧视频组件的回调语义与其一致设计音量曲线时应以此为基准。六、静音muted传入muted即可静音整个视频的音轨用法与音量为静态常量时相同Video src{staticFile(video.mp4)} muted /动态静音例如第 24 秒间静音在 audio.md 中给出了模式muted可以接受布尔表达式如muted{frame 2 * fps frame 4 * fps}视频组件同样适用这一模式。七、变速播放playbackRateplaybackRate控制播放速度默认值为 1。大于 1 加速小于 1 减速但仍为正向播放Video src{staticFile(video.mp4)} playbackRate{2} / Video src{staticFile(video.mp4)} playbackRate{0.5} /⚠️ 规则文档明确声明反向播放reverse playback不支持。请勿尝试使用负的playbackRateRemotion 的媒体组件不支持逆向解码播放。八、循环播放loop与loopVolumeCurveBehaviorloop让视频无限循环Video src{staticFile(video.mp4)} loop /当loop与动态volume回调组合使用时loopVolumeCurveBehavior决定循环时回调收到的帧号如何计算repeat每次循环帧号重置回到 0 重新计。适合音量曲线希望每圈重新来一遍的场景。extend帧号持续增长不随循环重置。适合希望音量曲线在整段播放中一次性走完的场景。官方示例extend模式前 300 帧音量从 1 渐降到 0之后保持静音般的低音量Video src{staticFile(video.mp4)} loop loopVolumeCurveBehaviorextend volume{(f) interpolate(f, [0, 300], [1, 0])} /结合 audio.md 可知repeat是默认值与音频组件的语义完全一致。九、变调不改速toneFrequencytoneFrequency用于改变音调pitch取值范围为0.01 到 2它只改变音高、不改变播放速度Video src{staticFile(video.mp4)} toneFrequency{1.5} / {/* 音调升高 */} Video src{staticFile(video.mp4)} toneFrequency{0.8} / {/* 音调降低 */}两个需要特别注意的限制规则文档明确说明且与 audio.md 一致变调只在服务端渲染server render时生效Studio 预览中不生效Player /中不生效。因此如果依赖toneFrequency变调务必用服务端渲染产出的成片来验收效果不要用 Studio 或 Player 预览判断。十、纵深实践解码校验、尺寸与时长探测规则文档只解决把视频放进画面而这个视频能否被浏览器解码、分辨率是多少、时长多长这类问题仓库配套的规则文件给出了 Mediabunny 方案可在渲染前做防御性校验。10.1 渲染前检查可解码性can-decode.md先安装 Mediabunnynpx remotion add mediabunny然后可复制以下canDecode工具函数同时检查主视频轨与主音频轨import { Input, ALL_FORMATS, UrlSource } from mediabunny; export const canDecode async (src: string) { const input new Input({ formats: ALL_FORMATS, source: new UrlSource(src, { getRetryDelay: () null }), }); try { await input.getFormat(); } catch { return false; } const videoTrack await input.getPrimaryVideoTrack(); if (videoTrack !(await videoTrack.canDecode())) { return false; } const audioTrack await input.getPrimaryAudioTrack(); if (audioTrack !(await audioTrack.canDecode())) { return false; } return true; };使用方式const src https://remotion.media/video.mp4; const isDecodable await canDecode(src); if (isDecodable) { console.log(Video can be decoded); } else { console.log(Video cannot be decoded by this browser); }若视频来自上传或拖拽Blob把UrlSource换成BlobSource即可校验逻辑不变。10.2 获取分辨率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, { getRetryDelay: () null }), }); const videoTrack await input.getPrimaryVideoTrack(); if (!videoTrack) { throw new Error(No video track found); } return { width: videoTrack.displayWidth, height: videoTrack.displayHeight, }; };对public/内的文件用staticFile()包装路径传入即可例如getVideoDimensions(staticFile(video.mp4))。该 API 在浏览器、Node.js、Bun 中均可用。10.3 获取时长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, { getRetryDelay: () null }), }); const durationInSeconds await input.computeDuration(); return durationInSeconds; };在 Node.js / Bun 环境使用本地文件时将UrlSource换成FileSource(file)浏览器拖拽上传场景同样使用FileSource。知道精确时长后你就能基于getVideoDuration(staticFile(video.mp4))的结果为Video设置准确的trimAfter或为整段合成composition计算durationInFrames。十一、组合示例一段延迟出现、裁剪、渐入、循环的视频将上述规则组合成真实可用的成分composition示例import { Sequence, staticFile, interpolate, useVideoConfig } from remotion; import { Video } from remotion/media; export const MyComposition () { const { fps } useVideoConfig(); return ( Sequence from{1 * fps} Video src{staticFile(video.mp4)} trimBefore{2 * fps} trimAfter{10 * fps} style{{ width: 1280, height: 720, position: absolute, top: 100, left: 50, objectFit: cover, }} volume{(f) interpolate(f, [0, 1 * fps], [0, 1], { extrapolateRight: clamp })} loop loopVolumeCurveBehaviorextend / /Sequence ); };行为解读第 1 秒后视频才出现Sequence from{1 * fps}只播放源视频第 210 秒的片段trimBefore/trimAfter固定为 1280×720 并绝对定位cover裁剪填充音量在出现后的 1 秒内从 0 渐入到 1并因loopextend而在循环播放中保持同一条音量曲线持续延伸。十二、在 Stagewise 的 Remotion 视频工作流中的位置这段视频规则并非孤立存在而是 Stagewise 内置 Remotion 技能SKILL.md的规则库之一。从技能流程看技能要求把所有素材先放进public/再统一通过staticFile()引用与 assets.md 完全对应技能默认30 fpsDefault to 30fps因此本文所有X * fps的写法在默认项目里等价于X 秒视频相关需求导入、裁剪、音量、速度、循环、变调时技能会引导读取 videos.md本文即该文件的完整展开涉及静音片段裁剪、字幕等场景时技能还会交叉引用 ffmpeg.md、silence-detection.md、subtitles.md 等规则文件形成完整的视频制作链路。十三、快速自查清单remotion/media已安装npx remotion add remotion/media视频文件已复制进项目根目录public/并用staticFile()引用远程 URL 直接传入裁剪使用帧单位trimBefore/trimAfter均乘以fps延迟出现使用Sequence from{N * fps}并建议加premountFor音量取值范围 01动态曲线用回调 interpolatemuted可传布尔表达式实现动态静音playbackRate仅支持正向默认 1不支持反向循环时按需选择loopVolumeCurveBehaviorrepeat默认或extendtoneFrequency0.012只在服务端渲染生效Studio 与Player /无效渲染前用 Mediabunny 的canDecode/getVideoDimensions/getVideoDuration校验素材遵循以上规则你就能在 Stagewise 的 Remotion 视频创作工作流中像使用专业剪辑软件一样精确控制每一段视频素材的引入、裁剪、时序、布局、音量和播放行为。赞分享人工智能AI Agent代码智能体开发工具【免费下载链接】stagewiseThe Open Source Agentic IDE. Create and orchestrate coding agents, show app previews and run git workflows. Use your favorite models across all providers.项目地址https://gitcode.com/gh_mirrors/st/stagewise点击查看免费下载相关推荐Remotion 视频嵌入与处理在 React 合成中使用 remotion/media 实现裁剪、变速、循环与变调Remotion 视频嵌入与处理在 React 合成中使用 remotion/media 实现裁剪、变速、循环与变调 导读 本文围绕 Remotion 官方音视频AI 应用前端Stagewise 中基于 Remotion 的 FFmpeg 视频处理指南免安装调用与无损裁剪Stagewise 中基于 Remotion 的 FFmpeg 视频处理指南免安装调用与无损裁剪 在 Stagewise 开源仓库中 apps/browse人工智能AI Agent代码智能体开发工具使用 Remotion 定义视频合成CompositionStagewise 中可渲染视频的组件、尺寸、帧率与动态元数据完整指南使用 Remotion 定义视频合成CompositionStagewise 中可渲染视频的组件、尺寸、帧率与动态元数据完整指南 导读 本文围绕 Stag人工智能AI Agent代码智能体开发工具上一篇SDR完整使用指南10分钟学会跨平台软件定义无线电操作下一篇如何通过100免费插件集打造专业级RPG游戏RPG Maker MV/MZ终极指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
