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.tsximport {Video } from '@remotion/media'; importReact from 'react'; import {AbsoluteFill ,Series ,useVideoConfig } from 'remotion'; constsrc = 'https://remotion.media/video.mp4'; constsegments = [ {duration : 60,speed : 0.5, }, {duration : 60,speed : 1, }, {duration : 120,speed : 2, }, {duration : 60,speed : 4, }, ]; typeAccumulatedSegment = {start : number;passedVideoTime : number;end : number;speed : number; }; export constaccumulateSegments = () => { constaccumulatedSegments :AccumulatedSegment [] = []; letaccumulatedDuration = 0; letaccumulatedPassedVideoTime = 0; for (constsegment ofsegments ) { constduration =segment .duration /segment .speed ;accumulatedSegments .push ({end :accumulatedDuration +duration ,speed :segment .speed ,start :accumulatedDuration ,passedVideoTime :accumulatedPassedVideoTime , });accumulatedPassedVideoTime +=segment .duration ;accumulatedDuration +=duration ; } returnaccumulatedSegments ; }; constaccumulatedSegments =accumulateSegments (); export constDIFFERENT_SEGMENTS_AT_DIFFERENT_SPEEDS_DURATION =Math .ceil (accumulatedSegments [accumulatedSegments .length - 1].end , ); export constSpeedSegments :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 > ); };