SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场web-video

web-video

前端与建站

查看项目

更新于 10-21 12:42

技能介绍

用途

web-video 是一个用于把视频优化为适合网页播放的 AI 技能，由 Evil Martians 开发。它把视频编码成浏览器支持最好、体积尽可能小的格式，并附带封面图和用于嵌入的 <video> 标记。该技能是 Evil Martians 文章《Better Web Video with AV1 Codec》的配套工具。

主要能力

  • 对普通视频生成 AV1、HEVC、H.264 的 MP4 文件，以及一张 JPEG 封面图（poster）。
  • 对带透明通道的视频生成 VP9 WebM 和带 alpha 的 HEVC。
  • 输出每个文件的体积、像素尺寸，以及按浏览器尝试顺序排列的 <video> 代码片段。
  • 所有编码设置集中在脚本 scripts/web-video.sh 中，不要求用户自己编写 ffmpeg 命令。

使用方式

运行脚本：

bash <skill-dir>/scripts/web-video.sh [options] <video>

其中 <skill-dir> 是 SKILL.md 所在目录。首次编码前应先阅读 --help，再根据用户需求映射到对应选项，例如“2 倍速”对应 --speed 2，“放到 public/media”对应 --output-dir public/media，“跳过 AV1”对应 --formats hevc,h264。

当请求暗示某些选项时，可以主动建议并说明理由：

  • --no-audio：用于封面、背景循环或静音自动播放的演示，因为没人会听到音轨。
  • --max-width：用于把 4K 或视网膜屏幕录制放入窄栏，两倍栏宽可覆盖 2x 显示屏。
  • --fps 30：用于慢速 UI 的 60fps 屏幕录制，可丢弃一半帧而几乎看不出损失。
  • --fast：用于草稿，保留质量设置但切换到更快的编码预设，编码完成快数倍，文件更大。可用于检查时间或构图，之后再正式编码。

项目级默认值可写入项目 git 仓库根目录的 .web-video 文件。当用户表达对所有视频的偏好（如“我们不发 HEVC”“封面从不带声音”）时，可建议保存到该文件，而不是每次重复。示例：

# AV1 and H.264 only; transparent video still gets VP9 and HEVC
--opaque-formats av1,h264
--no-audio

脚本会打印它读取到的默认值，命令行选项会覆盖它们。此处应使用 --opaque-formats 而非 --formats，因为后者也会作用于透明视频，可能导致第一个透明视频失败。脚本应从项目内部运行：它从当前目录而非视频所在位置查找该文件，并以同样方式解析相对 --output-dir。

编码速度慢是设计使然。默认设置下，1080p 视频大约每分钟视频需要数分钟编码，大部分时间花在 AV1 上。应在后台运行或使用工具允许的最长超时，不要因为长时间无输出而终止：当输出不是终端时，脚本每 30 秒报告一次进度。每次运行只处理一个视频。多个视频应依次运行，因为每次编码已用满所有核心。

脚本在编码前会检查依赖并指出缺失项：带 SVT-AV1、x265、x264、libvpx-vp9 的 ffmpeg，以及 macOS 上用于带 alpha 的 HEVC 的 avconvert。应转达该消息。在 macOS 上，brew install ffmpeg 包含所有编码器。在其他平台，透明视频只能得到 VP9（--formats vp9）：应告知用户 Safari 需要 HEVC 文件才能显示透明，且必须在 Mac 上编码。

编码完成后

脚本会打印每个文件及其体积、像素尺寸，以及按浏览器应尝试顺序排列的 <video> 片段。之后：

  • 按项目方式嵌入。如果项目有视频组件、MDX 标签或资源管线，应找到其引用文件的方式并使用，而不是原始 HTML。无论哪种方式都保持 source 顺序：浏览器播放它支持的第一个 source。
  • 预留空间。用 CSS 像素设置 width 和 height（视网膜录制取编码尺寸的一半），避免视频加载时页面跳动。
  • 保留源文件。输出会替换页面上的源文件，但删除原文件由用户决定。

透明视频

当视频有可透视像素，或是 Apple 的带 alpha 的 HEVC 时，脚本走透明路径。可能包含透明但实际未使用的文件（如大多数 GIF）会得到普通格式。如果用户期望透明而脚本未发现，说明导出时丢失了透明。以下导出方式可保留透明：

  • After Effects：Output Module → Channels: RGB + Alpha，Format: QuickTime，Codec: Apple ProRes 4444
  • Final Cut Pro、Motion：Share → Export File → ProRes 4444 或 HEVC with Alpha
  • Blender：Output → FFmpeg，Container: QuickTime，Codec: QTRLE，Color: RGBA

适用场景

适合为网页准备视频素材，尤其是需要多格式兼容、体积优化、封面图和嵌入代码的场景，以及需要透明视频的网页展示。

限制

  • 编码速度较慢，默认设置下 1080p 视频每分钟约需数分钟。
  • 每次运行只处理一个视频。
  • 依赖 ffmpeg 及特定编码器，缺失时无法编码。
  • 非 macOS 平台无法生成带 alpha 的 HEVC，透明视频只能得到 VP9。
  • 具体收费、价格、平台支持范围等资料暂未提供。