Setting the file. One moment.
Skill 01 · Remotion Best Practices
Subchapter 1.121
remotion-render/transparent-videos.mdMarkdown2 KBView on GitHub
Remotion can render transparent videos in two ways: as a ProRes video or as a WebM video.
Ideal for when importing into video editing software.
CLI:
npx remotion render --image-format=png --pixel-format=yuva444p10le --codec=prores --prores-profile=4444 MyComp out.movDefault in Studio (restart Studio after changing):
// remotion.config.ts
import { Config } from "@remotion/cli/config";
Config.setVideoImageFormat("png");
Config.setPixelFormat("yuva444p10le");
Config.setCodec("prores");
Config.setProResProfile("4444");Setting it as the default export settings for a composition (using calculateMetadata):
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}
/>;Ideal for when playing in a browser.
CLI:
npx remotion render --image-format=png --pixel-format=yuva420p --codec=vp9 MyComp out.webmDefault in Studio (restart Studio after changing):
// remotion.config.ts
import { Config } from "@remotion/cli/config";
Config.setVideoImageFormat("png");
Config.setPixelFormat("yuva420p");
Config.setCodec("vp9");Setting it as the default export settings for a composition (using calculateMetadata):
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}
/>;