macOS-Skript mit einem Klick zur Umwandlung von MP4 in sich wiederholende WebP-GIF-Animationen

Für Kunden- und App-Entwicklungsprojekte benötige ich häufig Videoinhalte schnell visualisieren:

• Vorschau-Animationen für Produktmanager
• Democlips für Dokumentationen oder PRDs
• Leichte Animationen für Social-Media-Posts oder Landingpages

In diesen Fällen, Extrahieren einiger Schlüsselbilder aus einer MP4-Datei und Umwandlung dieser in eine sich wiederholende WebP-Animation ist in der Regel ausreichend – und viel kleiner als das Hochladen eines kompletten Videos.

Dieser Artikel teilt eine Ein-Klick-Shell-Skript für macOS Das:

• Extrahiert 6–12 gleichmäßig verteilte Einzelbilder aus einer MP4-Datei
• ändert ihre Größe auf 720px Breite
• Erstellt eine WebP-Animation mit Endlosschleife
• und installiert sich automatisch ffmpeg falls es fehlt

Das alles wird über einen einzigen Befehl im Terminal ausgeführt.

1. Was das Skript bewirkt

Unter macOS lautet das Skript extract_even_frames_webp.sh bietet:

1. Automatisch ffmpeg Erkennung und Installation
   • Prüft, ob ffmpeg ist verfügbar
   • Falls nicht, wird Homebrew (falls erforderlich) installiert und anschließend installiert ffmpeg
2. Gleichmäßige Frame-Extraktion
   • Berechnet die Videodauer
   • Gleichmäßige Proben 6–12 Bilder im gesamten Clip
   • Standardmäßig sind es 6 Frames, aber Sie können die Anzahl anpassen.
3. WebP-Animationsgenerierung
   • Kombiniert die extrahierten PNG-Frames zu einem WebP-Schleife
   • Ausgabebreite ist 720px Standardmäßig (die Höhe wird proportional skaliert)
   • Die Qualität ist einstellbar über -q:v
4. Automatische Reinigung
   • Speichert Zwischenbilder in einem temporären Verzeichnis
   • Löscht das temporäre Verzeichnis, nachdem die WebP-Datei generiert wurde.
5. Funktioniert sowohl mit kurzen als auch mit langen Videos
   • Bei sehr kurzen Videos wird die Anzahl der Einzelbilder automatisch reduziert.
   • Bei längeren Videos sind die Einzelbilder über die gesamte Dauer gleichmäßig verteilt.

2. Wie es unter der Haube funktioniert

Hier ist die grundlegende Logik hinter dem Skript.

2.1 Abhängigkeiten prüfen

Das Skript prüft zunächst, ob ffmpeg ist installiert:

• Verwendung Befehl -v ffmpeg
• Falls nicht gefunden, wird geprüft, ob brauen
  • Falls Homebrew fehlt, wird es installiert.
  • Dann verwendet brew install ffmpeg zur Installation ffmpeg

2.2 Videodauer abrufen

Verwendung ffprobe, so lautet der Text im Skript Gesamtlänge des Videos in Sekunden.
Auf dieser Grundlage und der gewünschten Anzahl an Einzelbildern berechnet es das Zeitintervall zwischen den Einzelbildern.

2.3 Gleichmäßige Abtastung von Rahmen

Für jeden Frame-Index gilt Folgendes:

• Berechnet den Zeitstempel = Index × Intervall
• Verwendung ffmpeg -ss um zu dieser Zeitposition zu springen
• Extrahiert genau ein Frame
• Skaliert es mit Maßstab=720:-1 Die Breite beträgt also 720 Pixel und die Höhe ist proportional.

2.4 WebP-Animation erstellen

Sobald alle Frames als PNGs gespeichert sind, ruft das Skript Folgendes auf: ffmpeg erneut an:

• Lesen Sie sie der Reihe nach (%03d.png)
• Kodieren Sie sie als animiertes WebP
• Satz -Schleife 0 Die Animation läuft also in einer Endlosschleife.
• Qualitätskontrolle mit -q:v 70 (niedriger = höhere Qualität, größere Datei)

2.5 Aufräumen

Alle temporären PNG-Dateien werden in einem temporären Verzeichnis gespeichert, das von mktemp -d.
Nachdem die WebP-Datei generiert wurde, wird dieses Verzeichnis gelöscht mit rm -rf.

3. Vollständiges Shell-Skript: extract_even_frames_webp.sh

Sie können das folgende Skript speichern als extract_even_frames_webp.sh auf Ihrem 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. So verwenden Sie das Skript unter macOS

1. Speichern Sie das Skript. Speichern Sie den obigen Inhalt unter extract_even_frames_webp.sh, zum Beispiel in Ihrem Home-Verzeichnis.
2. Erteilen Sie die Ausführungsberechtigung.

chmod +x extract_even_frames_webp.sh

3. Grundlegende Verwendung

./extract_even_frames_webp.sh input.mp4 output.webp

Dies wird:

