透明视频
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
constMyVideo :React .FC <{transparent : boolean;}> = ({transparent }) => {return (<div style ={{backgroundColor :transparent ?undefined : 'white',flex : 1}}>{/* Omit opaque background based on `transparent` prop */}</div >)}
tsx
constMyVideo :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 来以编程方式确定浏览器是否能够播放视频。