Skip to main content

导入资源

要在 Remotion 中导入资源，在你的项目中创建一个 public/ 文件夹，并使用 staticFile() 来导入它。

🌐 To import assets in Remotion, create a public/ folder in your project and use staticFile() to import it.

my-video/
├─ node_modules/
├─ public/
│  ├─ logo.png
├─ src/
│  ├─ MyComp.tsx
│  ├─ Root.tsx
│  ├─ index.ts
├─ package.json
src/MyComp.tsx
import {Img, staticFile} from 'remotion';

export const MyComp: React.FC = () => {
  return <Img src={staticFile('logo.png')} />;
};

使用图片​

🌐 Using images

使用 Remotion 的 <Img/> 标签。

🌐 Use the <Img/> tag from Remotion.

MyComp.tsx
import {Img, staticFile} from 'remotion';

export const MyComp: React.FC = () => {
  return <Img src={staticFile('logo.png')} />;
};

你也可以传递一个 URL：

🌐 You can also pass a URL:

MyComp.tsx
import {Img} from 'remotion';

export const MyComp: React.FC = () => {
  return <Img src="https://picsum.photos/id/237/200/300" />;
};

使用图片序列​

🌐 Using image sequences

如果你有一系列图片，例如从另一个程序如 After Effects 或 Rotato 导出的，你可以插值路径以创建动态导入。

🌐 If you have a series of images, for example exported from another program like After Effects or Rotato, you can interpolate the path to create a dynamic import.

my-video/
├─ public/
│  ├─ frame1.png
│  ├─ frame2.png
│  ├─ frame3.png
├─ package.json
import {Img, staticFile, useCurrentFrame} from 'remotion';

const MyComp: React.FC = () => {
  const frame = useCurrentFrame();

  return <Img src={staticFile(`/frame${frame}.png`)} />;
};

使用视频​

🌐 Using videos

使用 <OffthreadVideo />、<Video /> 或 <Html5Video /> 组件来保持时间线和你的视频同步。

🌐 Use the <OffthreadVideo />, <Video /> or <Html5Video /> component to keep the timeline and your video in sync.

import {OffthreadVideo, staticFile} from 'remotion';

export const MyComp: React.FC = () => {
  return <OffthreadVideo src={staticFile('vid.webm')} />;
};

通过 URL 加载视频也是可能的：

🌐 Loading videos via URL is also possible:

import {OffthreadVideo} from 'remotion';

export const MyComp: React.FC = () => {
  return <OffthreadVideo src="https://remotion.media/BigBuckBunny.mp4" />;
};

另请参见：Remotion 支持哪些视频格式？

🌐 See also: Which video formats does Remotion support?

使用音频​

🌐 Using Audio

使用 <Html5Audio> 组件。

🌐 Use the <Html5Audio> component.

import {Html5Audio, staticFile} from 'remotion';

export const MyComp: React.FC = () => {
  return <Html5Audio src={staticFile('tune.mp3')} />;
};

也可以从 URL 加载音频：

🌐 Loading audio from an URL is also possible:

import {Html5Audio} from 'remotion';

export const MyComp: React.FC = () => {
  return <Html5Audio src="https://file-examples.com/storage/fe48a63c5264cbd519788b3/2017/11/file_example_MP3_700KB.mp3" />;
};

请参阅音频指南以获取有关如何包含音频的指导。

🌐 See the audio guide for guidance on including audio.

使用 CSS​

🌐 Using CSS

将 .css 文件放在你的 JavaScript 源文件旁边，并使用一个 import 语句。

🌐 Put the .css file alongside your JavaScript source files and use an import statement.

my-video/
├─ node_modules/
├─ src/
│  ├─ style.css
│  ├─ MyComp.tsx
│  ├─ Root.tsx
│  ├─ index.ts
├─ package.json
MyComp.tsx
import './style.css';
note

想使用 SASS、Tailwind 或类似工具吗？查看如何覆盖 Webpack 配置的示例。

使用字体​

🌐 Using Fonts

阅读字体的独立页面。

import 语句​

🌐 import statements

作为导入文件的替代方法，Remotion 允许你在项目中 import 或 require() 多种类型的文件：

🌐 As an alternative way to import files, Remotion allows you to import or require() several types of files in your project:

  • 图片（.png、.svg、.jpg、.jpeg、.webp、.gif、.bmp）
  • 视频（.webm、.mov、.mp4）
  • 音频（.mp3，.wav，.aac，.m4a）
  • 字体（.woff、.woff2、.otf、.ttf、.eot）

例如：

🌐 For example:

MyComp.tsx
import {Img} from 'remotion';
import logo from './logo.png';

export const MyComp: React.FC = () => {
  return <Img src={logo} />;
};

警告​

🌐 Caveats

虽然这以前是导入文件的主要方式，但我们现在不推荐这样做，原因如下：

🌐 While this was previously the main way of importing files, we now recommend against it because of the following reasons:

  • 仅支持上述列出的文件扩展名。
  • 最大文件大小为2GB。
  • 像 require('img' + frame + '.png') 这样的动态导入是古怪的。

如果可能，优先使用 staticFile() 导入。

🌐 Prefer importing using staticFile() if possible.

基于资源的动态期限​

🌐 Dynamic duration based on assets

要根据你的素材使视频时长依赖，请参见：动态时长、帧率和尺寸

🌐 To make your videos duration dependent based on your assets, see: Dynamic duration, FPS & dimensions

项目外的文件​

🌐 Files outside of the project

Remotion 在浏览器中运行，因此无法访问计算机上的任意文件。
在浏览器中也无法使用来自 Node.js 的 fs 模块。
相反，请将资源放入 public/ 文件夹，并使用 getStaticFiles() 来列举它们。

🌐 Remotion runs in the browser, so it does not have access to arbitrary files on your computer.
It is also not possible to use the fs module from Node.js in the browser.
Instead, put assets in the public/ folder and use getStaticFiles() to enumerate them.

查看 为什么 Remotion 不支持绝对路径。

🌐 See why does Remotion does not support absolute paths.

打包后添加资源​

🌐 Adding assets after bundling

在渲染之前，代码会使用 Webpack 进行打包，并且随后只能访问打包后的资源。
因此，在调用 bundle() 之后添加到公共文件夹的资源在渲染期间将无法访问。
然而，如果你使用 服务器端渲染 API，你可以在事后向位于打包包内的 public 文件夹添加资源。

🌐 Before rendering, the code gets bundled using Webpack, and only bundled assets can be accessed afterwards.
For this reason, assets that are being added to the public folder after bundle() is called will not be accessible during render.
However, if you use the server-side rendering APIs, you can add assets to the public folder that is inside the bundle after the fact.

使用 <Img>、<Video> 和 <Audio>​

🌐 Use <Img>, <Video> and <Audio>

使用 <Img /> 或 <Gif /> 代替原生 <img> 标签、Next.js 的 <Image> 和 CSS background-image。
使用 <OffthreadVideo />、<Video /> 或 <Html5Video /> 代替原生 <video> 标签。
使用 <Audio /> 或 <Html5Audio /> 代替原生 <audio> 标签。
使用 <IFrame /> 代替原生 <iframe> 标签。


通过使用 Remotion 的组件，你可以确保：

🌐 By using the components from Remotion, you ensure that:

在渲染帧之前资源已完全加载


图片和视频与 Remotion 的时间轴同步。

另请参阅​

🌐 See also

Last updated on