Skip to main content

Jump Cutting

Sometimes you want to implement a "jump cut" to skip parts of a video (for example to cut out the "uhm"s).

Best practice: Pre-mounting multiple video tags​

The recommended approach for smooth jump-cut playback in the browser is to pre-mount a separate <Video> from @remotion/media tag for each section using <Series> with a premountFor prop. This gives the browser time to preload each segment before it starts playing.

JumpCuts.tsx
import {Video} from '@remotion/media';
import React from 'react';
import {CalculateMetadataFunction, Series, staticFile, useVideoConfig} from 'remotion';

const fps = 30;

type Section = {
  trimBefore: number;
  trimAfter: number;
};

export const SAMPLE_SECTIONS: Section[] = [
  {trimBefore: 0, trimAfter: 5 * fps},
  {trimBefore: 7 * fps, trimAfter: 10 * fps},
  {trimBefore: 13 * fps, trimAfter: 18 * fps},
];

type Props = {
  sections: Section[];
};

export const calculateMetadata: CalculateMetadataFunction<Props> = ({props}) => {
  const durationInFrames = props.sections.reduce((acc, section) => {
    return acc + section.trimAfter - section.trimBefore;
  }, 0);

  return {
    fps,
    durationInFrames,
  };
};

export const JumpCuts: React.FC<Props> = ({sections}) => {
  const {fps: videoFps} = useVideoConfig();

  return (
    <Series>
      {sections.map((section, i) => (
        <Series.Sequence
          // Premount the next segment for 1.5 seconds so it can preload before it starts playing
          premountFor={Math.round(1.5 * videoFps)}
          key={i}
          durationInFrames={section.trimAfter - section.trimBefore}
        >
          <Video trimBefore={section.trimBefore} trimAfter={section.trimAfter} src={staticFile('time.mp4')} />
        </Series.Sequence>
      ))}
    </Series>
  );
};
note

These considerations apply only to smooth previews in the browser.
During rendering, video frames are selected exactly, so premounting is only needed for smoother browser preview playback.

See also​