若要從影片中擷取一張畫面,輸入一個時間戳、讓瀏覽器在本機解碼影片片段,然後以原始尺寸將產生的靜態畫面存成 PNG——這一句話就描述了 Video Frame Extractor 在你目前分頁中執行、且無需上傳來源檔案的完整流程。搜尋「how to extract all frames from a video」的讀者通常想要的是以下三種需求之一:一張乾淨的靜態畫面作為縮圖或投影片、幾張在關鍵時間點上的參考圖片,或是每一張完整大小的原始畫面以供分析或動態研究。基於瀏覽器的擷取方式可以乾淨地處理前兩種情況,因為瀏覽器已經知道如何解碼 MP4、WebM、MOV、M4V 與 Ogg 等容器格式,並能視需要將畫面繪製到 canvas 上。而整段影片的完整擷取——時間軸上的每一張來源畫面——則是另一個不同的問題,通常需要具備畫面編號存取、批次輸出與編解碼器控制的桌面工具。本文聚焦在瀏覽器的作法:如何在你選擇的精確時間點輸出一張 PNG、這個工具能做與不能做的事項,以及何時該改用專門的桌面影片畫面擷取工具來處理較繁重的工作。

Video Frame Extractor 能做與不能做的事項
Video Frame Extractor 會接收你選擇的一個本機影片檔案、跳到你輸入的時間點、將解碼後的畫面繪製到同樣大小的 canvas 上,然後將該 canvas 在你目前分頁中以可下載 PNG 的方式公開。整個過程中沒有任何資料會離開你的電腦:瀏器讀取檔案、HTMLMediaElement 處理跳轉、canvas 的 drawImage 步驟複製像素資料,PNG 會在記憶體中編碼並以本機下載 URL 的形式提供。
這個工具能做到的事:
- 在本機解碼一個支援的容器格式(MP4、WebM、MOV、M4V、Ogg)
- 跳到 0 到回報時長之間的任意時間點,包括小數秒
- 以解碼畫面的原生像素尺寸產出 PNG
- 使用你輸入的時間作為輸出檔案的命名
- 回報解碼、跳轉、canvas 與編碼錯誤,而不是寫入空檔案
這個工具做不到的事:
- 批次或大量擷取整個時間軸上的畫面
- 縮放、裁切、銳化、內插或套用濾鏡
- 保證畫面精確且有編號的來源畫面
- 將輸出轉換為 JPEG、WebP、TIFF 或任何其他格式
- 可靠地處理 HDR 或色彩管理工作流程
- 接受超出共用影片安全性政策限制的檔案
如果你只需要一張靜態畫面——或少量不同時間點的畫面——Video Frame Extractor 就是恰到好處的解決方案。如果你需要每一張原生解析度且帶有時間戳檔名的畫面,則需要使用不同的工具,本文稍後的表格會對應說明這些情境。
如何從影片中擷取一張畫面
整個工作在 Video Frame Extractor 中分三個步驟完成。沒有帳號、沒有上傳,也不會對來源片段重新編碼。
- 選擇一個支援的本機影片並等待時長與預覽載入完成。從你的電腦中挑選 MP4、WebM、MOV、M4V 或 Ogg 檔案。覽器會從檔案讀取中繼資料,因此顯示的時長是片段本身的回報長度,而非推測值。如果時長沒有出現,代表容器已開啟但其中的編解碼器並未載入,這時你需要先重新封裝或轉檔。
- 輸入介於零與顯示時長之間的畫面時間,必要時可使用小數。例如,若要取得 12.5 秒的靜態畫面,請輸入 12.5;若你的目標是 24 fps 影片中接近一秒二十四分之一處的畫面,可輸入 0.04167。時間欄位接受從零到時長之間的小數值;超出該範圍的值會在執行跳轉步驟之前被拒絕。
- 選擇 Extract PNG frame、確認靜態畫面,然後下載本機 PNG。瀏覽器會將影片元素跳轉到你要求的時間、等待跳轉完成、以同樣的像素尺寸將解碼後的畫面繪製到 canvas 上、編碼為 PNG,並提供下載按鈕。開啟 PNG 以確認內容符合預期,接著就像處理一般檔案一樣重新命名或移動它。
如果你想要第二張靜態畫面,請變更時間欄位並再次執行擷取步驟。每次擷取都是獨立的,因此你可以在不離開頁面的情況下建立一組小型 PNG 參考。輸出檔名會包含你要求的時間,這樣在處理一系列畫面時能輕鬆分辨多張靜態畫面。
支援的容器、編解碼器與檔案限制
這個工具接受五種容器格式,但副檔名相符並不代表檔案一定能正常運作。MP4、MOV 與 M4V 檔案可能內含各種不同的影音編解碼器,而瀏覽器僅支援其中的一部分——MP4 系列通常支援 H.264 與 AAC,部分瀏覽器還支援 VP9 與 AV1。WebM 與 Ogg 在設計上限制較嚴,通常能乾淨地開啟。如果瀏覽器無法解碼檔案內部的編解碼器,時長將無法載入,跳轉步驟會在任何 PNG 產生前失敗。
共用的安全性政策限制了輸入檔案的大小,以確保瀏覽器能在單一分頁中完成解碼、跳轉、繪製與編碼而不會卡住:
| 限制 | 上限 |
|---|---|
| 檔案大小 | 500 MiB |
| 時長 | 5 分鐘 |
| 單邊寬度 | 4096 像素 |
| 輸出畫面面積 | 3840 × 2160 像素 |
任何超出上述數字的檔案會在解碼開始前被拒絕。你取得的 PNG 會與解碼後影片畫面的像素尺寸一致,且只有在瀏覽器解碼出的影片畫面實際帶有 alpha 通道時,才會保留透明度。大多數 MP4 與 WebM 片段並不帶有 alpha,因此除非你處理的是明確包含 alpha 的影片,否則預期會得到標準的 RGB PNG。
為何瀏覽器的跳轉無法精確到畫面
對於第一次使用的使用者來說,最大的驚訝在於:你輸入的時間是媒體時間軸上的一個位置,並不代表能保證取得特定的來源畫面。瀏覽器使用以關鍵影格為基礎的跳轉:當你在每兩秒一個關鍵影格的影片上要求 14.7 秒時,解碼器可能會解碼 14.0 秒處的關鍵影格然後向前播到 14.7 秒,也可能停在最接近的解碼取樣上。影響變數包括關鍵影格距離、可變幀率、編輯清單、時間戳的捨入方式以及編解碼器特有的行為,這些全都超出分頁層級工具所能掌控的範圍。MDN HTMLMediaElement currentTime 參考資料 說明了這個屬性在實務上是如何運作的。
這對於三類工作會造成影響,對其他工作則不會:
- 縮圖與參考靜態畫面:附近的解碼畫面即可
- 社群媒體貼文、投影片與部落格圖片:附近的解碼畫面即可
- 電影與廣播的編輯工作、科學畫面分析,或任何需要「精準第 583 張來源畫面」的工作:不行
如果你需要畫面編號與精確性,正確的選擇是能逐封包解碼的桌面工具。Video Frame Extractor 會將你要求的時間記錄並寫入輸出檔名,讓你知道你所要求的位置,但它並不會檢查封包時間戳以識別一個有編號的來源畫面。若想以不同範例深入探討相同的工作流程,Capture a Video Frame as a PNG: Exact Time, Full Size 這篇指南會逐步介紹相關的使用情境。
何時你需要不同的工具
下表將常見的情境對應到正確的作法。除另有說明外,「瀏覽器工具」指的是 Video Frame Extractor,而「桌面工具」則是指能解碼完整時間軸、並為每一張來源畫面輸出一張影像的專用畫面擷取工具。
| 情境 | 正確作法 |
|---|---|
| 為縮圖、投影片或部落格文章擷取一張靜態畫面 | Video Frame Extractor |
| 在已知時間點擷取少量參考用 PNG | Video Frame Extractor,重複執行 |
| 每一張原生解析度且有編號的畫面 | 具備批次擷取功能的桌面工具 |
| 畫面精確的編輯工作(廣播、電影) | 具備封包層級解碼的桌面工具 |
| HDR 或色彩管理輸出 | 具備 HDR 管線的桌面工具 |
| 大於 500 MiB 或長度超過五分鐘的檔案 | 桌面工具 |
| 覽器不支援其編解碼器的片段 | 先轉檔或重新封裝,再重試 |
| 對片段本身進行簡短的剪輯或裁切 | Video Trimmer |
對於你所控制的短片段要快速取得一張參考 PNG,瀏覽器作法是最快的選擇,因為沒有上傳步驟、沒有排隊、也不需要等待伺服器。輸出結果是一張與解碼尺寸相同的 PNG,檔名以你要求的時間命名,直接存放在你的下載資料夾中。
隱私與本機處理
整個管線的每個階段都在你的覽器分頁中執行。Video Frame Extractor 不會上傳來源片段、不會上傳 PNG、不會呼叫遠端編碼器,也不會在伺服器上儲存任何一個檔案。HTMLMediaElement 讀取本機檔案、canvas 編碼 PNG,並透過一個可撤銷的物件 URL 將下載內容公開給瀏覽器的下載管理程式。當你變更輸入或離開頁面時,這些物件 URL 會失效,避免舊的 PNG 跨階段工作階段洩漏。
正是這種純本機運作的行為,讓這個工具能夠安全地用於內部片段、粗剪版本與機密參考資料而不需要上傳步驟——檔案從未離開這台機器。相同的模式也適用於透過 Video to Audio Converter 處理音軌,以及透過 Video Trimmer 進行簡短剪輯,因此你可以透過三次獨立且本機的操作分別擷取一張靜態畫面、剪輯片段並取出音訊,而你的影片素材完全不會接觸到任何遠端伺服器。