[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"article-ffmpeg-webcli-browser-video-editor-zh":3,"article-related-ffmpeg-webcli-browser-video-editor-zh":32,"series-tools-c849204c-8427-4af7-9662-60aa9e1f5524":77},{"id":4,"slug":5,"title":6,"content":7,"summary":8,"source":9,"source_url":10,"author":11,"image_url":12,"cover_image":12,"category":13,"language":14,"translated_content":11,"related_article_id":15,"keywords":16,"key_takeaways":24,"views":28,"created_at":29,"published_at":30,"topic_cluster_id":31},"c849204c-8427-4af7-9662-60aa9e1f5524","ffmpeg-webcli-browser-video-editor-zh","ffmpeg-webCLI 把剪片搬進瀏覽器","\u003Cp data-speakable=\"summary\">ffmpeg-webCLI 是一個在瀏覽器本地處理影片的剪輯工具，檔案不必上傳到伺服器。\u003C\u002Fp>\u003Cp>\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Ftejaswigowda\u002Fffmpeg-webCLI\" target=\"_blank\" rel=\"noopener\">ffmpeg-webCLI\u003C\u002Fa> 這東西很直接。它把影片處理搬進瀏覽器，而且真的在本機跑。第一次載入時，會先抓一個約 31 MB 的 \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fffmpegwasm\u002Fffmpeg.wasm\" target=\"_blank\" rel=\"noopener\">ffmpeg.wasm\u003C\u002Fa> 核心，之後還能快取。\u003C\u002Fp>\u003Cp>這不是玩具 demo。它支援 32+ 種操作，還有批次處理、離線模式、stack mode。講白了，它想把很多常見剪輯工作，塞進同一個網頁裡。\u003C\u002Fp>\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>指標\u003C\u002Fth>\u003Cth>數值\u003C\u002Fth>\u003Cth>意義\u003C\u002Fth>\u003C\u002Ftr>\u003C\u002Fthead>\u003Ctbody>\u003Ctr>\u003Ctd>ffmpeg-core 下載量\u003C\u002Ftd>\u003Ctd>約 31 MB\u003C\u002Ftd>\u003Ctd>第一次使用要先付出載入成本\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>支援操作數\u003C\u002Ftd>\u003Ctd>32+\u003C\u002Ftd>\u003Ctd>可處理多數常見剪輯需求\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>GitHub stars\u003C\u002Ftd>\u003Ctd>717\u003C\u002Ftd>\u003Ctd>代表開發者有興趣\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>GitHub forks\u003C\u002Ftd>\u003Ctd>56\u003C\u002Ftd>\u003Ctd>顯示有人開始拿去改\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>Commits\u003C\u002Ftd>\u003Ctd>121\u003C\u002Ftd>\u003Ctd>看得出來不是隨便丟上去\u003C\u002Ftd>\u003C\u002Ftr>\u003C\u002Ftbody>\u003C\u002Ftable>\u003Ch2>本機處理，改變的是信任模型\u003C\u002Fh2>\u003Cp>\u003Ca href=\"https:\u002F\u002Ftejaswigowda.com\u002Fffmpeg-webCLI\u002F\" target=\"_blank\" rel=\"noopener\">ffmpeg-webCLI\u003C\u002Fa> 最有意思的地方，不是介面。是它不把你的影片丟去遠端伺服器。對剪片的人、行銷人、老師，還有要處理私人素材的人，這差很多。\u003C\u002Fp>\n\u003Cfigure class=\"my-6\">\u003Cimg src=\"https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1781680695836-cdup.png\" alt=\"ffmpeg-webCLI 把剪片搬進瀏覽器\" class=\"rounded-xl w-full\" loading=\"lazy\" \u002F>\u003C\u002Ffigure>\n\u003Cp>很多網頁工具都很方便，但你得先上傳檔案。那一步看起來沒什麼，實際上就是把資料交出去。這個專案直接砍掉這段流程。它的 README 也寫得很白話：沒有上傳，沒有伺服器端渲染，也沒有資料蒐集。\u003C\u002Fp>\u003Cp>這種設計，和 \u003Ca href=\"https:\u002F\u002Fcloudconvert.com\u002F\" target=\"_blank\" rel=\"noopener\">CloudConvert\u003C\u002Fa>、\u003Ca href=\"https:\u002F\u002Fwww.kapwing.com\u002F\" target=\"_blank\" rel=\"noopener\">Kapwing\u003C\u002Fa>、\u003Ca href=\"https:\u002F\u002Fwww.clideo.com\u002F\" target=\"_blank\" rel=\"noopener\">Clideo\u003C\u002Fa> 很不一樣。那些工具要先把檔案送到雲端，才開始做事。ffmpeg-webCLI 則是先在你的\u003Ca href=\"\u002Fnews\u002Fqualcomm-bets-on-ai-devices-over-apps-zh\">裝置\u003C\u002Fa>上算完再說。\u003C\u002Fp>\u003Cblockquote>“No uploads, no servers — all processing happens locally in your browser using WebAssembly.”\u003C\u002Fblockquote>\u003Cp>這句話不只是在講賣點。它其實是在定義產品。當瀏覽器能做運算，瀏覽器就不只是看網頁的地方，而是工作本身的一部分。\u003C\u002Fp>\u003Cp>當然，代價也很明白。\u003Ca href=\"\u002Fnews\u002Fvariable-width-transformers-cut-wasted-capacity-zh\">算力\u003C\u002Fa>是你自己的。筆電通常撐得住，手機就別太勉強。第一次載入也比較重，這點很現實，不要幻想它跟純雲端工具一樣輕。\u003C\u002Fp>\u003Cul>\u003Cli>不需要上傳檔案，隱私壓力小很多\u003C\u002Fli>\u003Cli>離線也能用，適合網路不穩的環境\u003C\u002Fli>\u003Cli>本機算力越強，體驗越順\u003C\u002Fli>\u003Cli>第一次載入較慢，但之後可快取\u003C\u002Fli>\u003C\u002Ful>\u003Ch2>功能比你第一眼看到的多\u003C\u002Fh2>\u003Cp>乍看之下，ffmpeg-webCLI 像是個簡單轉檔器。實際上，它能做的事不少。GIF 製作、格式轉換、壓縮、裁切、濾鏡、自動字幕、抽音軌、嵌字幕、畫中畫，還有直接輸入 ffmpeg 指令，幾乎把常見需求都收進來了。\u003C\u002Fp>\u003Cp>這種整合很實際。你不用為了 GIF 開一個網站，為了字幕再開另一個，為了格式轉換又去第三個工具。對很多人來說，工具切換本身就是浪費時間。尤其是要處理一串素材時，少切頁面就少出錯。\u003C\u002Fp>\u003Cp>它支援的格式也很務實。影片有 MP4、WebM、MKV、MOV、AVI。音訊有 MP3、AAC、WAV、OGG、FLAC。圖片輸出則有 GIF、JPG、PNG。這些格式不是炫技，是每天真的會碰到的東西。\u003C\u002Fp>\u003Cul>\u003Cli>影片格式：MP4、WebM、MKV、MOV、AVI\u003C\u002Fli>\u003Cli>音訊格式：MP3、AAC、WAV、OGG、FLAC\u003C\u002Fli>\u003Cli>圖片輸出：GIF、JPG、PNG\u003C\u002Fli>\u003Cli>進階功能：串接、混音、字幕嵌入、畫中畫\u003C\u002Fli>\u003C\u002Ful>\u003Cp>壓縮介面也有料。它直接給你 CRF 18 到 51，還有 ultrafast 到 veryslow 的編碼預設。這種控制感，就是 ffmpeg 使用者熟悉的那套，只是前面多了一層比較好懂的介面。\u003C\u002Fp>\u003Cp>換句話說，它不是把 ffmpeg 稀釋掉，而是把常用參數包成按鈕。這點我覺得很重要，因為很多網頁工具都太怕把細節露給使用者看，最後\u003Ca href=\"\u002Fnews\u002Fnewcore-turns-ai-agents-into-managed-identities-zh\">變成\u003C\u002Fa>只能做半套。\u003C\u002Fp>\u003Ch2>stack mode 才是最聰明的設計\u003C\u002Fh2>\u003Cp>這個專案最值得講的，是 stack mode。它讓你先把多個操作排好，再一次輸出。像裁切、灰階、轉 MP4，可以合成一輪處理，不用每一步都重新編碼。\u003C\u002Fp>\n\u003Cfigure class=\"my-6\">\u003Cimg src=\"https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1781680685945-shdn.png\" alt=\"ffmpeg-webCLI 把剪片搬進瀏覽器\" class=\"rounded-xl w-full\" loading=\"lazy\" \u002F>\u003C\u002Ffigure>\n\u003Cp>這件事很有感。因為重複編碼不只慢，還可能讓畫質越來越爛。stack mode 的設計，就是在避免這種浪費。它先做 trim，再跑 filter chain，最後只輸出一次。\u003C\u002Fp>\u003Cp>README 也把規則拆得很清楚。像 crop、resize、rotate、adjust、grayscale、fade、denoise、sharpen、blur、speed、pad、letterbox、volume 這些單輸入操作，可以疊在一起。可是 concatenate、side by side、picture in picture、mix audio、embed subtitles、logo overlay 這類多輸入操作，就留在單次模式。\u003C\u002Fp>\u003Cul>\u003Cli>單次輸出可減少重複編碼\u003C\u002Fli>\u003Cli>批次模式能把同一組操作套到多檔案\u003C\u002Fli>\u003Cli>每個檔案可預覽，也能整包打包成 ZIP\u003C\u002Fli>\u003Cli>Web Workers 讓介面不會卡死\u003C\u002Fli>\u003C\u002Ful>\u003Cp>這代表它不是亂拼功能。它真的有理解 ffmpeg 使用者怎麼工作。大多數人不想為了一個結果輸出六次。他們要的是一次排好，一次跑完，一次拿檔案。\u003C\u002Fp>\u003Cp>還有一個細節很加分。它會顯示實際的 ffmpeg command。這讓使用者不是只按按鈕而已，還能反過來學工具。對開發者來說，這比黑盒子有價值得多。\u003C\u002Fp>\u003Ch2>批次模式讓瀏覽器沒那麼脆弱\u003C\u002Fh2>\u003Cp>批次處理通常是瀏覽器剪輯工具的弱點。記憶體不好管，進度也不好追。ffmpeg-webCLI 的做法算務實。它用佇列、逐檔狀態、順序處理，還會在批次模式啟用時，處理已載入檔案的情況。\u003C\u002Fp>\u003Cp>它也沒有假裝所有操作都適合批次。像 reverse 這種吃記憶體的功能，就明講可能需要整段影片緩衝，還可能碰到 2 GB 上限。crop、overlay 這種依尺寸或多輸入的功能，也會限制在批次模式外。\u003C\u002Fp>\u003Cp>如果拿來跟其他工具比，差異就很清楚。\u003Ca href=\"https:\u002F\u002Fcloudconvert.com\u002F\" target=\"_blank\" rel=\"noopener\">CloudConvert\u003C\u002Fa> 先上傳再處理，ffmpeg-webCLI 則是本機處理。\u003Ca href=\"https:\u002F\u002Fwww.kapwing.com\u002F\" target=\"_blank\" rel=\"noopener\">Kapwing\u003C\u002Fa> 和 \u003Ca href=\"https:\u002F\u002Fwww.clideo.com\u002F\" target=\"_blank\" rel=\"noopener\">Clideo\u003C\u002Fa> 功能很廣，但資料要先離開你的電腦。\u003Ca href=\"https:\u002F\u002Fwww.adobe.com\u002Fexpress\u002F\" target=\"_blank\" rel=\"noopener\">Adobe Express\u003C\u002Fa> 介面更漂亮，但 ffmpeg-webCLI 給的是更直接的 ffmpeg 控制。\u003C\u002Fp>\u003Cp>這裡也能看出它的定位。它不是要打贏所有雲端剪輯器。它是要在隱私、控制權、離線能力這幾件事上，做得比一般網頁工具更乾脆。\u003C\u002Fp>\u003Cp>\u003Ca href=\"\u002Ftag\u002Fgithub\">GitHub\u003C\u002Fa> 數字也有點意思。717 個 stars、56 個 forks、121 個 commits。這不像一個只做三天的 side project，比較像有人真的在維護。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Ca href=\"https:\u002F\u002Fcloudconvert.com\u002F\" target=\"_blank\" rel=\"noopener\">CloudConvert\u003C\u002Fa> 偏雲端流程\u003C\u002Fli>\u003Cli>\u003Ca href=\"https:\u002F\u002Fwww.kapwing.com\u002F\" target=\"_blank\" rel=\"noopener\">Kapwing\u003C\u002Fa> 偏模板和協作\u003C\u002Fli>\u003Cli>\u003Ca href=\"https:\u002F\u002Fwww.clideo.com\u002F\" target=\"_blank\" rel=\"noopener\">Clideo\u003C\u002Fa> 偏快速線上轉檔\u003C\u002Fli>\u003Cli>\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fffmpegwasm\u002Fffmpeg.wasm\" target=\"_blank\" rel=\"noopener\">ffmpeg.wasm\u003C\u002Fa> 是本機運算底層\u003C\u002Fli>\u003C\u002Ful>\u003Ch2>這也反映了瀏覽器軟體的變化\u003C\u002Fh2>\u003Cp>ffmpeg-webCLI 其實在提醒我們一件事。瀏覽器現在不只是顯示頁面的地方。WebAssembly、Web Workers、離線 PWA，這些東西加起來，已經能撐起不少實作型工具。\u003C\u002Fp>\u003Cp>幾年前，你說在瀏覽器裡剪影片，很多人會覺得很卡。現在不一樣了。不是所有桌面軟體都該搬進瀏覽器，但有些工作確實適合這種模式。載入一次、本機處理、不存檔到伺服器，這流程很乾淨。\u003C\u002Fp>\u003Cp>這種工具在台灣也很有用。像學校老師要處理課程影片、行銷人要改短片、接案者要處理客戶素材，都會在意檔案不要亂傳。對這些人來說，少一個上傳步驟，就少一個風險點。\u003C\u002Fp>\u003Cp>如果這個專案繼續長大，我覺得下一步很明顯。它可以加更多常用預設，像短影音、字幕燒錄、社群平台尺寸。也可以補更清楚的效能提示，讓使用者知道自己的裝置能跑到哪裡。\u003C\u002Fp>\u003Cp>更大的問題是，其他網頁工具會不會開始跟進這種 local-first 做法。因為一旦使用者習慣了資料留在本機，很多雲端流程就會顯得很拖。你如果今天要剪片，我會建議先試這種本機方案，再決定要不要交給雲端。\u003C\u002Fp>\u003Ch2>結論很簡單：先看你在意什麼\u003C\u002Fh2>\u003Cp>如果你在意的是模板、協作、雲端分享，ffmpeg-webCLI 不是最順手的那種工具。但如果你在意隱私、離線、可控性，它就很有吸引力。\u003C\u002Fp>\u003Cp>我會把它當成一個很實用的方向樣本。它證明了瀏覽器可以做更多，而且不用把檔案先送出去。下一次你要處理影片時，先問自己一句：這個工作，真的需要上傳嗎？\u003C\u002Fp>","ffmpeg-webCLI 用 ffmpeg.wasm 在瀏覽器本地剪片，不上傳檔案，支援 32+ 操作、批次處理和離線使用。","github.com","https:\u002F\u002Fgithub.com\u002Ftejaswigowda\u002Fffmpeg-webCLI",null,"https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1781680695836-cdup.png","tools","zh","e56db932-e6fe-4974-b25e-d5042045e07f",[17,18,19,20,21,22,23],"ffmpeg-webCLI","ffmpeg.wasm","瀏覽器剪輯","本機處理","WebAssembly","影片編輯","隱私工具",[25,26,27],"ffmpeg-webCLI 把影片處理放在瀏覽器本機完成，不需要上傳檔案。","它支援 32+ 操作、批次處理、離線模式，還有 stack mode。","31 MB 的 ffmpeg.wasm 核心是代價，但換來更高的隱私與控制權。",0,"2026-06-17T07:17:40.422494+00:00","2026-06-17T07:17:40.411+00:00","c3c88dd2-a940-438a-b359-0e5a24562273",{"tags":33,"relatedLang":36,"relatedPosts":40},[34],{"name":21,"slug":35},"webassembly",{"id":15,"slug":37,"title":38,"language":39},"ffmpeg-webcli-browser-video-editor-en","ffmpeg-webCLI brings video editing into the browser","en",[41,47,53,59,65,71],{"id":42,"slug":43,"title":44,"cover_image":45,"image_url":45,"created_at":46,"category":13},"6c40b201-8e6d-4b48-a988-791936798713","opencode-terminal-ai-coding-loop-zh","OpenCode 讓終端編碼變成迴圈","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1781693320715-b9x5.png","2026-06-17T10:47:58.3922+00:00",{"id":48,"slug":49,"title":50,"cover_image":51,"image_url":51,"created_at":52,"category":13},"2830e8de-b146-4dd7-b1f6-1b61c223e9ea","open-source-ai-software-infrastructure-wins-zh","開源 AI 軟體贏在基礎設施，不贏在話題","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1781691476387-1uwa.png","2026-06-17T10:17:26.854039+00:00",{"id":54,"slug":55,"title":56,"cover_image":57,"image_url":57,"created_at":58,"category":13},"137212d6-7843-4f65-b19f-f0db62e1929b","wazero-turns-go-wasm-into-plain-go-zh","Wazero 讓 Go Wasm 變回純 Go","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1781681649267-d64h.png","2026-06-17T07:33:30.509996+00:00",{"id":60,"slug":61,"title":62,"cover_image":63,"image_url":63,"created_at":64,"category":13},"b599d760-7066-4299-b304-3ae189fcd6e4","newcore-turns-ai-agents-into-managed-identities-zh","NewCore 把 AI agent 變成可管身份","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1781676209869-hmt9.png","2026-06-17T06:02:59.513643+00:00",{"id":66,"slug":67,"title":68,"cover_image":69,"image_url":69,"created_at":70,"category":13},"b8952293-f38b-41ae-90ee-a1d244ae4738","kimi-k27-review-copyable-coding-playbook-zh","Kimi K2.7 把評測變可抄流程","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1781673555614-b695.png","2026-06-17T05:18:37.659209+00:00",{"id":72,"slug":73,"title":74,"cover_image":75,"image_url":75,"created_at":76,"category":13},"ff413f46-82bf-4bcb-a256-2a4c24f76a2b","wikipedia-foss-packages-tool-map-zh","Wikipedia FOSS 清單變工具地圖","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1781663598319-0ubt.png","2026-06-17T02:32:56.642555+00:00",[78,83,88,93,98,103,108,113,118,123],{"id":79,"slug":80,"title":81,"created_at":82},"855cd52f-6fab-46cc-a7c1-42195e8a0de4","surepath-real-time-mcp-policy-controls-zh","SurePath 推出即時 MCP 政策控管","2026-03-26T07:57:40.77233+00:00",{"id":84,"slug":85,"title":86,"created_at":87},"9b19ab54-edef-4dbd-9ce4-a51e4bae4ebb","mcp-in-2026-the-ai-tool-layer-teams-use-zh","2026 年 MCP：團隊真的在用的 AI 工具層","2026-03-26T08:01:46.589694+00:00",{"id":89,"slug":90,"title":91,"created_at":92},"af9c46c3-7a28-410b-9f04-32b3de30a68c","prompting-in-2026-what-actually-works-zh","2026 提示工程，真正有用的是什麼","2026-03-26T08:08:12.453028+00:00",{"id":94,"slug":95,"title":96,"created_at":97},"05553086-6ed0-4758-81fd-6cab24b575e0","garry-tan-open-sources-claude-code-toolkit-zh","Garry Tan 開源 Claude Code 工具包","2026-03-26T08:26:20.068737+00:00",{"id":99,"slug":100,"title":101,"created_at":102},"042a73a2-18a2-433d-9e8f-9802b9559aac","github-ai-projects-to-watch-in-2026-zh","2026 必看 20 個 GitHub AI 專案","2026-03-26T08:28:09.619964+00:00",{"id":104,"slug":105,"title":106,"created_at":107},"a5f94120-ac0d-4483-9a8b-63590071ac6a","claude-code-vs-cursor-2026-zh","Claude Code 與 Cursor 深度對比：202…","2026-03-26T13:27:14.279193+00:00",{"id":109,"slug":110,"title":111,"created_at":112},"0975afa1-e0c7-4130-a20d-d890eaed995e","practical-github-guide-learning-ml-2026-zh","2026 機器學習入門 GitHub 實用指南","2026-03-27T01:16:49.712576+00:00",{"id":114,"slug":115,"title":116,"created_at":117},"bfdb467a-290f-4a80-b3a9-6f081afb6dff","aiml-2026-student-ai-ml-lab-repo-review-zh","AIML-2026：像課綱的學生實驗 Repo","2026-03-27T01:21:51.467798+00:00",{"id":119,"slug":120,"title":121,"created_at":122},"80cabc3e-09fc-4ff5-8f07-b8d68f5ae545","ai-trending-github-repos-and-research-feeds-zh","AI Trending：把 AI 資源收成一張表","2026-03-27T01:31:35.262183+00:00",{"id":124,"slug":125,"title":126,"created_at":127},"3ce6e6e2-bac5-463e-9f8d-45caabcc61f7","awesome-ai-for-science-research-tools-map-zh","AI 科研工具清單，開始像地圖了","2026-03-27T01:46:50.521945+00:00"]