Skip to main content

<Player> 中避免闪烁

考虑以下标记：

MyComponent.tsx
tsx
import { AbsoluteFill, Sequence, OffthreadVideo } from "remotion";
 
const MyComponent: React.FC = () => {
  return (
    <AbsoluteFill>
      <Sequence from={0} durationInFrames={120}>
        <OffthreadVideo src="https://example.com/video1.mp4" />
      </Sequence>
      <Sequence from={120} durationInFrames={120}>
        <OffthreadVideo src="https://example.com/video2.mp4" />
      </Sequence>
    </AbsoluteFill>
  );
};
MyComponent.tsx
tsx
import { AbsoluteFill, Sequence, OffthreadVideo } from "remotion";
 
const MyComponent: React.FC = () => {
  return (
    <AbsoluteFill>
      <Sequence from={0} durationInFrames={120}>
        <OffthreadVideo src="https://example.com/video1.mp4" />
      </Sequence>
      <Sequence from={120} durationInFrames={120}>
        <OffthreadVideo src="https://example.com/video2.mp4" />
      </Sequence>
    </AbsoluteFill>
  );
};

由于 Remotion 只知道当前帧，具有源 video2.mp4 的视频只会在出现在场景中时开始加载。这可能导致播放器中的某些帧为空，因为视频的加载通常不会立即完成。

这是 Remotion 的设计权衡，但可以通过不同程度的侵略来对抗。

策略​

选项 1：忽略​

这种效果仅在 Remotion Studio 和 Remotion Player 中发生，不会出现在渲染的视频中。如果您只想要一个帧完美的渲染视频，您无需采取额外步骤。

选项 2：在媒体缓冲时暂停 <Player />​

您可能希望暂时暂停 <Player>，以允许资产加载，并在资产准备好播放时恢复。

您可以通过向您的 <OffthreadVideo>、<OffthreadVideo>、<Audio> 和 <Img> 标签添加 pauseWhenBuffering 属性来实现这一点。了解有关缓冲状态的更多信息。

选项 3：预加载以避免网络请求​

您可以向浏览器发出信号，预加载视频和其他资产，以便当嵌入元素出现在视频中时，可以节省网络请求。

请参阅 预加载 以了解如何实现此目的。

note

您向浏览器发出的信号可能会被忽略，例如，如果设备启用了数据节省或电池节省模式。这特别是移动设备的一个问题。

选项 4：预挂载视频v4.0.140​

您可以在视频开始出现之前几帧挂载一个序列。
这将为其加载提供时间，使其在对用户可见之前加载，有助于避免闪烁。

请参阅预挂载以查看示例。

选项 5：将预取作为 Blob URL 更积极地避免网络请求​

通过预取资产，它将被下载并缓存在内存中。与预加载不同，您强制浏览器下载资产，但是只有在资产完全下载后才能使用加载的资产。

note

即使预加载的资产或预取的资产也需要在 DOM 中挂载并由浏览器解码，这可能需要一小段时间。

选项 6：将预取作为 Base64 以避免网络请求和本地 HTTP 服务器​

在 Safari 中，如选项

5
中描述的预取还不够，因为 Blob URL 将保存到磁盘上，即使资产已经预先保存，仍可能会出现轻微延迟。

或者，prefetch() 函数允许获取资产并将其保存在内存中作为 Base64，这不需要通过 HTTP 从磁盘加载 Blob URL。

另请参阅​