Skrip macOS Sekali Klik untuk Mengubah MP4 menjadi Animasi Bergaya GIF WebP yang Berulang

Untuk pekerjaan pengembangan klien dan aplikasi, saya sering membutuhkan... visualisasikan konten video dengan cepat:

• pratinjau animasi untuk manajer produk
• klip demo untuk dokumen atau PRD
• Animasi ringan untuk postingan media sosial atau halaman arahan.

Dalam kasus-kasus ini, Mengekstraksi beberapa bingkai kunci dari file MP4 dan mengubahnya menjadi animasi WebP yang berulang. biasanya sudah cukup—dan jauh lebih ringan daripada mengunggah video lengkap.

Artikel ini membagikan skrip shell sekali klik untuk macOS itu:

• mengekstrak 6–12 frame yang berjarak sama dari file MP4
• mengubah ukurannya menjadi lebar 720px
• membuat animasi WebP berulang
• dan menginstal secara otomatis ffmpeg jika hilang

Semua ini dijalankan dari satu perintah di Terminal.

1. Apa yang dilakukan skrip tersebut

Di macOS, skripnya extract_even_frames_webp.sh menyediakan:

1. Otomatis ffmpeg deteksi dan pemasangan
   • Memeriksa apakah ffmpeg tersedia
   • Jika tidak, instal Homebrew (jika diperlukan) dan kemudian instal ffmpeg
2. Ekstraksi bingkai yang merata
   • Menghitung durasi video
   • Sampel merata 6–12 bingkai di sepanjang klip tersebut
   • Secara default, jumlah frame adalah 6, tetapi Anda dapat menyesuaikan jumlahnya.
3. Pembuatan animasi WebP
   • Menggabungkan frame PNG yang diekstrak menjadi sebuah perulangan WebP
   • Lebar keluaran adalah 720px Secara default (tinggi diskalakan secara proporsional)
   • Kualitas dapat disesuaikan melalui -q:v
4. Pembersihan otomatis
   • Menyimpan frame perantara di direktori sementara.
   • Menghapus direktori sementara setelah WebP dihasilkan.
5. Dapat digunakan untuk video pendek maupun panjang.
   • Jika videonya sangat pendek, jumlah frame akan dikurangi secara otomatis.
   • Untuk video yang lebih panjang, frame selalu diberi jarak yang sama sepanjang durasi video.

2. Bagaimana cara kerjanya di balik layar

Berikut logika dasar di balik skrip ini.

2.1 Periksa dependensi

Skrip tersebut pertama-tama memeriksa apakah ffmpeg terpasang:

• Kegunaan perintah -v ffmpeg
• Jika tidak ditemukan, maka akan dilakukan pengecekan. buatan
  • Jika Homebrew tidak ada, maka Homebrew akan diinstal.
  • Kemudian menggunakan instal ffmpeg dengan perintah brew untuk memasang ffmpeg

2.2 Mengambil durasi video

Menggunakan ffprobe, naskah tersebut berbunyi total durasi video dalam detik.
Berdasarkan hal ini dan jumlah frame yang diinginkan, program akan menghitung interval waktu antar frame.

2.3 Mengambil sampel bingkai secara merata

Untuk setiap indeks bingkai, maka:

• Menghitung stempel waktu = indeks × interval
• Kegunaan ffmpeg -ss untuk melompat ke posisi waktu tersebut
• Mengekstrak tepat satu bingkai
• Mengukurnya dengan skala=720:-1 jadi lebarnya 720px dan tingginya proporsional

2.4 Membuat animasi WebP

Setelah semua frame disimpan sebagai PNG, skrip akan memanggil... ffmpeg sekali lagi ke:

• Bacalah secara berurutan (%03d.png)
• Encode mereka sebagai WebP animasi.
• Mengatur -loop 0 jadi animasi tersebut berulang tanpa henti
• Kendalikan kualitas dengan -q:v 70 (nilai lebih rendah = kualitas lebih tinggi, ukuran file lebih besar)

2.5 Bersihkan

Semua file PNG perantara disimpan dalam direktori sementara yang dibuat oleh mktemp -d.
Setelah WebP dihasilkan, direktori tersebut dihapus dengan rm -rf.

3. Skrip shell lengkap: extract_even_frames_webp.sh

Anda dapat menyimpan skrip berikut sebagai extract_even_frames_webp.sh di Mac Anda:

#!/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. Cara menggunakan skrip di macOS

1. Simpan skripnya Simpan konten di atas sebagai extract_even_frames_webp.sh, misalnya di direktori beranda Anda.
2. Berikan izin eksekusi.

chmod +x extract_even_frames_webp.sh

3. Penggunaan dasar

./extract_even_frames_webp.sh input.mp4 output.webp

