Skip to main content

客户端渲染的局限性

warning

非常实验性的功能——随时可能出现漏洞和重大更改。 在 GitHub 上跟踪进度 并在 Discord 的 #web-renderer 通道中讨论。

浏览器必须支持 WebCodecs API。请参见 浏览器支持 了解最低浏览器版本。

🌐 The browser must support the WebCodecs API. See Browser support for minimum browser versions.

与服务器端渲染不同，在服务器端渲染中会拍摄完整的截图，而在客户端渲染中，你的视频的布局和样式会被模拟并绘制到画布上。

🌐 Unlike server-side rendering, where a full screenshot it taken, in client-side rendering the layout and styles of your video are being emulated and drawn to a canvas.

支持页面所有 CSS 属性和影响视觉样式的因素是不切实际的，因此只支持最重要的样式原语。

🌐 It is not feasible to support all CSS properties and factors affecting the visual style of a page, so only the most important styling primitives are supported.

支持的 CSS 样式​

🌐 Supported CSS styles

定位和布局属性​

🌐 Positioning and layouting properties

像 margin、left、display、width、height、flex、flex-direction 这样的属性会影响元素的位置和大小。因为 Remotion 使用 .getBoundingClientRect() 来获取元素的位置和大小，所以这些都是 支持的 。

overflow 属性是 支持的。
object-fit 属性是 支持的。
object-position 属性是 不支持的 ，内容始终在其容器内居中。

变换​

🌐 Transformations

CSS transform 属性是 支持的。
transform-origin 属性是 支持的。
opacity 属性是 支持的。
scale、rotate 和 translate 变换是 支持的。
perspective 属性是 不支持的。
perspective-origin 属性是 不支持的。
transform-style 属性是 不支持的 （默认值为 preserve-3d，CSS 中的默认值为“平铺”）。
backface-visibility 属性是 支持的。

背景​

🌐 Backgrounds

background-color 属性是 支持的。
具有线性渐变的 background-image 是 支持的。
background-clip 属性是 支持的。
其他 background-image 值以及其他 background-* 属性 不支持。

边框和边框圆角​

🌐 Borders and border radius

border、border-style、border-color、border-width 属性是 支持的。
border-radius 属性是 支持的，包括垂直半径和水平半径的不同值。
corner-shape 属性是 不支持的。
outline 属性是 支持的。

文本属性​

🌐 Text properties

color 属性是 支持的。
-webkit-text-fill-color 属性是 支持的。
font-family 属性是 支持的。
font-size 属性是 支持的。
font-style 属性是 支持的。
font-weight 属性是 支持的。
line-height 属性是 支持的。
letter-spacing 属性是 支持的。
text-transform 属性是 支持的。
direction HTML 属性是 支持的。
writing-mode 属性是 不支持的。
text-decoration 属性是 不支持的。
text-shadow 属性是 支持的。
-webkit-text-stroke、-webkit-text-stroke-color、-webkit-text-stroke-width、paint-order 属性是 支持的。

阴影​

🌐 Shadows

基本的 box-shadow 是 支持的。 inset 阴影是不 支持的。 “扩散半径”是不 支持的。

口罩​

🌐 Masks

mask-image 带有线性渐变是 支持的。
其他 mask-image 值是 不支持的。

支持的元素​

🌐 Supported elements

支持以下 Remotion 组件：

🌐 The following Remotion components are supported:

来自@remotion/media的<Video>是 支持的。
来自@remotion/media的<Audio>是 支持的。
<Img>是 支持的。
来自@remotion/gif的<Gif>是 支持的。
来自@remotion/rive的<Rive>是 支持的。
来自@remotion/lottie的<Lottie>是 支持的。
来自@remotion/three的<ThreeCanvas>是 支持的。
来自@remotion/skia的<SkiaCanvas>是 支持的。
<AnimatedImage>在Chrome中渲染时是 支持的 。
<OffthreadVideo>是 不支持的。
→ 改用<Video>。
<Html5Video>是 不支持的。
→ 改用<Video>。
<Html5Audio>是 不支持的。
→ 改用<Audio>。
来自@remotion/animated-emoji的<AnimatedEmoji>是 不支持的。
→ 改用<Lottie>。

不支持的样式​

🌐 Unsupported styles

所有未明确提及的样式 不受支持。 以下是一些不受支持的样式示例：

  • clip-path
  • filter（模糊、亮度、对比度等）
  • backdrop-filter
  • mix-blend-mode
  • background-blend-mode
  • z-index
  • 本文件中未列出的任何其他属性。

随着时间的推移，我们将支持更多的元素和样式。我们将优先考虑需求最多的那些。
查看你如何贡献以添加更多支持的样式。

🌐 Over time, we will support more elements and styles. We'll prioritize the most demanded ones.
See how you can contribute to add more supported styles.

层叠顺序​

🌐 Z-indexing

CSS 属性 z-index 不受支持。 要控制元素的顺序，请将元素按照从后到前的顺序排列。

🌐 The CSS property z-index is not supported.
To control the order of the elements, order your elements from back to front.

The blue square will be drawn on top of the red square
const MyComp = () => {
  return (
    <AbsoluteFill>
      <AbsoluteFill>
        <svg viewBox="0 0 100 100">
          <rect x="0" y="0" width="100" height="100" fill="red" />
        </svg>
      </AbsoluteFill>
      <AbsoluteFill>
        <svg viewBox="0 0 100 100">
          <rect x="0" y="0" width="100" height="100" fill="blue" />
        </svg>
      </AbsoluteFill>
    </AbsoluteFill>
  );
};

视频和媒体限制​

🌐 Video and media constraints

适用于@remotion/media的限制。

🌐 The limitations from @remotion/media apply.

Firefox 不支持 AAC 编码​

🌐 Firefox does not support AAC encoding

Firefox 不支持通过 WebCodecs 编码 AAC 音频。在 Firefox 中渲染时，请使用 Opus 音频（WebM 容器）而不是 AAC（MP4 容器）。

🌐 Firefox does not support encoding AAC audio via WebCodecs. When rendering in Firefox, use Opus audio (WebM container) instead of AAC (MP4 container).

单一并发​

🌐 Single concurrency

客户端渲染没有多线程。
然而，它从根本上更高效，因为进程间通信更少。
此外，在有图形界面的浏览器中，通常可以使用 GPU，这带来了性能优势。

🌐 There is no multithreading for client-side rendering.
However, it is fundamentally more efficient because there is less interprocess communication.
In addition, in the headful browser, GPU is usually available, which brings performance benefits.

后台标签​

🌐 Background tabs

当运行渲染的浏览器标签页被移到后台时，浏览器会限制 requestAnimationFrame 以节省资源。这可能导致渲染暂停或明显变慢。

🌐 When the browser tab running the render is moved to the background, browsers throttle requestAnimationFrame to conserve resources. This could cause rendering to pause or slow down significantly.

Remotion 会通过使用 Web Worker 定时器作为备用自动解决这个问题。当标签页被置于后台且 RAF 被限制时，Worker 定时器会接管以保持渲染进度。

🌐 Remotion automatically works around this by using a Web Worker timer as a fallback. When the tab is backgrounded and RAF is throttled, the Worker timer takes over to keep the render progressing.

Worker 定时器的精确度不如 requestAnimationFrame，因此在后台标签页中渲染会比在前台标签页中更慢。为了获得最佳性能，请在渲染时保持标签页可见。

🌐 The Worker timer is less precise than requestAnimationFrame, so rendering in a background tab will be slower than in a foreground tab. For best performance, keep the tab visible during rendering.

另请参阅​

🌐 See also

Last updated on