一键式 macOS 脚本，可将 MP4 转换为循环播放的 WebP GIF 风格动画

对于客户端和应用程序开发工作，我经常需要 快速可视化视频内容:

• 产品经理预览动画
• 文档或产品需求文档的演示片段
• 用于社交媒体帖子或落地页的轻量级动画

在这些情况下，, 从 MP4 文件中提取几个关键帧，并将它们转换为循环播放的 WebP 动画。 通常就足够了——而且比上传完整视频要轻便得多。.

本文分享了 macOS 的一键式 shell 脚本 那：

• 从 MP4 文件中提取 6 到 12 个均匀分布的帧。
• 将它们调整为 720 像素宽
• 构建循环播放的 WebP 动画
• 并自动安装 ffmpeg 如果缺失

所有这些操作都通过终端中的一条命令完成。.

1. 脚本的功能

在 macOS 上，脚本 extract_even_frames_webp.sh 提供：

1. 自动的 ffmpeg 检测和安装
   • 检查是否 ffmpeg 可用
   • 否则，先安装 Homebrew（如果需要），然后再安装 ffmpeg
2. 甚至帧提取
   • 计算视频时长
   • 均匀取样 6-12帧 整个视频片段
   • 默认值为 6 帧，但您可以自定义帧数。
3. WebP动画生成
   • 将提取的PNG帧合并成一个 循环播放的 WebP
   • 输出宽度为 720像素 默认情况下（高度按比例缩放）
   • 质量可通过以下方式调节 -q:v
4. 自动清理
   • 将中间帧存储在临时目录中
   • WebP 生成完成后，删除临时目录。
5. 适用于短视频和长视频。
   • 如果视频很短，帧数会自动减少。
   • 对于较长的视频，帧在整个时长内始终均匀分布。

2. 其底层工作原理

以下是该脚本的基本逻辑。.

2.1 检查依赖关系

脚本首先检查是否 ffmpeg 已安装：

• 用途 命令 -v ffmpeg
• 如果未找到，则检查 酿造
  • 如果缺少 Homebrew，它会安装 Homebrew。
  • 然后使用 brew install ffmpeg 安装 ffmpeg

2.2 获取视频时长

使用 ffprobe, 脚本读取 视频总时长（秒）.
根据此数据和所需的帧数，计算帧之间的时间间隔。.

2.3 均匀采样帧

对于每个帧索引，它：

• 计算时间戳 = 索引 × 区间
• 用途 ffmpeg -ss 跳转到那个时间位置
• 提取一帧
• 用 比例尺=720:-1 所以宽度是 720 像素，高度是成比例的。

2.4 构建 WebP 动画

所有帧都保存为 PNG 格式后，脚本会调用 ffmpeg 再次致：

• 请按顺序阅读（%03d.png)
• 将它们编码为动画 WebP 格式
• 放 -循环 0 所以动画会无限循环播放。
• 通过控制质量 -q:v 70 （数值越低，文件越大，画质也越高）

2.5 清理

所有中间 PNG 文件都存储在由……创建的临时目录中。 mktemp -d.
WebP 生成后，该目录将被删除。 rm -rf.

3. 完整的 shell 脚本：extract_even_frames_webp.sh

您可以将以下脚本保存为 extract_even_frames_webp.sh 在你的Mac电脑上：

#!/bin/bash

# Usage: ./extract_even_frames_webp.sh input.mp4 output.webp [frames]
# frames is optional, default 6, maximum 12

INPUT="$1"
OUTPUT="$2"
FRAMES="${3:-6}"

# Cap maximum frames at 12
if [ "$FRAMES" -gt 12 ]; then
    FRAMES=12
fi

if [ -z "$INPUT" ] || [ -z "$OUTPUT" ]; then
    echo "Usage: $0 input.mp4 output.webp [frames]"
    exit 1
fi

# ---------------------------------
# 1️⃣ Check ffmpeg
# ---------------------------------
if ! command -v ffmpeg >/dev/null 2>&1; then
    echo "⚠️ ffmpeg not found, starting installation..."
    if ! command -v brew >/dev/null 2>&1; then
        echo "⚠️ Homebrew not found, installing Homebrew..."
        /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
        echo "✅ Homebrew installed"
    else
        echo "✅ Homebrew already installed"
    fi
    brew update
    brew install ffmpeg
    if ! command -v ffmpeg >/dev/null 2>&1; then
        echo "❌ ffmpeg installation failed, please check manually"
        exit 1
    fi
    echo "🎉 ffmpeg installed successfully!"
else
    echo "✅ ffmpeg is already installed"
fi

# ---------------------------------
# 2️⃣ Get video duration
# ---------------------------------
DURATION=$(ffprobe -v error -show_entries format=duration -of csv=p=0 "$INPUT")
if [[ -z "$DURATION" ]]; then
    echo "❌ Failed to get video duration"
    exit 1
fi
DURATION=${DURATION%.*}  # integer seconds

# If video is shorter than requested frames, match frame count to duration
if [ "$DURATION" -lt "$FRAMES" ]; then
    FRAMES=$DURATION
fi

