人工智能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 视频创作技能中的资源规则文档assets.md为主体系统讲解在 Remotion 视频项目中如何正确组织图片、视频、音频与字体等静态资源所有本地资源统一放入项目根目录的public/文件夹并通过staticFile()这一编码后的 URL API 引用同时结合仓库内images.md、videos.md、audio.md、fonts.md等配套规则与源码示例深入讲解媒体组件的裁剪、变速、音量与动态路径等实战能力。读完本文你将掌握一套可直接套用的 Remotion 静态资源接入范式避免空白帧、闪烁、路径 404 等常见陷阱。为什么需要统一的资源接入规则Remotion 的核心思路是用 React 写视频视频的每一帧都是真实渲染出来的 React 界面。这意味着图片、视频、音频、字体等媒体资产在项目中承担着与传统 Web 页面完全不同的角色——它们不仅要在浏览器预览中显示还要在服务端渲染Server Rendering阶段被逐一拉取、解码并逐帧合成。在 SKILL.md 的 Important rules 一节中Stagewise 的 Remotion 创作技能明确写了一条铁律ALWAYS COPY image/video/audio assets intopublicfolder when using them使用图片/视频/音频资产时一律将其复制到public文件夹。这正是 assets.md 开篇第一句所强调的Put assets in project-rootpublic/folder.——项目根目录的public/文件夹是所有本地静态资源的唯一归宿。这样做有双重意义其一public/中的文件在渲染期间会以稳定的 URL 形式被组件引用保证 Studio 预览与最终渲染行为一致其二避免在渲染流水线中依赖来自工作区其他位置的可变路径让视频项目成为自包含、可迁移的独立单元SKILL.md 也要求项目是放在自有文件夹里的干净独立 Remotion 项目。public/ 目录本地资源的统一存放约定public/必须位于项目根目录与src/、package.json平级。一个典型的视频项目结构如下参考 images.md 中的目录示例my-video/ ├─ public/ │ ├─ logo.png │ ├─ avatar.jpg │ ├─ icon.svg │ ├─ clip.mp4 │ └─ music.mp3 ├─ src/ ├─ package.json所有要在视频中出现的本地媒体——品牌 Logo、照片、视频片段、背景音乐、字体文件——都应被复制进这个目录。SKILL.md 还额外强调了两条资源获取原则优先从网站和品牌素材包brand kits下载/复用素材而不是手动重新创建绝不手动重绘 Logo除非它只是使用已知字体的纯文字一律复制/下载原图。这保证了进入public/的每一份资产都是高质量、真实可用的原始素材。staticFile()从 public/ 引用文件的统一 API一旦文件位于public/引用方式就只有一个标准答案staticFile()。import { Img, staticFile } from remotion; export const MyComposition () { return Img src{staticFile(logo.png)} /; };staticFile()的作用可以概括为两点返回编码后的 URL。它把public/内的相对文件名转换成渲染环境可解析的绝对 URL组件拿到这个 URL 后即可加载对应资源。支持子目录部署subdirectory deploys。当项目被部署或渲染在某个子路径下时staticFile()生成的 URL 会自适应路径前缀不会因为部署目录变化而 404。这两点共同保证了同一个视频项目无论在本地 Studio 中预览、在 CI 中渲染还是被部署到子目录环境资源路径始终解析正确。各类媒体组件的静态资源接入assets.md 的核心章节 With components 给出了四种主流媒体类型的最小接入范式下面逐一展开并补充仓库配套规则中的细节。图片ImgstaticFile()import { Img, staticFile } from remotion; Img src{staticFile(photo.png)} /;需要特别强调的是图片必须使用 Remotion 提供的Img组件而不是原生 HTMLimg、Next.jsImage或 CSSbackground-image——这条约束在 images.md 中被标为硬性规定Must useImgfromremotion. Do not use...。原因在 assets.md 的 Notes 中亦有交代Remotion 的媒体组件会等待资源完全加载后再渲染因此Img能保证没有闪烁、没有空白导出帧而原生img是异步懒加载语义渲染期间资源未就绪时导出的帧就会是空白或半加载状态。此外Img还支持通过style精确控制尺寸与位置以及用模板字符串构造动态路径详见后文动态路径小节。视频Video来自 remotion/mediaimport { Video } from remotion/media; import { staticFile } from remotion; Video src{staticFile(clip.mp4)} /;注意视频组件来自独立的remotion/media包SKILL.md 提示可按需通过npx remotion add等命令安装。Video同样具备等待完整加载再渲染的时序保证并支持裁剪、音量、变速、循环、变调等控制详见 videos.md。音频Audio来自 remotion/mediaimport { Audio } from remotion/media; import { staticFile } from remotion; Audio src{staticFile(music.mp3)} /;默认行为是立即开始、全音量、播完整个文件且可以在一个组合中叠加多个Audio形成多音轨。详细的音量、裁剪、循环与变调控制参见 audio.md。字体FontFacestaticFile()import { staticFile } from remotion; const fontFamily new FontFace( MyFont, url(${staticFile(font.woff2)}) ); await fontFamily.load(); document.fonts.add(fontFamily);字体文件同样放入public/用staticFile()生成其 URL再通过 Web 标准FontFaceAPI 加载并注册到document.fonts。这是一种自底向上的通用做法如果你希望更工程化地管理字体比如按字重加载、类型安全的 Google Fonts可以改用remotion/google-fonts或remotion/fonts的loadFont()封装详见下文字体加载的工程化实践。远程 URL直接引用无需 staticFile()如果素材托管在远程服务器上则不需要staticFile()直接把完整 URL 传给媒体组件即可Img srchttps://example.com/image.png / Video srchttps://remotion.media/video.mp4 /images.md 与 videos.md 均确认远程 URL 可以直接使用。需要留意一个前提远程图片在浏览器中加载受CORS跨域资源共享约束若目标服务器不允许跨域读取渲染时可能取不到像素数据对远程 GIF 这类动图应改用remotion/gif的Gif组件参见 gifs.md。两个关键行为细节完整加载等待与文件名自动编码assets.md 的 Notes 部分记录了两条极易踩坑、但又能显著影响成片质量的行为Remotion 媒体组件Img、Video、Audio会等待资源完全加载后再渲染。这保证了预览与导出的一致性——没有闪烁flicker、没有空白导出帧blank export frames代价是资源加载期间组件会阻塞对应帧的渲染因此应确保public/中的资源真实存在且可访问。文件名中的特殊字符#、?、会被自动编码。staticFile()返回的是编码后的 URL文件名为report#final.png、q?1.png这类含特殊字符的资源也能被正确解析无需手动做 URL 转义。这两条行为由staticFile()的实现语义保证是 assets.md 对使用者的核心承诺。纵深实践图片尺寸获取、动态路径与动图assets.md 给出了静态资源接入的最小骨架Stagewise 仓库内的配套规则文件则提供了可直接落地的纵深能力。获取图片尺寸getImageDimensions()当组合的宽高、比例需要由图片本身决定时可以用getImageDimensions()异步读取图片的真实分辨率import { getImageDimensions, staticFile } from remotion; const { width, height } await getImageDimensions(staticFile(photo.png));更常见的场景是在calculateMetadata中根据图片尺寸动态计算组合尺寸import { getImageDimensions, staticFile, CalculateMetadataFunction, } from remotion; const calculateMetadata: CalculateMetadataFunction async () { const { width, height } await getImageDimensions(staticFile(photo.png)); return { width, height }; };这样组合就会自动贴合图片的宽高比避免黑边或裁切该能力详见 images.md。动态图片路径模板字符串配合useCurrentFrame()或组件 propsstaticFile()的参数可以是模板字符串从而构造出随帧号或数据变化的资源路径import { Img, staticFile, useCurrentFrame } from remotion; const frame useCurrentFrame(); // 图片序列按帧切换画面 Img src{staticFile(frames/frame${frame}.png)} /; // 来自 props用户头像 Img src{staticFile(avatars/${props.userId}.png)} /; // 条件分支主题图标 Img src{staticFile(icons/${isActive ? active : inactive}.svg)} /;这套写法特别适合图片序列动画、用户头像/资料图、主题图标和状态图形等场景示例同样来自 images.md。动图AnimatedImage与GifGIF、APNG、AVIF、WebP 等动图资源可用AnimatedImage组件接入并使其动画与 Remotion 时间线同步import { AnimatedImage, staticFile } from remotion; AnimatedImage src{staticFile(animation.gif)} width{500} height{500} /;AnimatedImage支持fitfill/contain/cover控制填充方式、playbackRate变速以及loopBehavior控制播放结束后的行为loop循环、pause-after-finish定格末帧、clear-after-finish结束后清空。需要让组合时长与 GIF 时长对齐时可用remotion/gif的getGifDurationInSeconds()获取时长并按 fps 换算为帧数。由于AnimatedImage目前仅受 Chrome 与 Firefox 支持gifs.md 还给出了备选方案改用remotion/gif的Gif组件它拥有与AnimatedImage相同的 props但仅支持 GIF 格式。纵深实践视频与音频的裁剪、音量、变速与循环assets.md 只展示了Video/Audio的最小导入方式而 Stagewise 的 videos.md 与 audio.md 给出了完整的媒体控制面板以下能力对图片/视频/音频组件一视同仁可按需组合裁剪trimBeforetrimAfter单位是帧只播放选中切片播放起点仍位于组合起点const { fps } useVideoConfig(); return Video src{staticFile(video.mp4)} trimBefore{2 * fps} trimAfter{10 * fps} /;延迟用Sequence from{1 * fps}包裹让媒体在指定帧号才开始出现音频延迟同理见 sequencing.md。音量volume支持 0–1 的静态值也支持回调做动态包络例如用interpolate()实现前 1 秒从 0 渐强Audio src{staticFile(music.mp3)} volume{(f) interpolate(f, [0, 1 * fps], [0, 1], { extrapolateRight: clamp })} /注意音频音量回调中的f从音频开始播放的那一帧起算而非组合的绝对帧号。静音muted可静态也可动态如muted{frame 2 * fps frame 4 * fps}。变速playbackRate默认 1可传2或0.5等值反向播放不受支持。循环loop无限循环配合loopVolumeCurveBehavior控制循环后的帧计数行为——repeat每轮循环帧号归零默认extend帧号持续累加适合跨循环的渐弱音量曲线。变调toneFrequency范围 0.01–2只改变音高、不改变速度例如1.5升调、0.8降调。注意变调仅在服务端渲染时生效Studio 预览与Player /中不可用。这些能力让一段静态素材可以被精确编排进时间线而它们全部建立在资源经staticFile()接入这一基础之上。纵深实践字体加载的工程化方案assets.md 的字体示例使用原生FontFace对单字体场景足够当项目需要类型安全、按需加载或多种字重时仓库的 fonts.md 提供了两条更优路径Google Fonts安装remotion/google-fonts后用loadFont()加载并得到fontFamily渲染会阻塞至字体就绪import { loadFont } from remotion/google-fonts/Lobster; const { fontFamily } loadFont(); export const MyComposition () { return div style{{ fontFamily }}Hello World/div; };可以只声明需要的字重与子集以减小文件体积例如loadFont(normal, { weights: [400, 700], subsets: [latin] })若需明确等待字体就绪可用await waitUntilDone()。本地字体安装remotion/fonts把字体文件放入public/后调用其loadFont()import { loadFont } from remotion/fonts; import { staticFile } from remotion; await loadFont({ family: MyFont, // 必填CSS 中使用的字体名 url: staticFile(font.woff2), // 必填字体文件 URL format: woff2, // 可选默认按扩展名自动识别 weight: 400, // 可选字重 style: normal, // 可选normal 或 italic display: block, // 可选font-display 行为 });多字重场景下可对同一family分别加载各字重并用Promise.all并行等待。资源工作流从规则到可交付视频回到 Stagewise 的完整视频创作流程见 SKILL.md静态资源管理贯穿始终收集阶段向用户说明需要哪些素材能直接构建的如用 React 组件生成图形直接构建必须由用户提供的素材优先告知落地阶段所有图片/视频/音频资产一律复制进public/通过staticFile()引用渲染阶段默认 30fps除非明确要求透明背景否则组合必须带背景色渲染偏好的高质量设置如CRF5、JPEG95统一写入remotion.config.ts检查阶段可用npx remotion still [composition-id] --scale0.25 --frame30渲染单帧做布局、色彩、时序的快速校验30fps 下--frame30即 1 秒处帧号从 0 起算。整个流程中assets.md 的规则是素材接入的地基只有把资源正确地放进public/、用staticFile()引用、并交由 Remotion 媒体组件渲染才能保证 Studio 预览与最终成片在画面、音轨和字体上完全一致产出无闪烁、无空白帧、可部署到任意子目录的高质量视频。赞分享人工智能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点击查看免费下载相关推荐LifeOS Remotion 资源导入指南使用 staticFile 与 public 目录管理图片、视频、音频与字体LifeOS Remotion 资源导入指南使用 staticFile 与 public 目录管理图片、视频、音频与字体 导读 在 LifeOS 的 RemoAI 技能人工智能AI 应用RedwoodJS 资源与文件管理实战Co-locating 导入与 web/public 静态目录全解析RedwoodJS 资源与文件管理实战Co locating 导入与 web/public 静态目录全解析 导读 在 RedwoodJS 应用中图片、字体、后端前端Web框架开发工具RedwoodJS 静态资源管理实战深入理解 web/public 目录、copy-webpack-plugin 与 Webpack 资源导入RedwoodJS 静态资源管理实战深入理解 web/public 目录、copy webpack plugin 与 Webpack 资源导入 本指南以 VeCLI后端云原生上一篇手机号与QQ号关联查询实战指南技术实现与企业级应用方案下一篇5分钟快速上手Mermaid在线图表编辑器免费创建专业技术图表创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考