從影片中使用音訊

來自 <Video>、<Html5Video> 和 <OffthreadVideo> 標籤的音訊也會自動包含在輸出結果中。

適用於音訊的相同原則同樣適用於影片音訊——您可以對影片進行剪裁、延遲、靜音、加速以及調整音量。

基本範例

MyComp.tsx

import {AbsoluteFill, OffthreadVideo, staticFile} from 'remotion';
 
export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <OffthreadVideo src={staticFile('video.mp4')} playbackRate={2} volume={0.5} />
    </AbsoluteFill>
  );
};

在此範例中，影片以 2 倍速播放，音量設為原始音量的 50%。

影片音訊的操作方式

調整音量

使用 volume 屬性來控制影片中音訊的音量：

VolumeControl.tsx

import {AbsoluteFill, OffthreadVideo, staticFile, useCurrentFrame, interpolate} from 'remotion';
 
export const FadeInVideo = () => {
  const frame = useCurrentFrame();
 
  // 前 30 幀音量從 0 淡入到 1
  const volume = interpolate(frame, [0, 30], [0, 1], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
  });
 
  return (
    <AbsoluteFill>
      <OffthreadVideo
        src={staticFile('video.mp4')}
        volume={volume}
      />
    </AbsoluteFill>
  );
};

剪裁音訊

使用 trimBefore 和 trimAfter 屬性剪裁影片的音訊部分：

TrimAudio.tsx

import {AbsoluteFill, OffthreadVideo, staticFile} from 'remotion';
 
export const TrimmedVideo = () => {
  return (
    <AbsoluteFill>
      {/* 從第 30 幀開始，跳過前 30 幀的音訊 */}
      <OffthreadVideo
        src={staticFile('video.mp4')}
        trimBefore={30}
      />
    </AbsoluteFill>
  );
};

靜音影片

MutedVideo.tsx

import {AbsoluteFill, OffthreadVideo, staticFile} from 'remotion';
 
export const MutedVideo = () => {
  return (
    <AbsoluteFill>
      <OffthreadVideo
        src={staticFile('video.mp4')}
        muted
      />
    </AbsoluteFill>
  );
};

使用 Sequence 延遲音訊

將影片放入 <Sequence> 中可以延遲音訊的播放時間：

DelayedVideo.tsx

import {AbsoluteFill, OffthreadVideo, Sequence, staticFile} from 'remotion';
 
export const DelayedVideoAudio = () => {
  return (
    <AbsoluteFill>
      {/* 影片及其音訊從第 60 幀（2 秒，30fps）才開始播放 */}
      <Sequence from={60}>
        <OffthreadVideo src={staticFile('video.mp4')} />
      </Sequence>
    </AbsoluteFill>
  );
};

多個影片來源混音

您可以同時使用多個影片，它們的音訊會自動混合：

MultipleVideos.tsx

import {AbsoluteFill, OffthreadVideo, Sequence, staticFile} from 'remotion';
 
export const MultiVideoComposition = () => {
  return (
    <AbsoluteFill>
      {/* 第一個影片，全音量 */}
      <Sequence from={0} durationInFrames={90}>
        <OffthreadVideo src={staticFile('intro.mp4')} />
      </Sequence>
 
      {/* 第二個影片，音量降低以做為背景 */}
      <Sequence from={0}>
        <OffthreadVideo
          src={staticFile('background-music.mp4')}
          volume={0.3}
        />
      </Sequence>
    </AbsoluteFill>
  );
};

支援的元件

下列影片元件都支援音訊操作：

元件	說明
`<Video>`	標準 HTML5 影片元素的封裝
`<Html5Video>`	更底層的 HTML5 影片元件
`<OffthreadVideo>`	離執行緒渲染，效能更佳，推薦使用