瀏覽器裡的 FFmpeg：零上傳、離線跑的影片編輯器，30 種操作一次看完

前言

每次要剪個影片、轉個格式，第一個浮現的畫面是什麼？

打開 DaVinci Resolve 等三分鐘、開啟 Premiere 等五分鐘、或者打開某個線上工具、上傳檔案、等進度條、等伺服器處理、然後下載——整套流程下來，一杯咖啡都涼了。

如果你曾經受夠了這種流程，這篇文章就是為你寫的。

今天介紹一個叫 ffmpeg-webCLI 的開源專案，它把整個 FFmpeg 塞進你的瀏覽器裡。沒有伺服器上傳、不需要安裝軟體、甚至離線也能跑。30 多種影片操作，從格式轉換到浮水印疊加，全部在本地完成。

重點是：你看完這篇文章的時候，應該已經會用了。

先搞懂一個問題：FFmpeg 怎麼跑在瀏覽器裡？

FFmpeg 原本是命令列工具，Linux 伺服器上的常客。但 FFmpeg 團隊做了件很酷的事——把核心編譯成 WebAssembly（WASM），讓它能在瀏覽器裡跑。

ffmpeg-webCLI 的背後就是 ffmpeg.wasm 這個庫。簡單說，你第一次打開網頁時，會下載約 31 MB 的 WASM 檔案（之後瀏覽器會快取，下次幾乎秒開）。之後所有影片處理都在你的裝置上完成，檔案不離開你的電腦。

這意味著什麼？

• 隱私：你的影片不會上傳到任何伺服器
• 速度：不走網路傳輸，直接處理本地檔案
• 離線：首次載入後，關掉網路照樣能用

第一步：打開它，花 30 秒上手

直接到 ffmpeg-webCLI 的官方網站（或把原始碼 clone 下來用 npx serve docs 在本機跑）。

畫面很乾淨，就三個步驟：

1. 點 Load ffmpeg（首次會下載 WASM 檔案，等個幾秒）
2. 拖入或選擇你的影片檔案
3. 選操作、調整參數、點 Process Video

就這三步。沒有選單、沒有面板堆疊、沒有學不完的功能表。

小提醒：COOP / COEP Headers

如果你自己在本機部署，需要設定兩個 HTTP Headers：

這是因為 ffmpeg.wasm 用到了 SharedArrayBuffer，瀏覽器需要這兩個 Header 才能啟動。專案自帶的 server.js 或 npx serve 都會自動幫你設定好。

實用操作指南：從新手到進階

下面按照使用頻率，從最實用的功能開始介紹。每個操作都附帶參數說明，邊看邊學。

🔄 格式轉換：最基礎也最常用

場景：同事傳了一個 WebM 給你，但你的播放器只認 MP4。

操作很直覺：選擇「Format Converter」→ 選目標格式（MP4 / WebM / MKV / MOV / AVI）→ 處理。

背後預設會用 H.264 + AAC 編碼（MP4 的話），這是相容性最好的組合。如果你追求更小的檔案，選 WebM（VP9 + Opus），同樣品質下比 MP4 小約 45%。

🗜 壓縮：檔案太大發不出去？

場景：手機拍了段 4K 影片，檔案 2 GB，傳 LINE 傳到懷疑人生。

這裡有一個關鍵參數叫 CRF（Constant Rate Factor）：

CRF 越小，品質越好、檔案越大。專案還有一個 Encoding Preset 選項，從 ultrafast 到 veryslow。越快越省時間但壓縮效果差，越慢越花時間但壓縮效果更好。一般用 medium 就好。

畫面右側有即時大小預覽，你拖動 CRF 滑桿的同時就能看到預估輸出大小，不用猜。

✂️ 剪輯與裁切：只要那 10 秒

剪輯（Trim）：畫面上有時間軸滑桿，拖動設定開始和結束時間。這個操作會套用在所有其他操作之上——也就是說，你可以先剪出一段、再壓縮、再轉 GIF，一次搞定。

裁切（Crop）：指定 X/Y 偏移量和寬高，從原始畫面中切出一個矩形區域。預設會自動填入影片的尺寸，你只需要把數值往下拉。

