Chapter 239: Jump Cutting

Core Idea

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

Key Concepts

• Best practice: Pre-mounting multiple video tags
• See also

Code Examples

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

• What it demonstrates: Usage pattern for Jump Cutting from the official docs.

Key Takeaways

1. Understand best practice: pre-mounting multiple video tags when working with Jump Cutting.
2. Understand see also when working with Jump Cutting.

Connects To

• Animatedimage: related page in the Assets & Media section.
• Delaying: related page in the Assets & Media section.
• Exporting: related page in the Assets & Media section.