若要從影片中擷取單一畫面,請將瀏覽器的影片解碼器跳至特定的秒數時間點,將解碼後的畫面繪製到同尺寸的畫布上,再將該畫布編碼為 PNG — 這正是像 Video Frame Extractor 這種聚焦於瀏覽器內的工具的運作方式,從你裝置上已有的本機檔案,每次擷取都會產生一張全尺寸的靜態影像。「逐格擷取」並不需要安裝桌面影片編輯軟體,也不必將片段上傳到伺服器;瀏覽器本身已經知道如何播放影片,而同一套機制也能在你指定的時間戳暫停、以原生像素尺寸繪製到隱藏的畫布上,然後儲存為可攜的影像。唯一的限制在於,任何瀏覽器內的做法一次只能擷取一張靜態影像,因此逐格工作流程會變成一個刻意進行的迴圈:選取時間、擷取、前進時間、再擷取。對於短片和數量不多的擷取(例如為投影片、參考資料、縮圖或社群貼文準備的少數幾張靜態影像),這個迴圈既快速又完全在本機完成。若要擷取數百張編號精確的畫面、HDR 輸出、批次匯出,或是無法解碼的編解碼器,專用的桌面工具會是更合適的選擇。

how to extract video frame by frame
how to extract video frame by frame

「逐格」在瀏覽器中的意義

影片是一連串以固定速率播放的靜態影像,通常是每秒 24、25、30、50 或 60 格。「逐格」擷取靜態影像的概念,就是逐步瀏覽這個序列,一次一張影像,而大多數桌面編輯軟體會提供格數計數器正是為此而設。瀏覽器則提供另一種控制介面:一條以時間點為單位、透過已載入影片元素的 currentTime 屬性來存取的媒體時間軸。這個區別很重要,因為瀏覽器的跳轉可能會停在附近已解碼的畫面,而非精確編號的原始畫面 — 關鍵影格、可變幀率、編輯清單和時間戳進位方式,都會影響解碼器實際停在哪裡。實務上,瀏覽器內工作流程中的「逐格」其實是「逐時間戳」:你幾乎可以瞬間輸入一個位置(以小數表示毫秒或幀率形式的小數),瀏覽器就會解碼時間軸上該位置的範圍,並讓你儲存該靜態影像。以略晚一點的時間重複這個流程,就能得到下一格畫面的輸出。這正是 Video Frame Extractor 所設計支援的迴圈。

實務上,常用的時間戳會聚集在幾種常見的形式。第一格位於零;最後一個可用的畫面位於回報時長的內側。在這兩者之間,0.250、0.500 和 0.750 等毫秒值可覆蓋慢動作或動作分析所需的子畫格精細度;像 1.5、2.25 和 3.75 這類帶小數的秒數,便於一般記錄使用;而符合幀率的小數(如 25 fps 的 0.04、30 fps 的 0.033、60 fps 的 0.0167)則與常見的播放速率邊界對齊。一分鐘(60.000)是較長影片常用的時間地標,而最長時長的邊界就是最後一格畫面的所在。在開始擷取之前先將這些時間戳寫下來,可以讓這個迴圈易於重複與驗證。

瀏覽器如何解碼單一靜態影像

整個流程分為四個簡短的階段。首先,檔案會交給一個隱藏的影片元素;若瀏覽器能解碼其容器及其中的編解碼器,該元素便會載入中繼資料並回報時長。其次,將要求的時間指派給元素的 currentTime,這會觸發跳轉操作;根據 MDN 的 HTMLMediaElement currentTime 文件,跳轉會使解碼器將播放磁頭定位到媒體時間軸上的新位置。第三,跳轉完成後,會建立一塊同尺寸的畫布,並使用 2D 繪圖環境的 drawImage 方法將目前解碼的畫面繪製到畫布上,MDN 的 Canvas drawImage 參考文件將其描述為在要求的座標上將來源影像或影片繪製到畫布。第四,畫布會被編碼為 PNG,並以本機下載的方式提供。畫面會以解碼後的尺寸儲存 — 不進行縮放、裁剪、銳化、內插或任何濾鏡處理 — 因此儲存的靜態影像會完整保留解碼器所輸出的結果,若解碼後的畫面包含 alpha 通道,透明度也會一併保留。

