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

how to extract all frames from a video
how to extract all frames from a video

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 中分三個步驟完成。沒有帳號、沒有上傳,也不會對來源片段重新編碼。

  1. 選擇一個支援的本機影片並等待時長與預覽載入完成。從你的電腦中挑選 MP4、WebM、MOV、M4V 或 Ogg 檔案。覽器會從檔案讀取中繼資料,因此顯示的時長是片段本身的回報長度,而非推測值。如果時長沒有出現,代表容器已開啟但其中的編解碼器並未載入,這時你需要先重新封裝或轉檔。
  2. 輸入介於零與顯示時長之間的畫面時間,必要時可使用小數。例如,若要取得 12.5 秒的靜態畫面,請輸入 12.5;若你的目標是 24 fps 影片中接近一秒二十四分之一處的畫面,可輸入 0.04167。時間欄位接受從零到時長之間的小數值;超出該範圍的值會在執行跳轉步驟之前被拒絕。
  3. 選擇 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 進行簡短剪輯,因此你可以透過三次獨立且本機的操作分別擷取一張靜態畫面、剪輯片段並取出音訊,而你的影片素材完全不會接觸到任何遠端伺服器。

延伸閱讀:Crop a Video for Instagram Story Without Uploading