畫格擷取會在影片的時間軸上選定一個瞬間——以從開頭算起的分數秒為單位——並將該瞬間解碼後的靜態影像儲存為獨立的 PNG 檔,而不會對原始影片片段做任何更動。它等同於在數位世界中將播放暫停在指定的瞬間,然後只匯出那一個畫格,而不是整部影片。這項技術常用於縮圖、分鏡腳本、參考畫面、簡報投影片,以及想在不附帶整段影片的情況下快速分享的靜態影像。大多數的做法都依賴以下三種方式之一:重新讀取原始檔案的桌面工具、解碼後回傳影像的伺服器,或是在本機解碼影片並將靜態影像繪製到 canvas 上的瀏覽器。瀏覽器的方式之所以可行,是因為現代瀏覽器內建了影片解碼器,可以在隱藏的媒體元素上跳轉到指定的時間,將當下畫格複製到 canvas,再把 canvas 編碼成使用者可下載的影像格式。這正是 Video Frame Extractor 所使用的機制,本指南接下來將說明每個環節是如何組合在一起的。
擷取畫格實際上做了什麼
影片其實是一連串快速播放的靜態影像。在每秒 30 影格的情況下,每個畫格停留在畫面上大約 33 毫秒;在 60 fps 時,則縮短為約 17 毫秒。由於個別畫格閃過的速度極快,人眼會將這串影像視為流暢的動態,但底層的檔案其實只是一長串被壓縮在一起的靜態圖片,上面再疊上音訊、字幕與時間資訊。
當你擷取一個畫格時,實際上就是從中取出某一張靜態圖片。選取的方式有兩種:以時間軸上的時間點(例如 4.250 秒),或是以相對於影片開頭的畫格編號(例如 30 fps 影片的第 127 格)。兩種方式會落在同一張圖片上,因為畫格編號乘上畫格持續時間就等於時間戳記。實務上,以時間選取較為常見,因為使用者未必知道原始的影格率,而且像 1.5 或 12.75 這類帶小數的秒數可以直接輸入到表單欄位中。
其結果會是一個新的影像檔——通常是 PNG——內容正好就是解碼器在該瞬間所產生的畫面。影片本身不會被修改、不會重新編碼,也不會被切割成個別檔案。解碼器只是單純執行到指定的位置,然後交給你一張靜態影像。
瀏覽器解碼如何讓這件事成為可能
現代瀏覽器已經內建了讀取 MP4、WebM 或 MOV 檔並將其顯示在螢幕上所需的軟體。這套機制同樣可以被導向,把畫格繪製到 canvas 上,canvas 是頁面可以操作的像素緩衝區。以下三項瀏覽器功能結合起來,讓本機畫格擷取得以運作:
- HTMLMediaElement.currentTime——頁面用來將影片跳到指定瞬間的屬性。根據 MDN 的 HTMLMediaElement.currentTime 參考資料,這個屬性代表目前以秒為單位的播放位置,並接受帶小數的值。
- Canvas drawImage——將當下的影片畫格複製到 canvas 的 canvas 方法。MDN 的 Canvas drawImage 參考資料說明了如何將 video 元素作為來源傳入。
- 透過 canvas.toBlob 進行 PNG 編碼——將像素緩衝區轉換成可下載 PNG 檔的方法。
流程如下:頁面將選擇的檔案載入隱藏的 video 元素,等待瀏覽器回報該檔案的長度,將 currentTime 移到要求的位置,等待跳轉完成,將目前解碼的畫格繪製到同樣大小的 canvas 上,最後將 canvas 編碼為 PNG。一切都在本機完成。影片不會被上傳,音軌會被捨棄,原始影片的位元組也保持不變。下載資料夾中的 PNG 是根據解碼器在指定瞬間所輸出的像素所新建立的檔案。
使用 Video Frame Extractor 在本機擷取畫格
Video Frame Extractor 把這個「跳轉—繪製—編碼」的流程包裝成簡單的三步驟表單。所有操作都在同一個瀏覽器分頁中完成,因此你完全不需要把影片交給伺服器。
- 選擇一個支援的本機影片,然後等待它的長度與預覽載入完成。頁面會接收該檔案,讓瀏覽器進行解碼,並回報這段影片片段的總長度。
- 輸入介於零與顯示長度之間的畫格時間,必要時可包含小數。像 2.5 這樣的值代表從開頭算起兩秒半;該欄位接受任何落在回報長度內的分數值。
- 選擇「Extract PNG frame」,確認靜態影像後下載本機 PNG。檔名會包含所選的時間,影像的尺寸與解碼器原生尺寸一致。
這就是完整的流程。不需要帳號,不需要上傳,也不需要重新編碼原始影片。
時間、畫格與瀏覽器跳轉的限制
由於畫格擷取可以用時間來指定,有必要先釐清時間與畫格編號之間的對應關係。一個簡單的計算範例:在 30 fps 的影片片段中,第 100 格落在 100 / 30 = 3.333 秒。如果你想要第 250 格,計算方式是 250 / 30 = 8.333 秒。知道原始影格率後,就能把畫格編號轉成可貼到時間欄位的時間戳記;反過來,如果你只有時間戳記,則可以將它乘上影格率,大致估算出你瞄準的是哪一個原始畫格。
即使有這樣的計算,瀏覽器也無法保證影格精確的跳轉。頁面雖然要求時間軸上的某個位置,但解碼器實際上可能會落在最近的關鍵影格、最近的解碼影格,或時間戳記被容器四捨五入後的某個畫格。可變影格率、編輯清單以及編解碼器特有的行為等因素,都會讓跳轉結果略有偏差。Video Frame Extractor 會顯示所要求的時間,並儲存解碼器在該點所產生的結果。輸出確實是來自時間軸上的真實靜態畫面,但最好將其理解為媒體時間軸上的某個位置,而非對特定原始畫格編號的保證。如果想更深入了解為什麼會這樣,可以參閱關於從影片擷取畫格及其準確度限制的詳細指南。
此外,工具對於可接受的輸入也有固定的安全上限。共享影片政策將檔案大小限制在 500 MiB、長度限制為五分鐘,任一邊的像素不得超過 4096 像素,總像素不得超過 3840 × 2160 像素。超出這個範圍的檔案會在解碼開始前就被拒絕,避免瀏覽器解碼器被迫處理它無法應付的內容。
什麼時候瀏覽器擷取是合適的工具
下表整理了適合使用瀏覽器式畫格擷取的常見情境。「最佳選擇」欄位反映的是 Video Frame Extractor 設計上能順暢處理的情境。
| 情境 | 為何適合瀏覽器擷取 | 最佳選擇 |
|---|---|---|
| 從你已有的短片擷取單一縮圖 | 一次解碼、一張靜態影像、原始尺寸 | Video Frame Extractor |
| 為投影片或文件擷取參考圖片 | 分數秒精度的時間定位,不需要上傳 | Video Frame Extractor |
| 從無法上傳到伺服器的影片素材中擷取靜態影像 | 本機解碼,資料不外傳 | Video Frame Extractor |
| 從已知時間戳記快速產生前後對照靜態影像 | 可重複使用的時間欄位,輸出為 PNG | Video Frame Extractor |
| 為影片片段中的幾個關鍵時刻製作分鏡草圖 | 每次造訪產出一張 PNG,沒有批次處理的負擔 | Video Frame Extractor |
在上述每一種情境中,目標都是得到一張與解碼器在該瞬間暫停播放時所顯示畫面一致的單一 PNG。
檔案容器與編解碼器的陷阱
Video Frame Extractor 接受五種常見的容器——MP4、WebM、MOV、M4V 與 Ogg——但光看容器並不能決定瀏覽器是否能開啟該檔案。副檔名只是外殼;包在外殼內部的音訊與視訊串流是使用特定編解碼器編碼的,瀏覽器必須支援那些編解碼器。即使副檔名在支援清單中,使用了瀏覽器未內建之編解碼器的 .mp4 檔案仍會無法載入。
| 容器 | 關於編解碼器支援的須知 |
|---|---|
| MP4 | 在現代瀏覽器中廣泛支援;容器內的編解碼器必須與瀏覽器能解碼的格式相符。 |
| WebM | 開放格式的編解碼器;在任何現行瀏覽器中通常都能順利開啟。 |
| MOV | 多半可以運作;部分 MOV 檔案使用的編解碼器是瀏覽器未內建的。 |
| M4V | 與 MP4 類似;實際表現取決於外殼內部的編解碼器。 |
| Ogg | 通常是 Theora 視訊搭配 Vorbis 音訊;廣泛支援但作為來源格式較少見。 |
如果檔案無法開啟,原因幾乎都是編解碼器不相符,而非容器本身。改用其他瀏覽器測試,或從原始編輯軟體重新匯出,通常就能解決。
什麼時候桌面工具才是更好的選擇
瀏覽器擷取速度快且注重隱私,但仍有其限制,使得某些工作得回到專用軟體上執行。當你需要以下情境時,請改用桌面工具:
- 批次擷取。在只有單一輸入欄位的瀏覽器表單中,要一次擷取數十甚至數百個畫格會相當不便。
- 精確的原始畫格編號。需要影格精準的剪輯工作,每一個編號畫格都必須是正確的那張圖片,而非鄰近的畫格。
- HDR 或色彩管理輸出。瀏覽器在 canvas 接收到內容之前,就已將 HDR 內容壓平為標準動態範圍。
- Alpha 通道工作流程。PNG 僅在解碼後的影片畫格本身含有透明資訊時才會保留透明度,而大多數編解碼器並不提供透明資訊。
- 長片素材。任何超過五分鐘與 500 MiB 上限的內容,都必須交由能從磁碟串流的工具來處理。
- 瀏覽器無法解碼的格式。ProRes、BRAW 等專業編解碼器在瀏覽器中完全無法開啟。
只要在支援範圍內——短片、一次一張靜態影像、標準編解碼器、不上傳——瀏覽器擷取就是最簡單的途徑。除此之外的情況,桌面方案會是更保險的選擇。
如果你正在權衡各種選項,在 Windows 本機從影片擷取音訊對此有詳細說明。