Turn AcceleratedVideo example into a documentation page

[JonnyBurger]

I just wrote the following Discord message about how to accelerate the speed of a video over time:

hey @BenK#3758! this is a good idea in theory, the reason it doesn't work though is that this violates a remotion rule that requires each frame having to render the same in isolation regardless of which frames came before it or come after it.

let's say we render frame 100, the component would render and it would determine the playbackRate to be 2, but remotion doesn't realize that the playbackrate was interpolated from 1 to 2. therefore it renders as it the whole video was played at 2x speed, leading to a choppy video.

to make the code declarative, we have to count together how much of the video has passed by adding together all the playback rates we had of the previous frames, and start the video at this position, and then we can pass the same playback rate. a bit hard to wrap your head around, but here is a code snippet that makes your intention work!

import React from 'react';
import {
    AbsoluteFill,
    interpolate,
    Sequence,
    useCurrentFrame,
    Video,
} from 'remotion';

const remapSpeed = ({
    frame,
    speed,
}: {
    frame: number;
    speed: (fr: number) => number;
}) => {
    let framesPassed = 0;
    for (let i = 0; i <= frame; i++) {
        framesPassed += speed(i);
    }

    return framesPassed;
};

export const AcceleratedVideo: React.FC = () => {
    const frame = useCurrentFrame();
    const speedFunction = (f: number) =>
        interpolate(f, [0, 500], [1, 5], {
            extrapolateLeft: 'clamp',
            extrapolateRight: 'clamp',
        });

    const remappedFrame = remapSpeed({
        frame,
        speed: speedFunction,
    });

    return (
        <AbsoluteFill>
            <Sequence from={frame}>
                <Video
                    startFrom={Math.round(remappedFrame)}
                    playbackRate={speedFunction(frame)}
                    src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
                />
            </Sequence>
        </AbsoluteFill>
    );
};

It would be cool if we added this to the Snippets section (with better wording possibly than just some chat server message explanation) and added an embedded player (same as it happened in #1392)

[kaf-lamed-beyt]

Hi @JonnyBurger,

I'd love to work on this.

[JonnyBurger]

@kaf-lamed-beyt Happily!

[kaf-lamed-beyt]

Great! 💥🚀

[kaf-lamed-beyt]

Quick one @JonnyBurger,

Can I get the link to the question asked by @BenK#3758 in the discord server?

[kaf-lamed-beyt]

I'm still getting these errors after I've done pnpm i to get the new deps

[JonnyBurger]

@kaf-lamed-beyt The original question was just: Could you please share in code how you accelerate the playback of a video with spring animation?

I think you get the error because you did not run pnpm build in the root directory!

[kaf-lamed-beyt]

Thanks for pointing this out! 😎

[kaf-lamed-beyt]

This is what I'm getting now @JonnyBurger

[JonnyBurger]

@kaf-lamed-beyt you need to run npm start from the docs package

[kaf-lamed-beyt]

Thank you for this @JonnyBurger.

I'm currently trying to add a sample to the doc. But, I don't know how to go about that.

[kaf-lamed-beyt]

Okay...

I think I'm beginning to get a hang of how to go about it, by taking a look at this diff

I'll let you know when I encounter any issues, moving forward!

Thank you for this @JonnyBurger.

I'm currently trying to add a sample to the doc. But, I don't know how to go about that.

[JonnyBurger]

Fixed by #1457