影片與音訊 - RemotionLab

加入影片素材

Remotion 提供 <Video> 元件來嵌入影片。它會自動與你的 Composition 時間軸同步：

import { Video } from "remotion";
 
export const MyScene: React.FC = () => {
  return (
    <Video
      src="https://example.com/background.mp4"
      style={{ width: "100%" }}
    />
  );
};

使用本地檔案

把影片放在 public/ 資料夾，然後用 staticFile() 引用：

import { Video, staticFile } from "remotion";
 
export const MyScene: React.FC = () => {
  return <Video src={staticFile("background.mp4")} />;
};

控制影片播放

你可以用 startFrom 和 endAt 來截取影片的一段：

<Video
  src={staticFile("interview.mp4")}
  startFrom={60}   // 從第 60 幀開始（也就是第 2 秒）
  endAt={150}      // 到第 150 幀結束（第 5 秒）
/>

加入音訊

<Audio> 元件的用法跟 <Video> 幾乎一樣：

import { Audio, staticFile } from "remotion";
 
export const MyScene: React.FC = () => {
  return (
    <>
      <Audio src={staticFile("bgm.mp3")} volume={0.5} />
      {/* 其他影片內容 */}
    </>
  );
};

音量控制

volume 可以是固定值，也可以是根據 frame 變化的函數：

import { Audio, staticFile, interpolate, useCurrentFrame } from "remotion";
 
export const FadeInAudio: React.FC = () => {
  const frame = useCurrentFrame();
 
  return (
    <Audio
      src={staticFile("bgm.mp3")}
      volume={(f) =>
        interpolate(f, [0, 30], [0, 0.8], {
          extrapolateRight: "clamp",
        })
      }
    />
  );
};

這會讓音樂在前 30 幀（1 秒）內從靜音淡入到 80% 音量。

搭配 Sequence 控制時序

用 <Sequence> 來安排影片和音訊的出場時間：

import { AbsoluteFill, Sequence, Audio, Video, staticFile } from "remotion";
 
export const CompleteScene: React.FC = () => {
  return (
    <AbsoluteFill>
      {/* 背景音樂：從頭播到尾 */}
      <Audio src={staticFile("bgm.mp3")} volume={0.3} />
 
      {/* 片頭文字：前 2 秒 */}
      <Sequence from={0} durationInFrames={60}>
        <AbsoluteFill
          style={{
            justifyContent: "center",
            alignItems: "center",
            backgroundColor: "#0f0f1a",
          }}
        >
          <h1 style={{ color: "white", fontSize: 72 }}>我的影片</h1>
        </AbsoluteFill>
      </Sequence>
 
      {/* 主要影片內容：第 2 秒開始 */}
      <Sequence from={60}>
        <Video src={staticFile("main-content.mp4")} />
      </Sequence>
    </AbsoluteFill>
  );
};

支援的格式

類型	支援格式
影片	MP4 (H.264)、WebM (VP8/VP9)
音訊	MP3、WAV、AAC、OGG

提示：建議使用 MP4 (H.264) 格式的影片，相容性最好。

小結

<Video> 和 <Audio> 會自動與 Composition 時間軸同步。
用 staticFile() 引用 public/ 資料夾中的本地檔案。
volume 可以接受函數，實現動態音量控制。
搭配 <Sequence> 可以精確控制媒體的出場時機。