Skip to main content

Avoiding flickering in <Player>

Consider the following markup:

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>
  );
};

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.

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

Strategies​

Option 1: Ignore​

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.

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

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

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

Option 3: 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

The signal that you give to the browser may be ignored, for example if the device has data saver or battery saver mode enabled. This is specifically a concern for mobile devices.

Option 4: 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.

See Premounting for an example.

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.

note

Even a preloaded asset or prefetched needs to be mounted in the DOM and be decoded by the browser, which can take a short amount of time.

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

In Safari prefetching as described in Option

5
is not enough, since the Blob URL will be saved to disk and a slight delay may still occur even if the asset is pre-saved.

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​