Remotion LabRemotion Lab
›音訊›<OffthreadVideo> 與音訊處理

<OffthreadVideo> 與音訊處理

深入了解 <OffthreadVideo> 元件：在渲染時使用 FFmpeg 提取幀，並掌握音訊串流、色調對應、透明度等進階功能。

<OffthreadVideo>

v3.0.11

此元件與 <Html5Video/> 類似，用於匯入並顯示影片，但在渲染期間，它會使用 FFmpeg 在瀏覽器外部提取確切幀，並在 <Img> 標籤中顯示。

此元件旨在解決預設 <Html5Video> 元素的限制。詳情請參閱影片標籤比較。

不支援客戶端渲染 <OffthreadVideo> 不支援 @remotion/web-renderer。請改用 @remotion/media 中的 <Video>。

範例

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

你也可以從 URL 載入影片：

export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <OffthreadVideo src="https://remotion.media/BigBuckBunny.mp4" />
    </AbsoluteFill>
  );
};

Props

src

要渲染的影片 URL。可以是遠端 URL 或使用 staticFile() 引用的本地檔案。

trimBefore? v4.0.319

將從開頭（左側）移除一部分影片。

在以下範例中，我們假設 composition 的 fps 為 30。透過傳入 trimBefore={60}，播放立即開始，但會裁切掉前 2 秒的影片。透過傳入 trimAfter={120}，檔案中第 4 秒之後的影片將被裁切。影片將播放從 00:02:00 到 00:04:00 的範圍，即播放 2 秒。

詳細行為請參閱操作順序。

export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <OffthreadVideo
        src={staticFile('video.webm')}
        trimBefore={60}
        trimAfter={120}
      />
    </AbsoluteFill>
  );
};

trimAfter? v4.0.319

從結尾（右側）移除一部分影片。說明請參閱 trimBefore。

startFrom?

已棄用：此 prop 在 4.0.319 版本中已重新命名為 trimBefore。仍可使用，但不能與新 prop 一起使用。

endAt?

已棄用：此 prop 在 4.0.319 版本中已重新命名為 trimAfter。仍可使用，但不能與新 prop 一起使用。

transparent? v4.0.0

如果設為 true，幀將以 PNG 格式提取，啟用透明度但也會減慢渲染速度。如果設為 false（預設），幀將以點陣圖（BMP）格式提取，速度更快。

volume?

允許你控制整個軌道的音量或逐幀更改。請參閱使用音訊指南以了解使用方式。

使用靜態音量的範例

export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <OffthreadVideo volume={0.5} src={staticFile('video.webm')} />
    </AbsoluteFill>
  );
};

100 幀內音量漸增的範例

export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <OffthreadVideo
        volume={(f) =>
          interpolate(f, [0, 100], [0, 1], {
            extrapolateLeft: 'clamp',
            extrapolateRight: 'clamp',
          })
        }
        src={staticFile('video.webm')}
      />
    </AbsoluteFill>
  );
};

預設支援 0 到 1 之間的音量值，在 iOS Safari 中音量始終為 1。詳情請參閱音量限制。

loopVolumeCurveBehavior? v4.0.142

控制使用音量回呼函數並將 OffthreadVideo 包裹在 <Loop> 中時返回的幀數。可以是 "repeat"（預設，每次迭代從 0 開始）或 "extend"（持續遞增幀數）。

style?

你可以傳入任何可以傳遞給原生 HTML 元素的樣式。請注意，在渲染期間，<OffthreadVideo> 渲染的是 <Img> 標籤，但在預覽時使用的是 <video> 標籤。

export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <OffthreadVideo
        src={staticFile('video.webm')}
        style={{ height: 720, width: 1280 }}
      />
    </AbsoluteFill>
  );
};

name? v4.0.71

一個名稱，將在 Remotion Studio 時間軸中顯示為序列標籤。此屬性純粹用於幫助你在時間軸中追蹤項目。

toneFrequency? v4.0.47

調整音訊的音調——僅在渲染期間套用。接受 0.01 到 2 之間的數字，其中 1 代表原始音調。小於 1 的值會降低音調，大於 1 的值會提高音調。toneFrequency 為 0.5 會將音調降低一半，toneFrequency 為 1.5 會將音調提高 50%。

onError?

處理播放影片時的錯誤。從 v3.3.89 起，如果你傳入 onError 回呼，則不會拋出例外。之前，此錯誤無法被捕捉。

playbackRate? v2.2.0

控制影片速度。1 為預設值，表示正常速度；0.5 會將影片減慢為兩倍長度；2 會將影片加速為兩倍快。

雖然 Remotion 不限制可能的播放速度範圍，但在開發模式下使用的是 HTMLMediaElement.playbackRate API，在極端值時會拋出錯誤。目前，Google Chrome 在播放速率低於 0.0625 或高於 16 時會拋出例外。

以兩倍速播放影片的範例

export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <OffthreadVideo playbackRate={2} src={staticFile('video.webm')} />
    </AbsoluteFill>
  );
};

注意：不支援反向播放。

muted?

你可以透過添加 muted prop 來消除影片的音訊：

靜音影片範例

export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <OffthreadVideo muted src="https://remotion.media/BigBuckBunny.mp4" />
    </AbsoluteFill>
  );
};

acceptableTimeShiftInSeconds? v3.2.42

在 Studio 或 Remotion Player 中，如果影片與 Remotion 內部時間嚴重不同步——無論是由於影片載入還是頁面速度太慢——Remotion 將尋找影片。預設情況下，如果遇到 0.45 秒的時間偏移，就會觸發尋找。使用此 prop，你可以自訂閾值。

pauseWhenBuffering? v4.0.111

