Remotion ビデオパイプライン
実映像 + コード描画タイポグラフィ = ブランドに沿った、誤字のない、反復編集可能なビデオ。
パイプライン
- インベントリ: 生クリップの一覧を作成:
scripts/inventory.sh <raw-dir> > index.tsv(id, パス, 長さ, 解像度) - プロキシ:
scripts/make-proxies.sh index.tsv proxy/で、幅1080、30fps、オールイントラ風H.264 (-g 15)、音声なしのコピーを作成。プロキシに対して編集・レンダリングを行う。4K/HEVCオリジナルはRemotionのシークが遅くなり、Chromeがクラッシュする可能性がある。 - 目視で瞬間を選ぶ:
scripts/contact-sheet.sh proxy/v01.mp4 sheets/v01.jpgで、1秒間に1フレームをグリッド表示。シートを開き、各カットの開始秒数をメモする。 - コンポーズ:
template/をコピーして使用:Footage(トリミング・ズームされたクリップ)、Scrim(テキストを読みやすくするグラデーション)、Line(アニメーションテキスト)。出力ごとに1つのコンポジション(例:Main30秒、Teaser9秒、Spot16x920秒) - レンダリング:
npx remotion render <CompositionId> out/<name>.mp4。設定はすでにH.264、CRF 17、yuv420p。 - 検証: 3枚の静止画を抽出 (
ffmpeg -ss 5 -i out.mp4 -frames:v 1 still.png) して確認。長さと、オーディオポリシー(無音または音楽)がクライアントの期待通りかをチェック。
落とし穴(それぞれ実際に時間を浪費しました)
- ルート要素に
lang="tr"(または適切な言語)を設定する。設定しないとCSSのtext-transform: uppercaseがトルコ語のiをİ(MAKİNASI、TEKLİF)に変えてしまう。最終的な文字列は大文字小文字を直接入力するのが望ましい。 while readループ内のffmpegはstdinを奪う: 必ず-nostdinを渡す。- zshはbashと分割方法が異なる:
set -- $pや$2:sが壊れる。スクリプトは#!/usr/bin/env bashで書く。 - 多くのffmpegビルドには drawtextがありません。テキストはRemotionで描画し、ffmpegでは決して描画しない。
- HTMLベースのレンダラー(例: Hyperframes)はシーン間に「薄暗い」オーバーレイレイヤーを残す場合がある。また、フェードは明示的な不透明度アニメーションで行う。これらのレンダリングは フォアグラウンド で実行する(バックグラウンドの
nohupはキャンセルされる)。HEVC出力はffmpeg -i in.mp4 -c:v libx264 -crf 18 -pix_fmt yuv420p out.mp4で変換する。 - スマートフォン映像の回転:
ffprobeで回転タグを確認。横向きコンポジションに縦向きクリップを配置する場合はobjectFit: coverと明示的なクロップが必要。 - 映像に映っているものだけを主張する。オンスクリーンテキストで仕様、容量、価格をでっち上げない。
- 公開するリポジトリにクライアントファイルを含めない。映像とロゴはクライアントの資産。
配信チェックリストは references/checklist.md を参照。