Remotion Player — Webブラウザでビデオをリアルタイム再生
@remotion/playerでReactアプリにインタラクティブなビデオプレビューを埋め込み
Remotionはビデオレンダリングだけでなくブラウザでのリアルタイム再生もサポートしています。
@remotion/playerパッケージの<Player>コンポーネントをReactアプリに埋め込むと、Remotion CompositionをWebページで直接再生できます。再生/一時停止、シークバー、全画面など基本的なビデオコントロールを提供します。
最も強力な点はインタラクティブプレビューです。ユーザーがテキストを入力したり色を変更すると、PlayerのinputPropsを更新して即座にビデオプレビューに反映されます。MP4にレンダリングする前に結果を確認でき、SaaSビデオエディタのコアUIとなります。
注意: PlayerはブラウザでReactをリアルタイムレンダリングするため、複雑なコンポーネントではフレームドロップが発生する可能性があります。最終出力は必ずnpx remotion renderまたはLambdaでレンダリングしてください。
動作フロー
1
npm install @remotion/playerでパッケージインストール
2
<Player component={MyVideo} durationInFrames={150} fps={30} ... />でReactアプリに埋め込み
3
inputProps={{ title: userInput, color: selectedColor }}でユーザー入力をビデオにリアルタイム反映
4
プレビューに満足したらrenderMediaOnLambda()またはサーバーサイドレンダリングで最終MP4生成
メリット
- ✓ 即座のプレビュー: レンダリング待ちなく変更をリアルタイム確認
- ✓ Reactアプリに自然に統合: 既存の状態管理（Redux、Zustandなど）と連携
- ✓ MP4より軽量: 動的コンテンツをビデオファイルなしで配信可能
デメリット
- ✗ パフォーマンス制約: ブラウザレンダリングのため複雑なシーンでフレームドロップが発生する可能性
- ✗ オーディオ自動再生制限: ブラウザのautoplayポリシーによりユーザーインタラクションなしでオーディオ再生不可
ユースケース
SaaSビデオエディタ: ユーザーがテンプレートを選択しテキスト/画像をカスタマイズしプレビュー → レンダリング
ランディングページ: 製品紹介アニメーションをMP4ではなくリアルタイムReactで再生（ロード速度向上）
インタラクティブプレゼンテーション: 聴衆の反応に応じてビデオ内容をリアルタイム変更