如果設為 true 且影片正在載入，Player 將進入原生緩衝狀態。預設為 false，但在 Remotion 5.0 中將變為 true。

toneMapped? v4.0.117

自 Remotion 4.0.117 起，Remotion 在轉換為 RGB 時會調整不同色彩空間（例如 HDR）影片的色彩，以抵消色偏。由於瀏覽器以 sRGB 繪製，這對確保色彩正確顯示是必要的。

此行為預設為 true，可透過將 toneMapped 設為 false 來停用。停用色調對應將加速渲染，但可能導致色彩飽和度降低。

在 Remotion 4.0.117 之前，色調對應始終是停用的，且 toneMapped prop 不可用。

audioStreamIndex? v4.0.340

選擇要使用的音訊串流。預設為 0。

export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <OffthreadVideo
        audioStreamIndex={1}
        src={'https://remotion.media/multiple-audio-streams.mov'}
      />
    </AbsoluteFill>
  );
};

注意：此 prop 僅在渲染期間有效。瀏覽器不支援在未啟用實驗性標誌的情況下選擇音訊軌道。

不要與音訊聲道混淆。一個影片可以有多個音訊串流，每個串流可以有多個聲道。多個音訊串流可用於為影片添加多種語言。音訊串流從零開始索引。

showInTimeline? v4.0.122

如果設為 false，Remotion Studio 的時間軸中將不會顯示任何圖層。預設為 true。

delayRenderTimeoutInMilliseconds? v4.0.150

自訂此元件所進行的 delayRender() 呼叫的逾時時間。

delayRenderRetries? v4.0.178

自訂此元件所進行的 delayRender() 呼叫的重試次數。

onAutoPlayError? v4.0.187

當影片因自動播放限制而無法播放時呼叫的回呼函數。如果你不傳入回呼，影片將被靜音並重試一次。此 prop 在你想要自行處理錯誤時很有用，例如暫停 Player。

onVideoFrame? v4.0.190

從影片中提取幀時呼叫的回呼函數。對影片操作很有用。回呼接收一個 CanvasImageSource 物件。在預覽期間，這是一個 HTMLVideoElement 物件；在渲染期間，這是一個 HTMLImageElement。

crossOrigin? v4.0.190

對應 <video> 元素的 crossOrigin 屬性。可以是 "anonymous"、"use-credentials" 或 undefined。預設：如果指定了 onVideoFrame，則為 "anonymous"，否則為 undefined。

useWebAudioApi? v4.0.306

為影片標籤啟用 Web Audio API。

allowAmplificationDuringRender? v3.3.17

自 v4.0.279 起已棄用：此 prop 原本是為了選擇性地將音量設定為高於 1 的值，即使它只會在渲染期間套用。此選項不再有意義，因為現在可以將音量設定為高於 1。為了防止合成放大，請將音量設定為不高於 1。

其他 Props

onError、className 和 style prop 受到支援，並會傳遞給底層 HTML 元素。請記住，在渲染期間，這是一個 <img> 元素，而在預覽期間，這是一個 <video> 元素。

效能提示

  • 只有在需要透明度時才將 transparent 設為 true，因為它比非透明幀提取慢。
  • 如果你不在乎色彩準確性，你也可以將 toneMapped 設為 false 以節省色彩轉換的時間。

循環 OffthreadVideo

與 <Html5Video> 不同，OffthreadVideo 不實作 loop 屬性。考慮使用另一個影片標籤來進行循環。

注意：當影片結束時，預設情況下影片的最後一幀仍然可見。這與 <Html5Video> 的行為一致。

你可以使用以下 <LoopableOffthreadVideo> 元件，它使用 Mediabunny 來確定循環影片的持續時間。

// src/LoopableOffthreadVideo.tsx
import React, { useEffect, useState } from 'react';
import {
  cancelRender,
  continueRender,
  delayRender,
  Loop,
  OffthreadVideo,
  RemotionOffthreadVideoProps,
  useRemotionEnvironment,
  useVideoConfig,
  Html5Video,
} from 'remotion';
import { getMediaMetadata } from './get-media-metadata';
 
const LoopedOffthreadVideo: React.FC<RemotionOffthreadVideoProps> = (props) => {
  const [duration, setDuration] = useState<number | null>(null);
  const [handle] = useState(() => delayRender());
  const { fps } = useVideoConfig();
 
  useEffect(() => {
    getMediaMetadata(props.src)
      .then(({ durationInSeconds }) => {
        setDuration(durationInSeconds);
        continueRender(handle);
      })
      .catch((err) => {
        cancelRender(err);
      });
    return () => {
      continueRender(handle);
    };
  }, [handle, props.src]);
 
  if (duration === null) {
    return null;
  }
 
  return (
    <Loop durationInFrames={Math.floor(duration * fps)}>
      <OffthreadVideo {...props} />
    </Loop>
  );
};
 
export const LoopableOffthreadVideo: React.FC<
  RemotionOffthreadVideoProps & { loop?: boolean }
> = ({ loop, ...props }) => {
  const env = useRemotionEnvironment();
 
  if (env.isRendering) {
    if (loop) {
      return <LoopedOffthreadVideo {...props} />;
    }
    return <OffthreadVideo {...props} />;
  }
 
  return <Html5Video loop={loop} {...props} />;
};

<OffthreadVideo> 支援的編解碼器

<OffthreadVideo> 可以讀取以下編解碼器：

  • H.264（"MP4"）
  • H.265（"HEVC"）
  • VP8 和 VP9（"WebM"）
  • AV1（自 v4.0.6 起）
  • ProRes

相容性

環境ChromeFirefoxSafari客戶端渲染伺服器端渲染PlayerStudio
支援✅✅✅✅✅✅✅

另請參閱