影片進階 - RemotionLab

影片裁切

用 startFrom 和 endAt 裁切影片片段：

import { Video, staticFile } from "remotion";
 
<Video
  src={staticFile("interview.mp4")}
  startFrom={60}   // 從第 60 幀開始（跳過前 2 秒）
  endAt={150}      // 到第 150 幀結束
/>

幀數是以影片的 fps 為單位。如果你的 Composition 是 30fps，startFrom={60} 就是從第 2 秒開始。

搭配 Sequence 控制出場

import { Sequence, Video, staticFile } from "remotion";
 
export const MyScene: React.FC = () => {
  return (
    <AbsoluteFill>
      {/* 前 3 秒顯示第一段影片 */}
      <Sequence from={0} durationInFrames={90}>
        <Video src={staticFile("clip1.mp4")} />
      </Sequence>
 
      {/* 第 3 秒開始顯示第二段影片 */}
      <Sequence from={90} durationInFrames={90}>
        <Video src={staticFile("clip2.mp4")} />
      </Sequence>
    </AbsoluteFill>
  );
};

影片速度控制

用 playbackRate 控制播放速度：

// 2 倍速
<Video src={staticFile("video.mp4")} playbackRate={2} />
 
// 0.5 倍速（慢動作）
<Video src={staticFile("video.mp4")} playbackRate={0.5} />

靜音影片

如果只需要影片畫面不要聲音：

<Video src={staticFile("video.mp4")} muted />

影片樣式

影片元件支援所有 CSS 樣式：

<Video
  src={staticFile("video.mp4")}
  style={{
    width: "100%",
    height: "100%",
    objectFit: "cover",     // 填滿容器
    borderRadius: 20,
    opacity: 0.8,
    filter: "grayscale(50%)",
  }}
/>

常用 objectFit 值

值	效果
`cover`	填滿容器，可能裁切
`contain`	完整顯示，可能留白
`fill`	拉伸填滿

透明影片

如果你的影片素材有 alpha 通道（如 ProRes 4444 或 VP9），Remotion 會正確處理透明度：

<AbsoluteFill>
  <AbsoluteFill style={{ backgroundColor: "blue" }} />
  <Video src={staticFile("overlay.webm")} />
</AbsoluteFill>

透明影片會疊加在底層之上，露出下方的藍色背景。

小結

startFrom / endAt 裁切影片片段
playbackRate 控制播放速度
muted 靜音
objectFit: "cover" 是最常用的填滿方式
支援透明影片素材