echo "📹 Video length: ${DURATION}s, extracting $FRAMES frames evenly"

# ---------------------------------
# 3️⃣ Create temporary directory
# ---------------------------------
TMPDIR=$(mktemp -d)

# ---------------------------------
# 4️⃣ Calculate interval
# ---------------------------------
INTERVAL=$(echo "scale=6; $DURATION/$FRAMES" | bc)
echo "⏱ Frame interval: $INTERVAL seconds"

# ---------------------------------
# 5️⃣ Extract frames
# ---------------------------------
for i in $(seq 0 $(($FRAMES-1))); do
    TIME=$(echo "$i * $INTERVAL" | bc)
    printf -v FILENAME "%03d.png" $((i+1))
    ffmpeg -ss "$TIME" -i "$INPUT" -frames:v 1 -vf "scale=720:-1" \
        "$TMPDIR/$FILENAME" -hide_banner -loglevel error
done

# ---------------------------------
# 6️⃣ Generate animated WebP
# ---------------------------------
ffmpeg -y -i "$TMPDIR/%03d.png" -vcodec libwebp -lossless 0 -q:v 70 \
    -loop 0 -preset picture "$OUTPUT" -hide_banner -loglevel error

# ---------------------------------
# 7️⃣ Clean up
# ---------------------------------
rm -rf "$TMPDIR"

echo "🎉 Done! Generated file: $OUTPUT"

4. 如何在 macOS 上使用该脚本

1. 保存脚本 将以上内容另存为 extract_even_frames_webp.sh, 例如，在您的主目录中。.
2. 赋予它执行权限

chmod +x extract_even_frames_webp.sh

3. 基本用法

./extract_even_frames_webp.sh input.mp4 output.webp

这将：

• 检查或安装 ffmpeg
• 提取 6 个等间距的帧
• 生成 输出.webp 宽度为 720 像素

4. 请指定帧数（6-12帧）。

./extract_even_frames_webp.sh input.mp4 output.webp 8

这将提取 8 帧而不是默认的 6 帧。.

5. 这种工作流程的优势

与手动打开视频编辑器或点击图形界面转换器相比，该脚本具有以下几个优点：

1. 零手动设置
   • 自动安装 ffmpeg （必要时可使用自制软件）
   • 无需搜索安装程序或记住命令
2. 智能帧采样
   • 对于短视频片段，它会自动减少帧数。
   • 对于较长的视频，帧之间的间隔始终均匀分布在整个时长内。
3. 质量和尺寸控制
   • -q:v 允许您调整 WebP 质量与文件大小之间的关系
   • 比例尺=720:-1 提供适合网页的宽度和一致的宽高比
4. 默认循环
   • -循环 0 使 WebP 动画无限循环
   • 非常适合用于预览、演示以及文档或网站上的细微动态效果。
5. 清理磁盘使用情况
   • 临时 PNG 帧存储在临时文件夹中，之后会被删除。
   • 不会出现文件堆积的情况

6. 示例：将 20 秒的 MP4 视频转换为 WebP 预览

想象一下你有一个 20秒功能演示视频 然后跑：

./extract_even_frames_webp.sh demo.mp4 demo-preview.webp 6

脚本将：

• 计算一个大约为 的区间。 3.33秒
• 提取 6 帧 0秒、3.33秒、6.66秒、10秒、13.33秒、16.66秒
• 将它们调整为 720 像素宽
• 建造一个 循环播放的 WebP 动画片

然后您可以将此 WebP 文件拖放到：

• 产品文档或飞书/Notion文档作为 轻量级预览
• 社交帖子或落地页作为 自动播放动态缩略图
• PPT演示文稿和内部演示，在这种情况下，制作完整视频就显得多余了。

7. 扩展思路

这个脚本只是一个起点——你可以轻松地根据自己的工作流程进行调整：

1. 动态帧计数
   • 根据视频长度自动选择 6 到 12 帧。
   • 例如，较长的视频片段需要更多帧来显示更多状态。
2. 定制尺寸
   • 改变 比例尺=720:-1 宽度可根据您的产品团队偏好而定。
   • 或者将宽度作为参数公开： ./script.sh in.mp4 out.webp 8 1080
3. 批量处理
   • 将此脚本封装在另一个循环中以处理所有内容 .mp4 文件夹中的文件
   • 当您一次性导出一批功能演示时，此功能非常有用。

作者注

这段脚本源自我实际的 macOS 开发工作流程，用于将 MP4 视频转换为轻量级的 WebP 预览。我在日常客户开发中使用它来生成文档和社交媒体帖子的演示动画。GPT 仅用于辅助翻译、结构化和润色本文的英文版本——脚本逻辑、实现细节和使用模式均来自我自己的项目经验。.

关于作者

勤升坪

我是 Sam Qin，一名专注于构建流畅、稳定的跨应用和前端平台用户体验的客户端和移动应用开发者。我的工作包括性能调优、减少崩溃，以及让复杂的功能对真实用户来说简单易用。在知识中心，我会分享调试笔记、客户端架构实践以及来自真实项目的实战经验，包括如何利用工具和人工智能来发布更优质、更少意外的版本。.

查看作者的帖子