🎞 轉 GIF：雙趟 Palette 生成

場景：要把一段影片轉成 GIF 貼到 Slack 或 Line。

GIF Maker 的操作很簡單：選時間範圍 → 設定幀率和輸出寬度（高度會按比例自動調整）→ 處理。

這裡有個細節值得注意：它用了雙趟（two-pass）palette 生成。簡單說就是先掃描一次影片來最佳化 palette，再根據這個 palette 生成 GIF。效果就是顏色比單趟的 GIF 好很多，不會出現一堆雜色點。

🎵 音訊處理：抽離、混音、調整音量

音訊抽離（Audio Extraction）：把影片的音訊軌獨立出來，支援 MP3 / AAC / WAV / OGG / FLAC 五種格式。

混音（Mix Audio）：可以加入第二段音訊作為背景音樂。有兩個滑桿：

• Original audio volume（原始音訊音量，0-2，預設 1.0）
• Music volume（背景音樂音量，0-2，預設 0.30）

背景音樂如果比影片短，會自動loop。

音量調整（Volume）：單一滑桿控制音量倍數（0 = 靜音，1.0 = 不變，最大 4 倍）。影片軌是 stream-copy，不會重新編碼。

⚡ 加速 / 減速：0.25x 到 4x

場景：要把一段 5 分鐘的影片壓縮成 30 秒的短片。

速度調整範圍是 0.25x 到 4x。它會同時調整影片的 PTS 和音訊的 atempo filter，所以音畫是同步的。如果倍率超出單個 filter 的處理範圍（0.5-2.0），它會自動鏈接多個 atempo 階段來處理。

🖼 浮水印：加 Logo 只要三秒

場景：影片要發布到 YouTube，想加上自己的 Logo。

操作：上傳 Logo 圖片（PNG 透明底效果最好）→ 選位置（左上 / 右上 / 左下 / 右下 / 正中）→ 設定 Logo 寬度（佔影片寬度的百分比，預設 15%）。

背後用的是 FFmpeg 的 overlay filter，影片會重新編碼，音訊則 stream-copy。

📐 Pad / Letterbox：加黑邊湊比例

場景：你拍的影片是 4:3，但要上傳到 YouTube（16:9），不想裁切也不想拉伸。

Pad 功能會把影片縮放到能完整放入目標畫布，空白處用你選的顏色填滿。支援的比例：

填色支援黑、白、灰三種。

📊 音訊標準化：讓音量達到廣播級

場景：錄了一段 Podcast，但音量忽大忽小，聽起來很不舒服。

Normalize Audio 使用 FFmpeg 的 loudnorm filter（EBU R128 標準），三選一：

影片軌 stream-copy，只有音訊被處理，所以速度很快。

🌀 降噪、銳化、模糊

降噪（Denoise）：用 hqdn3d filter，有三檔強度：

• Light（2:2:3:3）：輕微雜訊、HDR 內容
• Medium（4:4:6:6）：一般降噪
• Heavy（10:10:15:15）：嚴重雜訊 / 低光拍攝

銳化（Sharpen）：用 unsharp filter，同樣三檔。

模糊（Blur）：用 boxblur filter，三檔。

這些效果在手機低光拍攝或舊影片修復時特別好用。

⏪ 倒放與 Boomerang

倒放（Reverse）：影片和音訊一起倒著播。

Boomerang：正播一次、倒播一次，經典的迴環效果。音訊會被移除（因為倒放的音訊通常聽起來很奇怪）。

🔗 進階：合併、畫中畫、左右並排

合併（Concatenate）：把第二段影片接在第一段後面。支援不同解析度、幀率、編碼的影片自動處理（會重新編碼到 H.264/AAC）。

畫中畫（Picture in Picture）：把第二段影片疊加成小視窗。可以選位置、設定大小（預設是主影片的 30%）。第二段影片如果比主影片短會自動 loop。

左右並排（Side by Side）：兩段影片左右或上下並排。可以選取哪一段的音訊、或都不要音訊。適合做對比影片或 reaction video。

🛠 Raw FFmpeg：給進階玩家的最後一哩路

