Skip to main content

随时间更改视频的速度

note

这还不适用于来自 @remotion/media 的 <Video>。

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

🌐 To speed up a video over time - for example to start with regular speed and then increasingly make it faster - we need to write some code to ensure we stay within Remotion's rules.

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

🌐 It is not as easy as interpolating the playbackRate:

❌ Does not work
<OffthreadVideo playbackRate={interpolate(frame, [0, 100], [1, 5])} src="https://remotion.media/BigBuckBunny.mp4#disable" />;

这是因为 Remotion 会独立评估每一帧，而不考虑其他帧。如果 frame 是 100，playbackRate 的评估结果是 5，Remotion 将渲染视频的第 500 帧，这是不希望的，因为它没有考虑到速度到目前为止已经累积到 5。

🌐 This is because Remotion will evaluate each frame independently from the other frames. If frame is 100, the playbackRate evaluates as 5 and Remotion will render the 500th frame of the video, which is undesired because it does not take into account that the speed has been building up to 5 until now.

正确的方法是通过累积前几帧的播放速率来计算直到当前帧已经过去的总时间。然后我们从该帧开始播放视频，并设置当前帧的播放速率，以确保视频平滑播放。

🌐 The correct way is to calculate the total time that has elapsed until the current frame, by accumulating the playback rates of the previous frames. Then we start the video from that frame and set the playback rate of that current frame to ensure the video plays smoothly.

✅ AcceleratedVideo.tsx
import React from 'react';
import {interpolate, Sequence, useCurrentFrame, OffthreadVideo} 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}>
      <OffthreadVideo trimBefore={Math.round(remappedFrame)} playbackRate={speedFunction(frame)} src="https://remotion.media/BigBuckBunny.mp4#disable" />
    </Sequence>
  );
};
note

我们正在通过在 URL 末尾添加 #disable 来禁用媒体片段提示附加到视频 URL。

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

🌐 Note that the timeline in the Remotion Studio might move as you play the video because we reposition the sequence over time. This is okay as long as we calculate the frame in an idempotent way.

演示​

🌐 Demo

另请参阅​

🌐 See also

Last updated on