Skip to main content

避免在 <Player>中闪烁

考虑以下标记：

🌐 Consider the following markup:

MyComponent.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 只有在开始出现在场景中时才会开始加载。这可能会在播放器中导致一些帧为空的效果，因为视频的加载通常不会立即完成。

🌐 Since Remotion is only aware of the current frame, the video with the source video2.mp4 will only start loading once it starts appearing in the scene. This can lead to an effect in the Player where some frames will be empty, since the loading of the video will usually not complete immediately.

这是 Remotion 的设计权衡，但可以通过不同程度的激进性来应对。

🌐 This is a design tradeoff of Remotion, but can be fought with different levels of aggression.

策略​

🌐 Strategies

选项 1：忽略​

🌐 Option 1: Ignore

此效果仅在 Remotion Studio 和 Remotion Player 中出现，在渲染的视频中不会出现。如果你只是在寻找帧完美的渲染视频，则无需采取额外步骤。

🌐 This effect is only happening in the Remotion Studio and the Remotion Player, and will not appear in the rendered video. If you are only looking for a frame-perfect rendered video, you do not need to take additional steps.

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

🌐 Option 2: Pause the <Player /> when media is buffering

推荐：这将在 Remotion 5.0 中成为默认行为

你可能需要暂时暂停 <Player> 以便加载资源，并在资源准备好播放后恢复。

🌐 You may want to pause the <Player> temporarily to allow loading of the assets and resume once the assets are ready for playback.

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

🌐 You can do so by adding a pauseWhenBuffering prop to your <Html5Video>, <OffthreadVideo>, <Html5Audio> and <Img> tags. Learn more about the buffer state.

note

pauseWhenBuffering 属性在 @remotion/media 的 <Video> 和 <Audio> 中默认启用。

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

🌐 Option 3: Premounting the videov4.0.140

推荐：这是最有效的解决方案。

你可以在序列开始出现的几帧之前进行挂载。 这样可以在用户看到它之前给它时间加载，这有助于避免闪烁。

🌐 You can mount a sequence a few frames earlier than when it starts to appear.
This will give it time to load before it is visible to the user, which can help to avoid flickering.

参见 Premounting 了解示例。

🌐 See Premounting for an example.

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

🌐 Option 4: Preloading to avoid network request

推荐：这有助于减少网络加载时间。

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

🌐 You may signal to the browser to preload videos and other assets, so that when the embedded element appears in the video, it can save the network request.

请参阅 预加载 了解如何实现此操作的说明。

🌐 See Preloading for instructions on how to achieve this.

note

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

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

🌐 Option 5: Prefetching as blob URL to more aggressively avoid network request

不推荐：内存消耗大，只有在播放器挂载前预取时才有用，而且经常被滥用。

通过 预取 一个资源，它将被下载并缓存到内存中。
与预加载不同，你会强制浏览器下载该资源，然而，只有当资源完全下载后，你才能使用它。

🌐 By prefetching an asset, it will be downloaded and cached into memory.
Unlike preloading, you force the browser to download the asset, however, you can only use the loaded asset once it has fully downloaded.

一旦完全下载，媒体标签中的 URL 将被替换为 blob URL。
你必须确保在播放过程中 URL 不被替换，否则播放可能会变得更差。

🌐 Once fully downloaded, URLs in media tags will be replaced with blob URLs.
You must ensure that URLs are not replaced inmidst playback, otherwise playback may become worse.

只有在预取完成且媒体元素被挂载之前，这才有意义。

🌐 It only makes sense if the prefetching finished before the media element is mounted.

note

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

选项6：将预取内容以Base64形式存储，以避免网络请求和本地HTTP服务器​

🌐 Option 6: Prefetching as Base64 to avoid network request and local HTTP server

不推荐：与预取相同的缺点，但对性能有额外影响，尤其是对于大型资源。

在 Safari 中，如 Option

5
所描述的预取是不够的，因为 Blob URL 会被保存到磁盘，即使资源已预先保存，仍可能会发生轻微的延迟。

或者，prefetch() 函数允许获取一个资源并将其以 Base64 的形式保存在内存中，这不需要通过 HTTP 从磁盘加载 blob URL。

🌐 Alternatively, the prefetch() function allows to fetch an asset and save it in memory as Base64, which does not require the blob URL to be loaded from disk through HTTP.

另请参阅​

🌐 See also

Last updated on