每個請求也會經過一層簡單的驗證:輸入必須是能成功載入解碼中繼資料且有大小限制的本機影片、要求的時間必須是介於回報時長內的有限數值,且產生的 PNG 不得為空。若上述任何檢查失敗 — 或跳轉、畫布或編碼發生錯誤 — 工具會回報錯誤而非產生下載。本機下載網址是可以撤銷的:每當輸入變更或元件卸載時就會失效,避免過時的靜態影像殘留在分頁中。

在精確時間點擷取畫面

  1. 開啟 Video Frame Extractor 並選擇一個支援的本機影片檔案。等到時長與預覽皆載入完成 — 載入完成代表你的瀏覽器能夠解碼該容器及其中的編解碼器。檔案受共用影片安全政策限制:大小上限 500 MiB、時長上限五分鐘、每邊像素不超過 4096,且總像素面積不超過 3840 × 2160。
  2. 輸入介於零與所顯示時長之間的畫面時間,需要毫秒或小數秒精細度時請使用小數。像 0.04(25 fps)、0.033(30 fps)和 0.0167(60 fps)等符合幀率的值,可將請求對齊到特定的畫格邊界,不過瀏覽器仍可能停在附近已解碼的畫面。
  3. 選擇「Extract PNG frame」(擷取 PNG 畫面)。若解碼、跳轉、畫布繪製或 PNG 編碼失敗,工具會回報錯誤而非產生空白的下載檔案。確認產生的靜態影像符合你想要的瞬間,然後下載本機 PNG。輸出檔名會包含你選擇的時間,方便日後排序一連串擷取出來的畫面。

支援的檔案與硬性限制

此工具接受 MP4、WebM、MOV、M4V 與 Ogg 檔案,但僅有支援的副檔名並不保證能播放。每種容器內部都可能裝載數種不同的音訊與視訊編解碼器,瀏覽器必須支援檔案中實際儲存的那組編解碼器才能播放。

容器瀏覽器編解碼器需求
MP4常見容器;能否播放取決於內部儲存的特定編解碼器。
WebM開放容器;編解碼器支援依瀏覽器而異。
MOVApple 容器;能否播放取決於檔案內的編解碼器。
M4ViTunes 風格容器;大多數瀏覽器將其視為類似 MP4。
Ogg開放容器;編解碼器支援依瀏覽器而異。

所有輸入在開始解碼前都會套用同一組安全限制:

限制上限
檔案大小500 MiB
時長5 分鐘
每邊寬度4096 像素
總像素面積3840 × 2160 像素

此工具不提供的功能

一款聚焦的靜態影像擷取工具以簡換取專注。它不進行縮放、裁剪、銳化、內插或套用濾鏡;儲存的 PNG 會以原生尺寸保留解碼後的畫面。它不提供批次匯出 — 每張畫面都要按一次。它無法識別精確編號的原始畫面;你要求的時間是媒體時間軸上的位置,而顯示的時間記錄的是你輸入的位置,而非解碼器實際停止的精確封包時間戳。它不會檢查 HDR 中繼資料或色彩管理,且只有在瀏覽器解碼後的影片畫面本身提供 alpha 通道時才會保留透明度。檔案會在目前分頁中處理 — 解碼、繪製、編碼並在本機下載 — 因此不會有任何資料離開你的裝置。若需要更廣泛、不必手動點擊即可走訪數十個時間戳的擷取工作流程,可參閱 不需上傳即可從影片擷取畫面 的專屬指南,了解互補的做法。

何時應改用桌面影片編輯軟體

瀏覽器內擷取適合用於縮圖、參考靜態影像、投影片、社群貼文,以及從你已經能在瀏覽器中播放的短片快速擷取視覺筆記。當工作需要對應到特定原始畫面編號的精確畫面輸出、數百至數千張靜態影像的批次匯出、HDR 或具色彩管理的輸出、依賴已知通道配置的 alpha 工作流程、長度超過五分鐘的影片、大於 500 MiB 的檔案,或是瀏覽器不支援其編解碼器的格式時,就應改用專用的桌面影片編輯軟體。對於這類工作,桌面工具能讀取封包時間戳、瀏覽整段時間軸,並以瀏覽器無法達成的格式來編碼靜態影像。

若想深入了解,請參閱 在 Mac 上於瀏覽器內本機壓縮影片