Skip to main content

<Artifact>v4.0.176

通过在你的 Remotion 标记中渲染一个 <Artifact> 标签，渲染期间将会生成一个额外的文件。

🌐 By rendering an <Artifact> tag in your Remotion markup, an extra file will get emitted during rendering.

MyComp.tsx
import {Artifact, useCurrentFrame} from 'remotion';

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

  return frame === 0 ? <Artifact filename="my-file.txt" content="Hello World!" /> : null;
};

如果在命令行接口或通过 Studio 渲染，这将生成一个额外的文件：

🌐 If rendered on the CLI or via the Studio, this will emit an additional file:

$ npx remotion render MyComp
+ out/MyComp.mp4
+ my-file.txt (12B)

一个组合可以生成多个文件是被允许的。 但是，文件名必须是唯一的。

🌐 It is allowed for a composition to emit multiple files.
However, the file names must be unique.

该组件将在每一帧上进行评估，这意味着如果你只想发出一个文件，只在一帧上渲染它即可。

🌐 The component will get evaluated on every frame, which means if you want to emit just one file, only render it on one frame.

❌ Will generate an asset on every frame and throw an error because the file name is not unique
import {Artifact, useCurrentFrame} from 'remotion';

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

  return frame === 0 ? <Artifact filename="my-file.txt" content="Hello World!" /> : null;
};

应用编程接口​

🌐 API

filename​

一个字符串，表示将要生成的文件的名称。
即使在 Windows 上，也只使用正斜杠。
必须匹配正则表达式 /^([0-9a-zA-Z-!_.*'()/:&$@=;+,?]+)/g。

🌐 A string that is the name of the file that will be emitted.
Use forward slashes only, even on Windows.
Must match the regex /^([0-9a-zA-Z-!_.*'()/:&$@=;+,?]+)/g.

content​

一个 string 或 Uint8Array，它是将被输出的文件的内容。不要认为 Uint8Array 会更快，因为它需要被序列化。

🌐 A string or Uint8Array that is the content of the file that will be emitted. Don't consider an Uint8Array to be faster, because it needs to be serialized.

downloadBehavior?v4.0.296​

仅适用于无服务器渲染。

🌐 Only applies to serverless rendering.

当通过浏览器中的输出链接访问输出文件时，该文件应如何表现。
可以是：

🌐 How the output file should behave when accessed through the output link in the browser.
Either:

  • {"type": "play-in-browser"} - 默认设置。视频将在浏览器中播放。
  • {"type": "download", fileName: null} 或 {"type": "download", fileName: "download.mp4"} - 将添加一个 Content-Disposition 头，使浏览器下载文件。你可以选择覆盖文件名。

默认行为与你为主渲染输出定义的下载行为相同。

🌐 The default behavior is the same download behavior you defined for the main rendering output.

Artifact.Thumbnailv4.0.290​

一个特殊符号，如果你将它传递给 content 属性，它将 以 artifact 的形式发出当前帧的图片数据。

🌐 A special symbol that if you pass it to the content prop, it will emit the image data of the current frame as an artifact.

Emitting the first frame as a thumbnail
import {Artifact, useCurrentFrame} from 'remotion';

export const MyComp: React.FC = () => {
  const frame = useCurrentFrame();
  return <>{frame === 0 ? <Artifact content={Artifact.Thumbnail} filename="thumbnail.jpeg" /> : null}</>;
};

有关更多重要信息，请参阅 生成缩略图 页面。

🌐 See the Emitting Thumbnails page for more important information.

兼容性​

🌐 Compatibility

BrowsersEnvironments
Chrome
Firefox
Safari
No-op
No-op

另请参阅​

🌐 See also

Last updated on