Skip to main content

渲染透明视频

Chrome 和 Firefox 支持带有 alpha 通道的 WebM 视频。这意味着在这些浏览器上，你可以嵌入带有透明度的视频。

🌐 Chrome and Firefox support WebM videos with alpha channels. That means that on these browsers, you can embed videos with transparency.

如果你足够幸运，能够用其中一种受支持的网页浏览器访问该网站，请查看：

🌐 If you are lucky enough to visit the website in one of those supported web browsers, check it out:

创建带有 Alpha 通道的 WebM 视频​

🌐 Creating a WebM video with Alpha channel

为了创建透明视频，你至少需要 Remotion 1.4 版本。确保不要设置任何背景（使用棋盘按钮确保你的视频是透明的）。为了渲染透明视频，你需要更改 3 个设置：

🌐 In order to create a transparent video, you need at least version 1.4 of Remotion. Make sure to not set any background (use the checkerboard button to ensure your video is transparent). In order to render your videos transparent, you need to change 3 settings:

  • 将每一帧渲染为 PNG。
  • 使用 VP8 或 VP9 编解码器
  • 使用 yuva420p 像素格式。

如果你想设置这些选项并保存它们，请将此添加到你的 remotion.config.ts 文件中（如果你还没有该文件，请创建它）；

🌐 If you want to set these options and persist them, add this to your remotion.config.ts file (create it if you don't yet have one);

import { Config } from "@remotion/cli/config";

Config.setVideoImageFormat("png");
Config.setPixelFormat("yuva420p");
Config.setCodec("vp8");

你也可以在命令行上设置这些选项：

🌐 You can also set the settings on the command line:

--image-format=png --pixel-format=yuva420p --codec=vp8

或者将它们设置为合成的默认导出设置：

🌐 or set them as the default export settings for a composition:


import { CalculateMetadataFunction } from "remotion";

const calculateMetadata: CalculateMetadataFunction<Props> = async ({
  props,
}) => {
  return {
    defaultCodec: "vp8",
    defaultVideoImageFormat: "png",
    defaultPixelFormat: "yuva420p",
  };
};

<Composition
  id="my-video"
  component={MyVideo}
  durationInFrames={150}
  fps={30}
  width={1920}
  height={1080}
  calculateMetadata={calculateMetadata}
/>;

创建带有 Alpha 通道的 ProRes 视频​

🌐 Creating a ProRes video with Alpha channels

如果你想导出用于其他视频编辑软件的透明视频，Apple ProRes 是一个更合适的选项。 ProRes 被 Final Cut Pro、Adobe Premiere 和 Davinci Resolve 支持。

🌐 If you want to export a transparent video for use in another video editing program, Apple ProRes is a more suitable option. ProRes is supported by Final Cut Pro, Adobe Premiere and Davinci Resolve.

自 v2.1.7 起支持，你可以将编解码器设置为 prores 并选择支持 alpha 的 ProRes 配置文件：4444 或 4444-xq。像素格式必须为 yuva444p10le。

🌐 Supported since v2.1.7, you can set the codec to prores and choose a ProRes profile with alpha support: Either 4444 or 4444-xq. The pixel format must be yuva444p10le.

import { Config } from "@remotion/cli/config";

Config.setVideoImageFormat("png");
Config.setPixelFormat("yuva444p10le");
Config.setCodec("prores");
Config.setProResProfile("4444");

你也可以在命令行上设置这些选项：

🌐 You can also set the settings on the command line:

--image-format=png --pixel-format=yuva444p10le --codec=prores --prores-profile=4444

或者将它们设置为合成的默认导出设置：

🌐 or set them as the default export settings for a composition:

import { CalculateMetadataFunction } from "remotion";

const calculateMetadata: CalculateMetadataFunction<Props> = async ({
  props,
}) => {
  return {
    defaultCodec: "prores",
    defaultVideoImageFormat: "png",
    defaultPixelFormat: "yuva444p10le",
    defaultProResProfile: "4444",
  };
};

<Composition
  id="my-video"
  component={MyVideo}
  durationInFrames={150}
  fps={30}
  width={1920}
  height={1080}
  calculateMetadata={calculateMetadata}
/>;

在使用 <OffthreadVideo> 时启用透明度​

🌐 Enabling transparency when using <OffthreadVideo>

默认情况下，<OffthreadVideo> 在导出时不会添加 alpha 图层。
添加 transparent 属性以标记视频具有 alpha 通道。
这会略微降低渲染性能。

🌐 By default, the <OffthreadVideo> does not add an alpha layer during export.
Add the transparent prop to flag that the video has an alpha channel.
This slightly reduces the performance of the render.

创建回退版本​

🌐 Creating a fallback version

鉴于浏览器支持不佳，考虑制作两个版本的视频，一个带有 alpha 通道，另一个为不透明视频作为备用。你可以在 Remotion 中使用标准的 React 属性来实现这一点：

🌐 Given the poor browser support, consider making two versions of a video, one with alpha channel, and an opaque video as a fallback. You can achieve this in Remotion using standard React props:

const MyVideo: React.FC<{
  transparent: boolean;
}> = ({transparent}) => {
  return (
    <div style={{backgroundColor: transparent ? undefined : 'white', flex: 1}}>
      {/* Omit opaque background based on `transparent` prop */}
    </div>
  )
}

在定义组合时设置默认值是一种好做法：

🌐 It's a good practice to set a default when defining the composition:

<Composition
  id="my-video"
  component={MyVideo}
  width={1920}
  height={1080}
  fps={30}
  durationInFrames={150}
  defaultProps={{
    transparent: true,
  }}
/>;

然后你可以在你的 package.json 中有单独的渲染命令：

🌐 You can then have separate render commands in your package.json:

"scripts": {
  "render": "remotion render my-video video.mp4",
  "render-transparent": "remotion render --image-format=png --pixel-format=yuva420p --codec=vp8 my-video video-transparent.webm"
}

现在你可以渲染同一个视频的两个版本，并根据浏览器的支持情况提供不同的版本。你可以使用像 <source> 这样的 API 或 canplay 事件来以编程方式确定浏览器是否能够播放视频。

🌐 Now you can render two variants of the same video and serve a different one based on browser support. You can use APIs like <source> or the canplay event to determine programmatically if a browser is able to play a video.

另请参阅​

🌐 See also

Last updated on