mcpField
H
homepage-video-assets

homepage-video-assets

github.com/remotion-devクリエイティブ・メディア68.6k499 回インストール今日更新
リポジトリ

homepage-video-assets について

Remotion の brand パッケージからホームページ用動画素材を作成、検証するワークフロースキルです。透明なマスターのレンダリング、Chrome と Safari 向けの書き出し、アプリの素材フォルダーへの配置を扱います。

主な機能

  1. 01透明な ProRes 4444 マスターのレンダリング
  2. 02Chrome WebM と Safari MP4 の作成
  3. 03宣伝ページとドキュメントへの書き出し配置
  4. 04アルファ、コーデック、サイズの確認

活用シーン

  1. 01ホームページのクリエイター紹介動画の更新
  2. 02Safari と Chrome 向け動画素材の検証
  3. 03不透明またはサイズ違いの書き出しの防止

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/remotion-dev/remotion --skill homepage-video-assets

インストール後、Claude Code で/homepage-video-assetsを入力して読み込まれたか確認します。

詳細

ホームページ動画アセット

次のようなホームページのクリエイター紹介ストリップ用アセットには、このワークフローを使用します。

  • homepage-assets-master
  • editing-vp9-chrome / editing-safari
  • what-is-remotion

ワークフロー

  1. packages/brand から、新しい透明背景の ProRes 4444 マスターをレンダリングします。
cd packages/brand
bunx remotion render <composition-id> /tmp/<asset>-master.mov \
  --codec=prores \
  --prores-profile=4444 \
  --pixel-format=yuva444p10le \
  --image-format=png \
  --timeout=120000 \
  --overwrite
  1. 以前の WebM/MOV ではなく、ProRes マスターから変換します。

Chrome WebM：

ffmpeg -y -i /tmp/<asset>-master.mov \
  -vf scale=540:540 \
  -c:v libvpx \
  -pix_fmt yuva420p \
  -auto-alt-ref 0 \
  -an /tmp/<chrome-name>.webm

Safari MP4：

ffmpeg -y -i /tmp/<asset>-master.mov \
  -vf scale=540:540 \
  -c:v prores_ks \
  -profile:v 4 \
  -pix_fmt yuva444p10le \
  -an /tmp/<asset>-540-prores.mov

avconvert \
  --source /tmp/<asset>-540-prores.mov \
  --preset PresetHEVCHighestQualityWithAlpha \
  --output /tmp/<safari-name>.mp4 \
  --replace
  1. 両方の出力ファイルを、両方のアプリフォルダーにコピーします。
cp /tmp/<chrome-name>.webm ../promo-pages/public/img/<chrome-name>.webm
cp /tmp/<safari-name>.mp4 ../promo-pages/public/img/<safari-name>.mp4
cp /tmp/<chrome-name>.webm ../docs/static/img/<chrome-name>.webm
cp /tmp/<safari-name>.mp4 ../docs/static/img/<safari-name>.mp4

検証

変換する前に ProRes マスターに実際のアルファチャンネルがあることを確認し、Safari MP4 が両方のフォルダーに存在することを確認します。

ffmpeg -i /tmp/<asset>-master.mov
ffmpeg -i ../promo-pages/public/img/<safari-name>.mp4
ffmpeg -y -i /tmp/<asset>-master.mov \
  -vf alphaextract -frames:v 1 /tmp/<asset>-alpha.png

マスターでは prores (4444) と yuva... ピクセル形式が報告される必要があります。alphaextract が成功し、アルファ画像が完全な不透明状態ではないことを確認してください。よくある失敗例は、alphaextract は成功するものの、サンプリングしたすべてのピクセルが不透明な場合です。この場合、マスターは黒または不透明な背景でレンダリングされたか、不透明な古いマスターが再利用されています。

コピーした Chrome WebM と Safari MP4 がすべて正確に 540x540 であることを確認します。

for f in \
  ../promo-pages/public/img/<chrome-name>.webm \
  ../promo-pages/public/img/<safari-name>.mp4 \
  ../docs/static/img/<chrome-name>.webm \
  ../docs/static/img/<safari-name>.mp4; do
  ffmpeg -i "$f"
done

Safari MP4 は、正常なファイルの形式（major_brand: mp42、compatible_brands: isommp41mp42、Video: hevc (Main) (hvc1)、540x540、handler_name: Core Media Video）である必要があります。h264 (avc1) や 960x540 などの寸法が報告された場合は、別のファイルであり、Safari では異なる表示になります。

ホームページの PR に ProRes .mov ファイルを追加しないでください。ファイルサイズが大きすぎます。Safari では小さい .mp4 のフォールバックを使用してください。Chrome では透明背景の .webm を使用してください。

コメント

Markdown 対応