Ini akan:

• Periksa atau pasang ffmpeg
• Ekstrak 6 bingkai yang berjarak sama
• Menghasilkan output.webp dengan lebar 720px

4. Tentukan jumlah bingkai (6–12)

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

Ini akan mengekstrak 8 frame, bukan 6 frame seperti default.

5. Mengapa alur kerja ini bermanfaat

Dibandingkan dengan membuka editor video secara manual atau mengklik melalui konverter GUI, skrip ini memiliki beberapa keunggulan:

1. Tidak ada pengaturan manual sama sekali
   • Menginstal secara otomatis ffmpeg (dan Homebrew jika diperlukan)
   • Tidak perlu mencari installer atau mengingat perintah.
2. Pengambilan sampel bingkai cerdas
   • Untuk klip pendek, jumlah frame akan dikurangi secara otomatis.
   • Untuk video yang lebih panjang, frame selalu diberi jarak yang sama sepanjang durasi video.
3. Kontrol kualitas dan ukuran
   • -q:v Memungkinkan Anda untuk menyesuaikan kualitas WebP versus ukuran file.
   • skala=720:-1 memberikan lebar yang ramah web dan rasio aspek yang konsisten
4. Pengulangan secara default
   • -loop 0 membuat animasi WebP berulang tanpa henti
   • Sangat cocok untuk pratinjau, demo, dan gerakan halus pada dokumen atau situs web.
5. Bersihkan penggunaan disk.
   • Bingkai PNG sementara disimpan dalam folder sementara dan dihapus setelahnya.
   • Tidak ada berkas sisa yang menumpuk seiring waktu.

6. Contoh: mengubah MP4 berdurasi 20 detik menjadi pratinjau WebP

Bayangkan Anda memiliki sebuah Video demo fitur berdurasi 20 detik dan jalankan:

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

Skrip tersebut akan:

• Hitung interval sekitar 3,33 detik
• Ekstrak 6 frame pada 0 detik, 3,33 detik, 6,66 detik, 10 detik, 13,33 detik, 16,66 detik
• Ubah ukurannya menjadi lebar 720px.
• Bangun sebuah perulangan WebP animasi

Anda kemudian dapat memasukkan WebP ini ke dalam:

• Dokumen produk atau dokumen Feishu/Notion sebagai pratinjau ringan
• Postingan media sosial atau halaman arahan sebagai thumbnail bergerak yang diputar otomatis
• Presentasi PowerPoint dan demo internal di mana video lengkap akan terlalu berlebihan.

7. Ide untuk pengembangan lebih lanjut

Skrip ini adalah titik awal—Anda dapat dengan mudah menyesuaikannya dengan alur kerja Anda sendiri:

1. Jumlah frame dinamis
   • Secara otomatis memilih antara 6–12 frame berdasarkan panjang video.
   • misalnya lebih banyak frame untuk klip yang lebih panjang untuk menampilkan lebih banyak negara bagian
2. Ukuran khusus
   • Mengubah skala=720:-1 dengan lebar apa pun yang disukai tim produk Anda.
   • Atau tampilkan lebar sebagai parameter: ./script.sh in.mp4 out.webp 8 1080
3. Pemrosesan batch
   • Bungkus skrip ini dalam perulangan lain untuk memproses semuanya. .mp4 berkas-berkas dalam sebuah folder
   • Berguna saat Anda mengekspor sejumlah demo fitur sekaligus.

Catatan penulis

Skrip ini berasal dari alur kerja pengembangan macOS saya yang sebenarnya untuk mengubah video MP4 menjadi pratinjau WebP yang ringan. Saya menggunakannya dalam pengembangan klien sehari-hari untuk menghasilkan animasi demo untuk dokumentasi dan postingan media sosial. GPT hanya digunakan untuk membantu menerjemahkan, menyusun, dan menyempurnakan versi bahasa Inggris dari artikel ini—logika skrip, detail implementasi, dan pola penggunaan semuanya berasal dari pengalaman proyek saya sendiri.

Tentang Penulis

qinshengping

Saya Sam Qin, seorang pengembang aplikasi dan mobile yang fokus membangun pengalaman yang lancar dan stabil di berbagai platform aplikasi dan front-end. Saya mengerjakan penyempurnaan performa, pengurangan crash, dan membuat fitur-fitur kompleks terasa sederhana dan cepat bagi pengguna sebenarnya. Di Knowledge Hub, saya berbagi catatan debugging, praktik arsitektur sisi klien, dan kiat-kiat yang telah teruji dari proyek-proyek nyata, termasuk bagaimana saya menggunakan alat dan AI untuk merilis versi yang lebih baik dengan lebih sedikit kejutan.

Lihat postingan penulis