Skip to main content

透明视频

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

如果您有幸在其中一个支持的 Web 浏览器中访问该网站，请查看：

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

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

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

如果您想设置这些选项并使其持久化，请将以下内容添加到您的 remotion.config.ts 文件中（如果尚未创建，请创建）；

tsx
import { Config } from "@remotion/cli/config";
 
Config.setVideoImageFormat("png");
Config.setPixelFormat("yuva420p");
Config.setCodec("vp8");
tsx
import { Config } from "@remotion/cli/config";
 
Config.setVideoImageFormat("png");
Config.setPixelFormat("yuva420p");
Config.setCodec("vp8");

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

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

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

如果您想要导出透明视频以在另一个视频编辑程序中使用，Apple ProRes 是一个更合适的选项。 ProRes 受 Final Cut Pro、Adobe Premiere 和 Davinci Resolve 支持。

从 v2.1.7 开始支持，您可以将编解码器设置为 prores 并选择具有 alpha 支持的 ProRes 配置文件：4444 或 hq。像素格式必须是 yuva444p10le。

tsx
import { Config } from "@remotion/cli/config";
 
Config.setVideoImageFormat("png");
Config.setPixelFormat("yuva444p10le");
Config.setCodec("prores");
Config.setProResProfile("4444");
tsx
import { Config } from "@remotion/cli/config";
 
Config.setVideoImageFormat("png");
Config.setPixelFormat("yuva444p10le");
Config.setCodec("prores");
Config.setProResProfile("4444");

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

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

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

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

创建备用版本​

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

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

在定义合成时设置默认值是一个好习惯：

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

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

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"
}
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> 或 canplay 事件这样的 API 来以编程方式确定浏览器是否能够播放视频。

参见​