质量指南

视频编码涉及大量压缩视频数据以减小文件大小，这是一个有损过程。
本文档解释了一些可以用来控制视频质量的因素和设置。

CRF

控制视频质量的主要设置是恒定码率因子（CRF）。
在 Remotion 中渲染视频的所有方式都允许传递一个 CRF 值。允许的值取决于编解码器。

分辨率（文本不清晰）

一个令人惊讶的失去质量的方式是许多计算机具有高密度显示，但视频的尺寸并未考虑到这一点。

考虑一个 1920x1080 的视频，在其中渲染文本：

tsx
import { Composition } from "remotion";
 
const MyComponent = () => {
  return <div>Hello World</div>;
};
 
const Root: React.FC = () => {
  return (
    <Composition
      width={1920}
      height={1080}
      fps={30}
      durationInFrames={100}
      component={MyComponent}
      id="MyComp"
    />
  );
};

tsx
import { Composition } from "remotion";
 
const MyComponent = () => {
  return <div>Hello World</div>;
};
 
const Root: React.FC = () => {
  return (
    <Composition
      width={1920}
      height={1080}
      fps={30}
      durationInFrames={100}
      component={MyComponent}
      id="MyComp"
    />
  );
};

如果将其渲染并嵌入到网页中的视频：

html
<video src="video.mp4" width="1920" height="1080"></video>

html
<video src="video.mp4" width="1920" height="1080"></video>

如果在高密度显示器上显示视频（如 MacBook），文本将不够清晰。
这是因为设备具有 2x 像素密度，但视频是 1920x1080，这意味着每个像素比设备的像素大 2 倍。
要以与低密度显示器上相同的清晰度显示字体，您需要渲染一个 4K 视频。

使用输出缩放以更高的像素密度渲染视频。

JPEG 质量

Remotion 默认以 JPEG 格式对浏览器页面进行截图。
JPEG 质量默认为 80（在 0 到 100 的范围内）。
您可以使用 --jpeg-quality 标志进行调整，或者使用 --image-format=png 切换到 PNG 作为图像格式（速度较慢）。

色彩准确性

将您的视频导出为 bt709 以获得更准确的颜色。

note

这将成为 Remotion 5.0 的默认设置。

GIF 颜色

确保您至少使用 Remotion 版本 v4.0.138 以获得最佳的颜色准确性。
GIF 只支持 256 种颜色调色板，这会导致严重的质量损失。接受它，或者如果不可接受，请选择其他格式。

视频比特率

您可以使用 --video-bitrate 标志来控制视频的比特率。
它与 --crf 选项是互斥的，这意味着您不能同时使用两者。

x264 预设

在导出 H.264 视频时，您可以使用 --x264-preset 标志来控制质量/速度/压缩的权衡。

CRF​

分辨率（文本不清晰）​

JPEG 质量​

色彩准确性​

GIF 颜色​

视频比特率​

x264 预设​

CRF