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 配置文件:4444hq。像素格式必须是 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 来以编程方式确定浏览器是否能够播放视频。

参见