Chapter 238: Different segments at different speeds

Core Idea

If you have a video and want to show different sections of the video at different speeds, use the following snippet.

Key Concepts

• See also

Code Examples

const src = 'https://remotion.media/video.mp4';

const segments = [
  {
    duration: 60,
    speed: 0.5,
  },
  {
    duration: 60,
    speed: 1,
  },
  {
    duration: 120,
    speed: 2,
  },
  {
    duration: 60,
    speed: 4,
  },
];

type AccumulatedSegment = {
  start: number;
  passedVideoTime: number;
  end: number;
  speed: number;
};

export const accumulateSegments = () => {
  const accumulatedSegments: AccumulatedSegment[] = [];
  let accumulatedDuration = 0;
  let accumulatedPassedVideoTime = 0;

  for (const segment of segments) {
    const duration = segment.duration / segment.speed;
    accumulatedSegments.push({
      end: accumulatedDuration + duration,
      speed: segment.speed,
      start: accumulatedDuration,
      passedVideoTime: accumulatedPassedVideoTime,
    });

    accumulatedPassedVideoTime += segment.duration;
    accumulatedDuration += duration;
  }

  return accumulatedSegments;
};

const accumulatedSegments = accumulateSegments();

export const DIFFERENT_SEGMENTS_AT_DIFFERENT_SPEEDS_DURATION = Math.ceil(
  accumulatedSegments[accumulatedSegments.length - 1].end,
);

export const SpeedSegments: React.FC = () => {
  const {fps} = useVideoConfig();

  return (
    <AbsoluteFill style={{backgroundColor: 'black'}}>
      <Series>
        {accumulatedSegments.map((segment) => (
          <Series.Sequence
            key={segment.start}
            d
// ...(truncated)

• What it demonstrates: Usage pattern for Different segments at different speeds from the official docs.

Key Takeaways

1. Understand see also when working with Different segments at different speeds.

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.