macOS のワンクリックスクリプトで MP4 をループする WebP GIF スタイルのアニメーションに変換する

クライアントやアプリ開発の仕事では、 ビデオコンテンツを素早く視覚化する:

• プロダクトマネージャー向けのプレビューアニメーション
• ドキュメントやPRDのデモクリップ
• ソーシャル投稿やランディングページ用の軽量モーション

このような場合、, MP4からいくつかのキーフレームを抽出し、ループするWebPアニメーションに変換する 通常はこれで十分です。また、完全なビデオをアップロードするよりもはるかに軽量です。.

この記事は macOS用のワンクリックシェルスクリプト それ：

• MP4から6～12個の均等間隔のフレームを抽出します
• 幅を720ピクセルに変更します
• ループするWebPアニメーションを構築します
• 自動的にインストールされます ffmpeg 欠けている場合

これらはすべて、ターミナル内の 1 つのコマンドから実行されます。.

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 ffmpeg をインストールする インストールする ffmpeg

2.2 ビデオの長さを取得する

使用 ffプローブ, スクリプトには、 ビデオの合計時間（秒）.
これと希望するフレーム数に基づいて、フレーム間の時間間隔を計算します。.

2.3 フレームを均等にサンプリングする

各フレーム インデックスごとに次の処理が行われます。

• タイムスタンプを計算します = インデックス × 間隔
• 用途 ffmpeg -ss その時間位置にジャンプする
• 正確に1フレームを抽出します
• スケールする スケール=720:-1 幅は720ピクセル、高さは比例します

2.4 WebPアニメーションを構築する

すべてのフレームがPNGとして保存されると、スクリプトは ffmpeg 再度:

• 順番に読んでください（%03d.png)
• アニメーションWebPとしてエンコードする
• セット -ループ0 アニメーションは無限にループします
• 品質管理 -q:v 70 （低いほど品質が高く、ファイルサイズが大きくなります）

2.5 クリーンアップ

すべての中間PNGファイルは、 mktemp -d.
WebPが生成されると、そのディレクトリは次のように削除されます。 rm -rf.

3. 完全なシェルスクリプト: 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 入力.mp4 出力.webp

これにより、次のようになります。

• 確認またはインストール ffmpeg
• 均等間隔の6つのフレームを抽出する
• 生成する 出力.webp 幅720ピクセル

4. フレーム数を指定（6～12）

./extract_even_frames_webp.sh 入力.mp4 出力.webp 8

これにより、デフォルトの 6 フレームではなく 8 フレームが抽出されます。.

5. このワークフローが便利な理由

ビデオ エディターを手動で開いたり、GUI コンバーターをクリックしたりする場合と比較して、このスクリプトにはいくつかの利点があります。

1. 手動設定不要
   • 自動的にインストールされます ffmpeg （必要な場合はHomebrewも）
   • インストーラーを探したりコマンドを覚える必要はありません
2. スマートフレームサンプリング
   • 短いクリップの場合は、フレーム数を自動的に減らします
   • 長い動画の場合、フレームは常に再生時間全体にわたって均等に配置されます
3. 品質とサイズの管理
   • -q:v WebPの品質とファイルサイズを調整できます
   • スケール=720:-1 ウェブに適した幅と一貫したアスペクト比を実現
4. デフォルトでループする
   • -ループ0 WebPアニメーションを永久にループさせる
   • プレビュー、デモ、ドキュメントやサイト上の微妙な動きに最適
5. クリーンディスクの使用
   • 一時的なPNGフレームは一時フォルダに保存され、その後削除されます。
   • 時間の経過とともに残ったファイルが蓄積されることはありません

6. 例: 20秒のMP4をWebPプレビューに変換する

想像してみてほしい。 20秒の機能デモビデオ そして実行します:

./extract_even_frames_webp.sh デモ.mp4 デモプレビュー.webp 6

スクリプトは次のことを行います。

• 約の間隔を計算します 3.33秒
• 6フレームを抽出 0秒、3.33秒、6.66秒、10秒、13.33秒、16.66秒
• 幅を720ピクセルにサイズ変更します
• 構築する ループするWebP アニメーション

次に、この WebP を次の場所にドロップします。

• 製品ドキュメントまたはFeishu / Notionドキュメントとして 軽量プレビュー
• ソーシャル投稿やランディングページとして 自動再生モーションサムネイル
• 完全なビデオでは大きすぎるPPTデッキや社内デモ

7. 拡張のアイデア

このスクリプトは出発点であり、独自のワークフローに合わせて簡単に調整できます。

1. ダイナミックフレームカウント
   • 動画の長さに応じて6～12フレームを自動的に選択
   • 例えば、より多くの状態を表示するために、より長いクリップにはより多くのフレームが必要です
2. カスタムサイズ
   • 変化 スケール=720:-1 製品チームが好む任意の幅に
   • または、幅をパラメータとして公開します。 ./script.sh 入力.mp4 出力.webp 8 1080
3. バッチ処理
   • このスクリプトを別のループでラップして、すべてを処理します。 .mp4 フォルダ内のファイル
   • 機能デモを一括してエクスポートするときに便利です

著者ノート

このスクリプトは、MP4動画を軽量なWebPプレビューに変換する私の実際のmacOS開発ワークフローから生まれました。クライアントの開発では、ドキュメントやソーシャルメディア投稿用のデモアニメーションを生成するために、このスクリプトを日々使用しています。GPTは、この記事の英語版の翻訳、構成、および修正にのみ使用しています。スクリプトのロジック、実装の詳細、使用パターンはすべて、私自身のプロジェクト経験に基づいています。.

著者について

チンシェンピン

Sam Qinです。クライアント兼モバイル開発者として、アプリとフロントエンドプラットフォーム全体でスムーズで安定したエクスペリエンスの構築に注力しています。パフォーマンスチューニング、クラッシュ削減、そして複雑な機能を実際のユーザーにとってシンプルで高速に感じられるようにすることに注力しています。Knowledge Hubでは、デバッグノート、クライアントサイドアーキテクチャの実践、そして実際のプロジェクトで実証されたヒントを共有しています。ツールやAIを活用して、よりスムーズでスムーズなリリースを実現する方法も紹介しています。.

著者の投稿を見る