remotion-media

remotion-media

Remotion のメディア OS：解決・配置・検証 — あらゆるメディアタイプを、1 つのスキルで。

配置の契約

すべての静的アセットは public/ ディレクトリに配置します。参照には必ず staticFile() を使用してください。

import {staticFile} from 'remotion';

// Images
<Img src={staticFile('hero.jpg')} />

// Audio
<Audio src={staticFile('background.mp3')} volume={0.4} />

// Video
<OffthreadVideo src={staticFile('footage.mp4')} />

レンダリング時にネットワークアクセスが必要な相対パス、絶対ディスクパス、CDN URL は絶対に使用しないでください（オフラインレンダリングや Lambda で失敗します）。

アセットの種類とツール

種類	ツール／パッケージ	使用例
BGM	解決済みのローカルファイル	<Audio src={staticFile('bgm.mp3')} volume={0.3} />
効果音	解決済みのローカルファイル	<Audio src={staticFile('click.mp3')} startFrom={30} />
画像／背景	ローカルファイルまたは staticFile()	<Img src={staticFile('bg.jpg')} />
Google Fonts	@remotion/google-fonts	loadFont() は {fontFamily} を返します
ブランドロゴ（SVG）	public/ 内のローカル SVG	<Img src={staticFile('logo.svg')} />
ナレーション／TTS	ローカルの mp3 ファイル	<Audio src={staticFile('narration.mp3')} />
動画素材	ローカルの mp4 ファイル	<OffthreadVideo src={staticFile('clip.mp4')} />
キャプション／字幕	@remotion/captions	単語単位でタイミングを合わせた <Captions> コンポーネント

フォント

Google Fonts には必ず @remotion/google-fonts を使用してください。<link> タグは使用しないでください。

npm install @remotion/google-fonts

import {loadFont} from '@remotion/google-fonts/Inter';

const {fontFamily} = loadFont();

const Text = () => (
  <div style={{fontFamily, fontWeight: 700}}>Hello</div>
);

カスタムフォントを使用する場合は、フォントファイルを public/fonts/ に配置し、calculateMetadata 内で、または delayRender／continueRender のペアを使って FontFace で読み込みます。

delayRender — 非同期アセットの読み込み

最初のフレームのレンダリング前にアセットを取得または生成する必要がある場合は、remotion の delayRender／continueRender を使用してください。

import {delayRender, continueRender} from 'remotion';

const handle = delayRender('Loading font');

fetch('/api/data')
  .then(r => r.json())
  .then(data => {
    setData(data);
    continueRender(handle);
  });

レンダリング関数内では delayRender を使用しないでください。モジュールスコープで呼び出すか、一度だけ実行される useEffect 内で呼び出してください。

音声／動画のタイミング

プロパティ	効果
startFrom	アセットの最初の N フレームをスキップします
endAt	アセットの N フレーム目で再生を停止します
volume	0〜1 のスカラー値、またはフレームに応じた関数
playbackRate	再生速度の倍率
loop	音声をループ再生します（決定論的：コンポジションの長さに基づいて繰り返します）

OffthreadVideo と Video の比較

	<OffthreadVideo>	<Video>
レンダリング精度	フレーム単位で正確（推奨）	フレームが落ちることがあります
シーク動作	メインスレッド外でレンダリング	ブラウザー内で再生
用途	最終コンポジション	プレビューのみ

レンダリングには必ず <OffthreadVideo> を使用してください。 <Video> は Studio のプレビューでのみ使用できます。

キャプション

単語単位でタイミングを合わせたキャプションには @remotion/captions を使用してください。

npm install @remotion/captions

import {Captions} from '@remotion/captions';

<Captions
  subtitles={wordTimedSubtitles}
  startFrom={0}
  windowStart={currentWordStart}
  windowEnd={currentWordEnd}
  style={{fontSize: 48, color: 'white'}}
/>

文字起こしのワークフロー → references/captions.md。

音声リアクティブ処理の準備

@remotion/media-utils を使用して、レンダリングパイプラインの外部で音声を事前分析します。

import {getAudioData, visualizeAudio} from '@remotion/media-utils';

// In calculateMetadata (runs once before render):
const audioData = await getAudioData(staticFile('music.mp3'));

音声リアクティブなコンテンツの作成については、remotion-creative/references/audio-reactive.md をご覧ください。

積極的に提案する — メディア活用の機会を確認する

コンポジションを作成またはレビューする際は、根拠に基づいて一度確認し、その後一度だけ提案してください。

検出された兆候	提案
ナレーションのない画面上のテキスト	TTS によるナレーションの選択肢
絵文字またはプレースホルダーのアイコン用 div	実際の SVG アイコンを解決
プレースホルダー画像または単色の背景	public/ 内の実際の画像を提案
音のないハードカット	トランジション効果音を提案
BGM のない約 10 秒を超える場面	BGM トラックを提案

ルール：根拠に基づき、一般論にしない（兆候がなければ提案しない）。具体的な修正方法を提案する。プロジェクトごとに一度だけ（提案はまとめて一度に行う）。

参照先

作業	参照先
staticFile、public/ ディレクトリ、アセットのパス	references/static-files.md
非同期読み込みでの delayRender	references/async-assets.md
フォントの読み込み（@remotion/google-fonts、カスタムフォント）	references/fonts.md
OffthreadVideo、Audio のトリミング、音量カーブ	references/media-elements.md
キャプション、文字起こし、@remotion/captions	references/captions.md
音声リアクティブなモーション、getAudioData	references/audio-reactive.md