Skip to main content

Different segments at different speeds

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

SegmentSpeeds.tsx
import {Video} from '@remotion/media'; import React from 'react'; import {AbsoluteFill, Series, useVideoConfig} from 'remotion'; 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} durationInFrames={segment.end - segment.start} premountFor={Math.round(1.5 * fps)} > <Video src={src} trimBefore={segment.passedVideoTime} playbackRate={segment.speed} /> </Series.Sequence> ))} </Series> </AbsoluteFill> ); };

See also