不同片段使用不同速度

在製作影片時，你可能希望某些片段以正常速度播放，另一些則加速或慢動作呈現。Remotion 提供兩種主要方式來達成這個效果。

方法一：使用 `changeSpeed()` 工具函式

changeSpeed() 是 @remotion/media-utils 提供的輔助函式，可以對影格索引做速度轉換。

import { useCurrentFrame, useVideoConfig, Sequence } from "remotion";
import { OffthreadVideo } from "remotion";
import { changeSpeed } from "@remotion/media-utils";
import staticFile from "./myVideo.mp4";
 
export const SpeedDemo: React.FC = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
 
  // 在第 0~60 幀以 2 倍速播放，之後恢復正常速度
  const slowPart = frame < 60 ? frame * 2 : 60 * 2 + (frame - 60);
 
  return (
    <OffthreadVideo
      src={staticFile}
      startFrom={0}
      // 透過手動計算影格來模擬變速
    />
  );
};

使用 `changeSpeed` 的標準做法

import { useCurrentFrame } from "remotion";
import { changeSpeed } from "@remotion/media-utils";
 
export const VariableSpeedVideo: React.FC = () => {
  const frame = useCurrentFrame();
 
  // 定義速度區間：[起始幀, 結束幀, 速度倍率]
  const speedSegments: [number, number, number][] = [
    [0, 60, 1],    // 第 0~60 幀：正常速度
    [60, 120, 2],  // 第 60~120 幀：2 倍速
    [120, 180, 0.5], // 第 120~180 幀：0.5 倍速（慢動作）
  ];
 
  const videoFrame = changeSpeed(frame, speedSegments);
 
  return (
    <OffthreadVideo
      src={staticFile}
      startFrom={videoFrame}
    />
  );
};

方法二：使用 `<Sequence>` 搭配 `playbackRate`

如果你使用的是 <Video> 或 <Audio> 元件，可以透過 playbackRate 屬性直接設定每個 <Sequence> 內的播放速度。

import { AbsoluteFill, Sequence, Video } from "remotion";
 
export const MultiSpeedVideo: React.FC = () => {
  return (
    <AbsoluteFill>
      {/* 第一段：0~90 幀，正常速度 */}
      <Sequence from={0} durationInFrames={90}>
        <Video
          src={staticFile}
          startFrom={0}
          playbackRate={1}
        />
      </Sequence>
 
      {/* 第二段：90~150 幀，2 倍速播放 */}
      <Sequence from={90} durationInFrames={60}>
        <Video
          src={staticFile}
          startFrom={90}
          playbackRate={2}
        />
      </Sequence>
 
      {/* 第三段：150~210 幀，慢動作（0.5 倍速）*/}
      <Sequence from={150} durationInFrames={60}>
        <Video
          src={staticFile}
          startFrom={210}
          playbackRate={0.5}
        />
      </Sequence>
    </AbsoluteFill>
  );
};

兩種方法的比較

特性	`changeSpeed()`	`playbackRate` on `<Video>`
適用元件	`OffthreadVideo`	`Video`、`Audio`
精確度	高，可做細粒度控制	依段落設定
渲染一致性	優（逐幀渲染更可靠）	依瀏覽器行為
使用難度	稍複雜，需計算影格	簡單，直接設屬性

計算總長度

使用變速時，Composition 的 durationInFrames 需要根據實際播放長度手動計算。

// 範例：原始影片 10 秒 (300 幀 at 30fps)
// 前 5 秒以 2 倍速播放 → 只需 75 幀
// 後 5 秒以正常速度 → 需要 150 幀
// 總計：225 幀
 
export const RemotionRoot: React.FC = () => {
  return (
    <Composition
      id="MultiSpeed"
      component={MultiSpeedVideo}
      durationInFrames={225}
      fps={30}
      width={1920}
      height={1080}
    />
  );
};

注意事項

playbackRate 僅在 Remotion Studio 預覽和 <Player> 中有效；在伺服器端渲染（SSR）時請改用 OffthreadVideo 搭配手動影格計算。
極端速度值（如 0.1 倍或 10 倍）可能造成音訊失真，建議搭配 volume 屬性或靜音處理。
使用 changeSpeed() 前，請確認已安裝 @remotion/media-utils 套件。

npm install @remotion/media-utils

不同片段使用不同速度

方法一：使用 changeSpeed() 工具函式

使用 changeSpeed 的標準做法