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. 02生成 Chrome WebM 和 Safari MP4
  3. 03将导出文件复制到宣传页和文档目录
  4. 04检查透明通道、编码格式和尺寸

适用场景

  1. 01更新首页创作者展示视频
  2. 02验证 Safari 和 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. 从 ProRes 母版转换，不要从之前的 WebM/MOV 转换。

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 母版包含真实的 alpha 通道，并验证两个文件夹中都存在 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 应能成功执行，且 alpha 图像不应完全不透明。常见的失败情况是 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 中的渲染效果会不同。

不要将 ProRes .mov 文件添加到首页 PR 中；它们太大了。Safari 应使用体积较小的 .mp4 备用文件。Chrome 应使用透明的 .webm。

评论

支持 Markdown