Docs: Jumpcuts + Different segments at different speeds

packages/docs/docs/miscellaneous/snippets/accelerated-video.mdx

@@ -23,7 +23,7 @@ The correct way is to calculate the total time that has elapsed until the curren
 
 ```tsx twoslash title="✅ AcceleratedVideo.tsx"
 import React from 'react';
-import {interpolate, Sequence, useCurrentFrame, Video} from 'remotion';
+import {interpolate, Sequence, useCurrentFrame, OffthreadVideo} from 'remotion';
 
 const remapSpeed = (frame: number, speed: (fr: number) => number) => {
   let framesPassed = 0;
@@ -43,7 +43,7 @@ export const AcceleratedVideo: React.FC = () => {
 
   return (
     <Sequence from={frame}>
-      <Video
+      <OffthreadVideo
         startFrom={Math.round(remappedFrame)}
         playbackRate={speedFunction(frame)}
         src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4#disable"
@@ -65,4 +65,6 @@ Note that the timeline in the Remotion Studio might move as you play the video b
 
 ## See also
 
-- [`<Video>`](/docs/video)
+- [`<OffthreadVideo>`](/docs/video)
+- [Different segments at different speeds](/docs/miscellaneous/snippets/different-segments-at-different-speeds)
+- [Jump Cutting](/docs/miscellaneous/snippets/jumpcuts)

packages/docs/docs/miscellaneous/snippets/different-segments-at-different-speeds.mdx

@@ -0,0 +1,90 @@
+---
+image: /generated/articles-docs-miscellaneous-snippets-different-segments-at-different-speeds.png
+title: 'Different segments at different speeds'
+crumb: 'Snippets'
+---
+
+If you have a video and want to show different sections of the video at different speeds, use the following snippet.
+
+```tsx twoslash title="SegmentSpeeds.tsx"
+import {OffthreadVideo, Sequence, staticFile, useCurrentFrame} from 'remotion';
+
+const segments = [
+  {
+    duration: 100,
+    speed: 0.5,
+  },
+  {
+    duration: 100,
+    speed: 1,
+  },
+  {
+    duration: 200,
+    speed: 2,
+  },
+  {
+    duration: 400,
+    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;
+};
+
+export const SpeedSegments = () => {
+  const frame = useCurrentFrame();
+  const accumulated = accumulateSegments();
+
+  const currentSegment = accumulated.find(
+    (segment) => frame > segment.start && frame <= segment.end,
+  );
+
+  if (!currentSegment) {
+    return;
+  }
+
+  return (
+    <Sequence from={currentSegment.start}>
+      <OffthreadVideo
+        pauseWhenBuffering
+        startFrom={currentSegment.passedVideoTime}
+        // Remotion will automatically add a time fragment to the end of the video URL
+        // based on `startFrom`. Opt out of this by adding one yourself.
+        // https://www.remotion.dev/docs/media-fragments
+        src={`${staticFile('bigbuckbunny.mp4')}#t=0,`}
+        playbackRate={currentSegment.speed}
+      />
+    </Sequence>
+  );
+};
+```
+
+## See also
+
+- [Change the speed of a video over time](/docs/miscellaneous/snippets/accelerated-video)
+- [Jump Cutting](/docs/miscellaneous/snippets/jumpcuts)

packages/docs/docs/miscellaneous/snippets/jumpcuts.mdx

@@ -0,0 +1,87 @@
+---
+image: /generated/articles-docs-miscellaneous-snippets-jumpcuts.png
+title: 'Jump Cutting'
+crumb: 'Snippets'
+---
+
+```tsx twoslash
+import React, {useMemo} from 'react';
+import {
+  CalculateMetadataFunction,
+  OffthreadVideo,
+  staticFile,
+  useCurrentFrame,
+} from 'remotion';
+
+const fps = 30;
+
+type Section = {
+  startFrom: number;
+  endAt: number;
+};
+
+export const SAMPLE_SECTIONS: Section[] = [
+  {startFrom: 0, endAt: 5 * fps},
+  {
+    startFrom: 7 * fps,
+    endAt: 10 * fps,
+  },
+  {
+    startFrom: 13 * fps,
+    endAt: 18 * fps,
+  },
+];
+
+type Props = {
+  sections: Section[];
+};
+
+export const calculateMetadata: CalculateMetadataFunction<Props> = ({
+  props,
+}) => {
+  const durationInFrames = props.sections.reduce((acc, section) => {
+    return acc + section.endAt - section.startFrom;
+  }, 0);
+
+  return {
+    fps,
+    durationInFrames,
+  };
+};
+
+export const JumpCuts: React.FC<Props> = ({sections}) => {
+  const frame = useCurrentFrame();
+
+  const startFrom = useMemo(() => {
+    let summedUpDurations = 0;
+    for (const section of sections) {
+      summedUpDurations += section.endAt - section.startFrom;
+      if (summedUpDurations > frame) {
+        return section.endAt - summedUpDurations;
+      }
+    }
+
+    return null;
+  }, [frame, sections]);
+
+  if (startFrom === null) {
+    return null;
+  }
+
+  return (
+    <OffthreadVideo
+      pauseWhenBuffering
+      startFrom={startFrom}
+      // Remotion will automatically add a time fragment to the end of the video URL
+      // based on `startFrom` and `endAt`. Opt out of this by adding one yourself.
+      // https://www.remotion.dev/docs/media-fragments
+      src={`${staticFile('time.mp4')}#t=0,`}
+    />
+  );
+};
+```
+
+## See also
+
+- [Different segments at different speeds](/docs/miscellaneous/snippets/different-segments-at-different-speeds)
+- [Change the speed of a video over time](/docs/miscellaneous/snippets/accelerated-video)

packages/docs/sidebars.js

@@ -906,6 +906,8 @@ module.exports = {
 			label: 'Snippets',
 			items: [
 				'miscellaneous/snippets/accelerated-video',
+				'miscellaneous/snippets/different-segments-at-different-speeds',
+				'miscellaneous/snippets/jumpcuts',
 				'miscellaneous/snippets/player-in-iframe',
 				'miscellaneous/snippets/use-delay-render',
 				'miscellaneous/snippets/offthread-video-while-rendering',

packages/docs/src/data/articles.ts

@@ -1610,13 +1610,29 @@ export const articles = [
 		compId: 'articles-docs-miscellaneous-snippets-accelerated-video',
 		crumb: 'Snippets',
 	},
+	{
+		id: 'miscellaneous/snippets/jumpcuts',
+		title: 'Jump Cutting',
+		relativePath: 'docs/miscellaneous/snippets/jumpcuts.mdx',
+		compId: 'articles-docs-miscellaneous-snippets-jumpcuts',
+		crumb: 'Snippets',
+	},
 	{
 		id: 'hls',
 		title: 'HLS support (HTTP Live Streaming)',
 		relativePath: 'docs/miscellaneous/snippets/hls.mdx',
 		compId: 'articles-docs-miscellaneous-snippets-hls',
 		crumb: 'Video',
 	},
+	{
+		id: 'miscellaneous/snippets/different-segments-at-different-speeds',
+		title: 'Different segments at different speeds',
+		relativePath:
+			'docs/miscellaneous/snippets/different-segments-at-different-speeds.mdx',
+		compId:
+			'articles-docs-miscellaneous-snippets-different-segments-at-different-speeds',
+		crumb: 'Snippets',
+	},
 	{
 		id: 'miscellaneous/snippets/offthread-video-while-rendering',
 		title: '<OffthreadVideo /> while rendering',