如果你熟悉 FFmpeg 命令列，Raw FFmpeg 面板就是你的天堂。

直接在文字框裡打參數，它們會被插入到 -i input 和輸出檔名之間。右側有即時命令預覽，你打什麼就顯示什麼。

專案還提供了一個 Example Commands 庫，一鍵套用常見配方：

這些配方會自動填入對應的參數和副檔名，連引號和空格都幫你處理好了。

📝 字幕嵌入

可以嵌入 .srt、.vtt、.ass 字幕檔到影片中，作為可切換的軟字幕軌。輸出選 MP4 時用 mov_text 編碼，選 MKV 時原生保留 ASS/SSA 樣式。影片和音訊都是 stream-copy，幾乎瞬間完成。

注意：硬燒字幕（hard-burn）需要 libass 編譯的 FFmpeg，標準的 WebAssembly 核心不支援。

📊 媒體資訊

載入影片後，Media Info 會立即顯示：

• 檔案名稱、大小、時長、解析度、預估頻寬、MIME 類型

點「Process Video」會跑一次深度掃描（ffmpeg -hide_banner -i），輸出完整的編碼、串流、像素格式等詳細資訊。

🛡 其他實用功能

• Strip Metadata：移除所有嵌入的媒體資訊（GPS 座標、相機型號、建立時間等）
• Fade In / Out：設定淡入淡出秒數
• Brightness / Contrast / Saturation：用 eq filter 調整，有三個滑桿
• Rotate / Flip：旋轉 90° / 180°、水平翻轉、垂直翻轉
• Loop / Repeat：把影片重複播放 2-50 次，stream-copy 無重新編碼
• Thumbnail Extractor：從影片指定時間點抽出一幀，存為 JPEG 或 PNG

PWA：安裝到手機，離線也能用

這是 ffmpeg-webCLI 最被低估的功能。

因為它是一個 Progressive Web App，你可以：

1. 在瀏覽器中打開網頁
2. 點擊瀏覽器安裝按鈕（iOS 在 Safari 的「分享」選單裡）
3. 安裝到主螢幕
4. 首次線上載入 FFmpeg 後，離線照樣能用

處理過程中螢幕不會休眠（Screen Wake Lock），手機不會在你編碼時鎖屏。這對手機端處理影片來說非常實用。

效能與限制

優點

• 所有處理在本地完成，隱私有保障
• Web Worker 背景處理，UI 不會卡住
• 離線可用，PWA 安裝後完全不需要網路
• 30+ 種操作，覆蓋大多數日常需求

限制

• 大型影片較慢：WebAssembly 的編碼速度比原生 FFmpeg 慢，4K 影片尤其明顯
• 記憶體消耗不低：WASM 本身 31 MB，加上影片資料，Chrome 的記憶體用量可能破百 MB
• 瀏覽器相容性：需要支援 SharedArrayBuffer 的現代瀏覽器（Chrome、Edge、Firefox、Safari 都 OK）
• 無法硬燒字幕：標準 WASM 核心沒有 libass

總結：什麼時候該用它？

ffmpeg-webCLI 不是 DaVinci Resolve 的替代品。它不會幫你做多軌剪輯、色調校正、或複雜的特效。

但如果是以下場景，它幾乎是完美的：

• ✅ 快速格式轉換（不用等伺服器上傳下載）
• ✅ 壓縮影片發訊息
• ✅ 轉 GIF 加浮水印
• ✅ 手機上臨時剪一段
• ✅ 離線環境處理影片
• ✅ 隱私敏感的影片（公司檔案、個人資料）
• ✅ 批量小操作（抽音訊、轉格式、加字幕）

它解決的不是「能不能做」的問題，而是「能不能快、簡單、不用等」的問題。

31 MB 的 WASM、一個瀏覽器視窗、幾秒鐘上手。下次要轉格式或壓縮影片的時候，不妨試試看。

可能你會發現，有些工具不需要那麼複雜。

參考連結

• ffmpeg-webCLI 官方網站
• GitHub 原始碼
• ffmpeg.wasm 專案
• PWA 漸進式網頁應用介紹