Skip to main content

Jump Cutting

You might wanna use a "jump cut" to skip parts of a video.
Use the following snippet to skip certain sections of a video, without re-mounting it.

tsx
import React, {useMemo} from 'react';
import {CalculateMetadataFunction, OffthreadVideo, staticFile, useCurrentFrame} 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 frame = useCurrentFrame();
 
  const trimBefore = useMemo(() => {
    let summedUpDurations = 0;
    for (const section of sections) {
      summedUpDurations += section.trimAfter - section.trimBefore;
      if (summedUpDurations > frame) {
        return section.trimAfter - summedUpDurations;
      }
    }
 
    return null;
  }, [frame, sections]);
 
  if (trimBefore === null) {
    return null;
  }
 
  return (
    <OffthreadVideo
      pauseWhenBuffering
      trimBefore={trimBefore}
      // Remotion will automatically add a time fragment to the end of the video URL
      // based on `trimBefore` and `trimAfter`. Opt out of this by adding one yourself.
      // https://www.remotion.dev/docs/media-fragments
      src={`${staticFile('time.mp4')}#t=0,`}
    />
  );
};

See also​