import {NoPremounting} from '../../components/Premounting/NoPremounting'; import {Premounting} from '../../components/Premounting/Premounting';

Premounting<AvailableFrom v="4.0.140"/>

Remotion only ever renders the current frame.
This means when a video or another asset is about to come up, it is not loaded by default.

:::note Even though the video is soon about to appear, it is not yet loaded because Remotion only ever renders the current time. :::

What is premounting?

Premounting is the practice of mounting a component containing assets earlier to allow assets some time to load before they appear.

:::note The video is mounted earlier to give it some time to load.

It carries the style <code>opacity: 0</code> to make it invisible. It's time defined by{' '}<a href="/docs/use-current-frame"><code>useCurrentFrame()</code></a>{' '}is frozen at <code>0</code>. :::

Premounting components

From v5.0, all <Sequence> components are premounted for 1 second (fps frames) by default. You can opt out by passing premountFor={0}.

In v4, add the premountFor prop to the <Sequence> component to enable premounting.

<Video> and <Audio> from @remotion/media accept premountFor directly from <AvailableFrom v="4.0.495" inline />. They remain layoutless, carry display: none while premounted and register the premounted range in the Studio timeline.

The number you pass is the number in frames you premount the component for.

tsx

import {Video} from '@remotion/media';
import {staticFile} from 'remotion';

// ---cut---
const MyComp: React.FC = () => {
  return (
    <Video
      from={100}
      premountFor={100}
      src={staticFile('bigbuckbunny.mp4')}
    />
  );
};

In the Remotion Studio, a premounted component is indicated with diagonal stripes:

A premounted <Sequence> does carry the styles opacity: 0 and pointer-events: none.

It is not possible to premount a <Sequence> with layout="none" because such a sequence does not have a container to apply the styles to.

With `<Series>` and `<TransitionSeries>`

premountFor is also available on <Series.Sequence> and <TransitionSeries.Sequence>.
It is not yet possible to premount a whole <Series> or <TransitionSeries>.

Custom premount component

Premounting can also be implemented yourself with the public Remotion APIs.
Use the following component like you would <Sequence>:

tsx

import React, {forwardRef, useMemo} from 'react';
import {Freeze, Sequence, SequenceProps, useCurrentFrame, useRemotionEnvironment} from 'remotion';

export type PremountedSequenceProps = SequenceProps & {
  premountFor: number;
};

const PremountedSequenceRefForwardingFunction: React.ForwardRefRenderFunction<
  HTMLDivElement,
  {
    premountFor: number;
  } & SequenceProps
> = ({premountFor, ...props}, ref) => {
  const frame = useCurrentFrame();

  if (props.layout === 'none') {
    throw new Error('`<Premount>` does not support layout="none"');
  }

  const env = useRemotionEnvironment();

  const {style: passedStyle, from = 0, ...otherProps} = props;
  const active = frame < from && frame >= from - premountFor && !env.isRendering;

  const style: React.CSSProperties = useMemo(() => {
    return {
      ...passedStyle,
      opacity: active ? 0 : 1,
      // @ts-ignore Only in the docs - it will not give a type error in a Remotion project
      pointerEvents: active ? 'none' : (passedStyle?.pointerEvents ?? 'auto'),
    };
  }, [active, passedStyle]);

  return (
    <Freeze frame={from} active={active}>
      <Sequence ref={ref} name={`<PremountedSequence premountFor={${premountFor}}>`} from={from} style={style} {...otherProps} />
    </Freeze>
  );
};

export const PremountedSequence = forwardRef(PremountedSequenceRefForwardingFunction);

:::note One caveat of this custom component: In a premounted sequence, the native buffer state can still be triggered.
It is your task to disable triggering the native buffer state (e.g. set pauseWhenBuffering to false) when in a premounted sequence. You can achieve this for example by using a React context. :::

Usage together with the buffer state

If you also use the buffer state, <Video> and <Audio> from @remotion/media, as well as <Html5Audio>, <Html5Video>, <OffthreadVideo>, and ``, are aware of premounting and don't trigger the buffer state while in a premounted <Sequence>.

Otherwise it would lead to pausing playback while a scene is not even visible yet.

Premounting