• Prüfen oder installieren ffmpeg
• Extrahieren Sie 6 gleichmäßig verteilte Frames
• Erzeugen output.webp bei einer Breite von 720px

4. Geben Sie die Anzahl der Frames an (6–12).

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

Dadurch werden 8 Frames anstelle der standardmäßigen 6 extrahiert.

5. Warum dieser Arbeitsablauf nützlich ist

Im Vergleich zum manuellen Öffnen eines Videoeditors oder dem Durchklicken eines GUI-Konverters bietet dieses Skript einige Vorteile:

1. Keine manuelle Einrichtung erforderlich
   • Installiert automatisch ffmpeg (und gegebenenfalls selbstgebrautes)
   • Sie müssen weder nach Installationsprogrammen suchen noch sich Befehle merken.
2. Intelligente Frame-Abtastung
   • Bei kurzen Clips wird die Anzahl der Einzelbilder automatisch reduziert.
   • Bei längeren Videos sind die Einzelbilder immer gleichmäßig über die gesamte Dauer verteilt.
3. Qualitäts- und Größenkontrolle
   • -q:v ermöglicht es Ihnen, die WebP-Qualität im Verhältnis zur Dateigröße anzupassen.
   • Maßstab=720:-1 bietet eine webfreundliche Breite und ein einheitliches Seitenverhältnis
4. Schleife standardmäßig
   • -Schleife 0 lässt die WebP-Animation in einer Endlosschleife laufen
   • Ideal für Vorschauen, Demos und dezente Animationen in Dokumenten oder auf Websites.
5. Saubere Festplattennutzung
   • Temporäre PNG-Frames werden in einem temporären Ordner gespeichert und anschließend gelöscht.
   • Keine Ansammlung von ungenutzten Dateien im Laufe der Zeit

6. Beispiel: Umwandlung einer 20-sekündigen MP4-Datei in eine WebP-Vorschau

Stellen Sie sich vor, Sie haben ein 20-sekündiges Feature-Demo-Video und ausführen:

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

Das Skript wird:

• Berechne ein Intervall von ungefähr 3,33 Sekunden
• Extrahieren Sie 6 Frames bei 0s, 3,33s, 6,66s, 10s, 13,33s, 16,66s
• Ändern Sie die Größe auf 720px Breite.
• Baue einen WebP-Schleife Animation

Anschließend können Sie diese WebP-Datei in Folgendes einfügen:

• Produktdokumente oder Feishu-/Notion-Dokumente als leichte Vorschau
• Social-Media-Posts oder Landingpages als automatisch abspielendes Bewegungs-Thumbnail
• PowerPoint-Präsentationen und interne Demos, bei denen ein vollständiges Video übertrieben wäre

7. Ideen zur Erweiterung

Dieses Skript ist ein Ausgangspunkt – Sie können es leicht an Ihren eigenen Arbeitsablauf anpassen:

1. Dynamische Bildzählung
   • Automatische Auswahl zwischen 6 und 12 Einzelbildern basierend auf der Videolänge
   • z. B. mehr Einzelbilder für längere Clips, um mehr Zustände darzustellen
2. Sondergrößen
   • Ändern Maßstab=720:-1 auf jede von Ihrem Produktteam bevorzugte Breite
   • Oder die Breite als Parameter offenlegen: ./script.sh in.mp4 out.webp 8 1080
3. Stapelverarbeitung
   • Umschließen Sie dieses Skript mit einer weiteren Schleife, um alle Verarbeitungsschritte durchzuführen. .mp4 Dateien in einem Ordner
   • Nützlich, wenn Sie mehrere Feature-Demos gleichzeitig exportieren.

Anmerkung des Autors

Dieses Skript stammt aus meinem realen macOS-Entwicklungsworkflow zur Umwandlung von MP4-Videos in schlanke WebP-Vorschauen. Ich verwende es täglich in der Kundenentwicklung, um Demo-Animationen für Dokumentationen und Social-Media-Posts zu generieren. GPT wurde lediglich zur Übersetzung, Strukturierung und Optimierung der englischen Version dieses Artikels verwendet – die Skriptlogik, Implementierungsdetails und Anwendungsmuster basieren vollständig auf meiner eigenen Projekterfahrung.

Über den Autor

qinshengping

Ich bin Sam Qin, Client- und Mobile-Entwickler mit dem Fokus auf reibungslose und stabile Benutzererlebnisse für Apps und Frontend-Plattformen. Meine Aufgaben umfassen Performance-Optimierung, Reduzierung von Abstürzen und die Entwicklung komplexer Funktionen, die sich für Endnutzer einfach und schnell anfühlen. Im Knowledge Hub teile ich Debugging-Notizen, Best Practices für die Client-seitige Architektur und praxiserprobte Tipps aus realen Projekten. Dazu gehört auch, wie ich Tools und KI einsetze, um bessere Releases mit weniger Überraschungen zu veröffentlichen.

Siehe die Beiträge des Autors.