Skip to main content

导入资源

在 Remotion 中导入资源，需要在项目中创建一个 public/ 文件夹，并使用 staticFile() 进行导入。

txt
my-video/
├─ node_modules/
├─ public/
│  ├─ logo.png
├─ src/
│  ├─ MyComp.tsx
│  ├─ Root.tsx
│  ├─ index.ts
├─ package.json
txt
my-video/
├─ node_modules/
├─ public/
│  ├─ logo.png
├─ src/
│  ├─ MyComp.tsx
│  ├─ Root.tsx
│  ├─ index.ts
├─ package.json
src/MyComp.tsx
tsx
import { Img, staticFile } from "remotion";
 
export const MyComp: React.FC = () => {
  return <Img src={staticFile("logo.png")} />;
};
src/MyComp.tsx
tsx
import { Img, staticFile } from "remotion";
 
export const MyComp: React.FC = () => {
  return <Img src={staticFile("logo.png")} />;
};

使用图片​

使用 Remotion 中的 <Img/> 标签。

MyComp.tsx
tsx
import { Img, staticFile } from "remotion";
 
export const MyComp: React.FC = () => {
  return <Img src={staticFile("logo.png")} />;
};
MyComp.tsx
tsx
import { Img, staticFile } from "remotion";
 
export const MyComp: React.FC = () => {
  return <Img src={staticFile("logo.png")} />;
};

您也可以传递一个 URL：

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

使用图像序列​

如果您有一系列图像，例如从其他程序（如 After Effects 或 Rotato）导出的图像，您可以插值路径以创建动态导入。

txt
my-video/
├─ public/
│  ├─ frame1.png
│  ├─ frame2.png
│  ├─ frame3.png
├─ package.json
txt
my-video/
├─ public/
│  ├─ frame1.png
│  ├─ frame2.png
│  ├─ frame3.png
├─ package.json
tsx
import { Img, staticFile, useCurrentFrame } from "remotion";
 
const MyComp: React.FC = () => {
  const frame = useCurrentFrame();
 
  return <Img src={staticFile(`/frame${frame}.png`)} />;
};
tsx
import { Img, staticFile, useCurrentFrame } from "remotion";
 
const MyComp: React.FC = () => {
  const frame = useCurrentFrame();
 
  return <Img src={staticFile(`/frame${frame}.png`)} />;
};

使用视频​

使用 <OffthreadVideo /> 或 <Video /> 组件来保持时间轴和视频同步。

tsx
import { OffthreadVideo, staticFile } from "remotion";
 
export const MyComp: React.FC = () => {
  return <OffthreadVideo src={staticFile("vid.webm")} />;
};
tsx
import { OffthreadVideo, staticFile } from "remotion";
 
export const MyComp: React.FC = () => {
  return <OffthreadVideo src={staticFile("vid.webm")} />;
};

也可以通过 URL 加载视频：

tsx
import { OffthreadVideo } from "remotion";
 
export const MyComp: React.FC = () => {
  return (
    <OffthreadVideo src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" />
  );
};
tsx
import { OffthreadVideo } from "remotion";
 
export const MyComp: React.FC = () => {
  return (
    <OffthreadVideo src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" />
  );
};

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

使用音频​

使用 <Audio/ > 组件。

tsx
import { Audio, staticFile } from "remotion";
 
export const MyComp: React.FC = () => {
  return <Audio src={staticFile("tune.mp3")} />;
};
tsx
import { Audio, staticFile } from "remotion";
 
export const MyComp: React.FC = () => {
  return <Audio src={staticFile("tune.mp3")} />;
};

也可以通过 URL 加载音频：

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

查看 音频指南 以获取有关包含音频的指导。

使用 CSS​

将 .css 文件与您的 JavaScript 源文件放在一起，并使用 import 语句。

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

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

使用字体​

阅读有关字体的单独页面。

import 语句​

作为导入文件的另一种方式，Remotion 允许您在项目中导入多种类型的文件，可以使用 import 或 require()：

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

例如：

MyComp.tsx
tsx
import { Img } from "remotion";
import logo from "./logo.png";
 
export const MyComp: React.FC = () => {
  return <Img src={logo} />;
};
MyComp.tsx
tsx
import { Img } from "remotion";
import logo from "./logo.png";
 
export const MyComp: React.FC = () => {
  return <Img src={logo} />;
};

注意事项​

尽管这曾经是导入文件的主要方式，但由于以下原因，我们现在建议不要使用它：

  • 仅支持上述列出的文件扩展名。
  • 最大文件大小为2GB。
  • 诸如 require('img' + frame + '.png') 这样的动态导入方式有些奇怪。

如果可能的话，请优先使用 staticFile() 进行导入。

基于资产的动态时长​

要使您的视频时长取决于您的资产，请参阅：动态时长、FPS 和尺寸

项目外的文件​

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

请参阅 为什么 Remotion 不支持绝对路径。

打包后添加资产​

在渲染之前，代码会使用 Webpack 进行打包，之后只能访问打包后的资产。
因此，在调用 bundle() 后添加到 public 文件夹中的资产在渲染期间将无法访问。
但是，如果使用 服务器端渲染 API，则可以在事后向捆绑包内部的 public 文件夹添加资产。

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

请优先使用 <Img /> 或 <Gif /> 而不是原生的 <img> 标签、Next.js 的 <Image> 和 CSS 的 background-image。
请优先使用 <OffthreadVideo /> 或 <Video /> 而不是原生的 <video> 标签。
请优先使用 <Audio /> 而不是原生的 <audio> 标签。
请优先使用 <IFrame /> 而不是原生的 <iframe> 标签。


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

在渲染帧之前完全加载资产
2
 图像和视频与 Remotion 的时间轴同步。

另请参阅​