對於客戶端和應用程式開發工作,我經常需要 快速視覺化影片內容:
- 產品經理預覽動畫
- 文件或產品需求文件的演示片段
- 用於社群媒體貼文或落地頁的輕量級動畫
在這些情況下,, 從 MP4 檔案中提取幾個關鍵幀,並將它們轉換為循環播放的 WebP 動畫。 通常就足夠了——而且比上傳完整影片要輕得多。.

本文分享了 macOS 的一鍵式 shell 腳本 那:
- 從 MP4 檔案中提取 6 到 12 個均勻分佈的幀。
- 將它們調整為 720 像素寬
- 建立循環播放的 WebP 動畫
- 並自動安裝
ffmpeg如果缺失
所有這些操作都透過終端機中的一條命令完成。.
1. 腳本的功能
在 macOS 上,腳本 extract_even_frames_webp.sh 提供:
- 自動的
ffmpeg檢測和安裝- 檢查是否
ffmpeg可用 - 否則,先安裝 Homebrew(如果需要),然後再安裝
ffmpeg
- 檢查是否
- 甚至幀提取
- 計算影片時長
- 均勻取樣 6-12幀 整個影片片段
- 預設值為 6 幀,但您可以自訂幀數。
- WebP動畫生成
- 將提取的PNG幀合併成一個 循環播放的 WebP
- 輸出寬度為 720像素 預設情況下(高度按比例縮放)
- 品質可透過以下方式調節
-q:v
- 自動清理
- 將中間幀儲存在暫存目錄中
- WebP 產生完成後,刪除暫存目錄。
- 適用於短視頻和長視頻。
- 如果影片很短,幀數會自動減少。
- 對於較長的視頻,幀在整個時長內始終均勻分佈。
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 上使用該腳本
- 儲存腳本 將以上內容另存為
extract_even_frames_webp.sh, 例如,在您的主目錄中。. - 賦予它執行權限
chmod +x extract_even_frames_webp.sh
- 基本用法
./extract_even_frames_webp.sh input.mp4 output.webp
這將:
- 檢查或安裝
ffmpeg - 擷取 6 個等間距的幀
- 產生
輸出.webp寬度為 720 像素
- 請指定幀數(6-12幀)。
./extract_even_frames_webp.sh input.mp4 output.webp 8
這將提取 8 幀而不是預設的 6 幀。.
5. 這種工作流程的優勢
與手動開啟影片編輯器或點擊圖形介面轉換器相比,此腳本具有以下幾個優點:
- 零手動設定
- 自動安裝
ffmpeg(必要時可使用自製軟體) - 無需搜尋安裝程式或記住命令
- 自動安裝
- 智慧幀採樣
- 對於短視頻片段,它會自動減少幀數。
- 對於較長的視頻,幀之間的間隔始終均勻分佈在整個時長內。
- 品質和尺寸控制
-q:v讓您調整 WebP 品質與檔案大小之間的關係比例尺=720:-1提供適合網頁的寬度和一致的寬高比
- 預設循環
-循環 0讓 WebP 動畫無限循環- 非常適合用於預覽、演示以及文件或網站上的細微動態效果。
- 清理磁碟使用情況
- 臨時 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. 擴展思路
這個腳本只是一個起點——你可以輕鬆地根據自己的工作流程進行調整:
- 動態幀計數
- 根據影片長度自動選擇 6 到 12 幀。
- 例如,較長的影片片段需要更多畫面來顯示更多狀態。
- 客製尺寸
- 改變
比例尺=720:-1寬度可根據您的產品團隊偏好而定。 - 或將寬度當作參數公開:
./script.sh in.mp4 out.webp 8 1080
- 改變
- 批量處理
- 將此腳本封裝在另一個循環中以處理所有內容
.mp4資料夾中的文件 - 當您一次匯出一批功能演示時,此功能非常有用。
- 將此腳本封裝在另一個循環中以處理所有內容
作者註
這段腳本源自於我實際的 macOS 開發工作流程,用於將 MP4 影片轉換為輕量級的 WebP 預覽。我在日常客戶開發中使用它來產生文件和社交媒體貼文的演示動畫。 GPT 僅用於輔助翻譯、結構化和潤飾本文的英文版本——腳本邏輯、實作細節和使用模式均來自我自己的專案經驗。.


