随时间改变视频速度

要随时间加快视频的速度 - 例如从常速开始，然后逐渐加快速度 - 我们需要编写一些代码来确保我们遵守 Remotion 的规则。

这并不像插值playbackRate那样简单：

❌ 不起作用
tsx
<Video playbackRate={interpolate(frame, [0, 100], [1, 5])} />;

❌ 不起作用
tsx
<Video playbackRate={interpolate(frame, [0, 100], [1, 5])} />;

这是因为 Remotion 将独立地评估每一帧。如果frame为100，playbackRate评估为5，Remotion 将渲染视频的第500帧，这是不希望的，因为它没有考虑到速度一直增加到5为止。

正确的方法是计算到当前帧为止已经经过的总时间，通过累积之前帧的播放速率。然后我们从该帧开始播放视频，并设置当前帧的播放速率，以确保视频播放顺畅。

✅ AcceleratedVideo.tsx
tsx
import React from "react";
import { interpolate, Sequence, useCurrentFrame, Video } from "remotion";
 
const remapSpeed = (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]);
 
  const remappedFrame = remapSpeed(frame, speedFunction);
 
  return (
    <Sequence from={frame}>
      <Video
        startFrom={Math.round(remappedFrame)}
        playbackRate={speedFunction(frame)}
        src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
      />
    </Sequence>
  );
};

✅ AcceleratedVideo.tsx
tsx
import React from "react";
import { interpolate, Sequence, useCurrentFrame, Video } from "remotion";
 
const remapSpeed = (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]);
 
  const remappedFrame = remapSpeed(frame, speedFunction);
 
  return (
    <Sequence from={frame}>
      <Video
        startFrom={Math.round(remappedFrame)}
        playbackRate={speedFunction(frame)}
        src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
      />
    </Sequence>
  );
};

请注意，Remotion Studio 中的时间轴可能会随着视频播放而移动，因为我们会随时间重新定位序列。只要我们以幂等的方式计算帧，这是可以接受的。

演示

0:00 / 0:50

另请参阅

• <Video>