要擷取影片的單格畫面,請在瀏覽器中載入本機影片檔案,輸入你想要的那一刻的時間戳記,讓�覽器將那段剛好一秒的影片解碼成一張可供下載的 PNG 圖檔。整個處理流程都在你自己的裝置上執行:影片永遠不會被上傳,檔案也不會重新編碼,最後產生的靜態圖會保留解碼後該格的原生像素尺寸。現代瀏覽器可以跳到零到影片完整時長之間的任何時間點,使用標準的 drawImage 方法將解碼後的影格繪製到畫布上,並交給你一張與畫面所見一致的、可以下載的 PNG。因為來源影片是就地解碼的,所以這張 PNG 會繼承播放器在該時間點暫停時所看到的相同長寬比與解析度。這就是讓整個工作流程既快速又可預測的原因:選好那一刻、輸入時間,瀏覽器就會在大約一次跳轉的時間內,把一張靜態圖交到你手上。

how to get video frame image
how to get video frame image

「取得影片單格畫面」實際上代表什麼

影片影格是影片中某一瞬間的單一靜態圖片。標準影片每秒大約包含 24 到 60 張這類靜態畫面,它們疊在一起才產生動態效果。當你想要一張影片單格畫面時,你其實是在要求播放器停在這些靜態畫面中的某一張上,並把它以獨立的圖檔形式交給你,讓你可以在任何一般圖片適用之處開啟、編輯或貼上。

有趣的是,你不必安裝任何影片編輯軟體,也不用寫任何程式碼就能做到這件事。瀏覽器本身就內建了影片解碼器、可以承載圖片的畫布,以及把這張圖打包成 PNG 的能力。像 Video Frame Extractor 這樣的專用工具,只是把這些環節串在一起:載入你的本機檔案、把播放頭跳到你指定的秒數、擷取那一瞬間螢幕上的畫面,然後匯出成 PNG。因為影片從未離開你的電腦,這也是從你無法或不願上傳到網路上的影片片段中擷取靜態圖最乾淨的方式。

三個步驟取得單格畫面

在瀏覽器中開啟 Video Frame Extractor,並依照下列三個步驟進行。每一步都很簡短,當發生任何錯誤(缺少編解碼器、跳轉落點超出時間軸、編碼錯誤)時,工具會回報問題,而不是丟給你一張空白圖片。

  1. 選擇一個支援的本機影片。 從電腦中挑選一個 MP4、WebM、MOV、M4V 或 Ogg 格式的單一檔案,然後等待時長讀數與預覽縮圖出現。解碼器需要一小段時間來檢查容器格式並讀取時間軸長度。
  2. 輸入介於零與顯示時長之間的時間值。 在時間欄位中輸入你想要的時間戳記。整數秒、如 1.5 這類小數,以及如 0.250 這類毫秒值都是有效的輸入。如果你輸入的時間超出時長範圍,欄位會在擷取執行前先拒絕該輸入。
  3. 選擇「Extract PNG frame」、確認靜態圖,然後下載本機 PNG。 按下擷取按鈕,查看預覽確認這正是你想要的那一刻,然後儲存檔案。檔名會包含你輸入的時間戳記,方便整理多張擷取下來的圖。

時間欄位可接受的值

只要是瀏覽器能解讀為影片時間軸位置的數值都可以使用。下表顯示時間欄位所支援的格式。下列全部都屬於該工具八組固定時間測試案例的一部分,因此都是已驗證可用的輸入,涵蓋起點、毫秒值、小數秒、一般秒數、影格速率風格的小數、一分鐘標記,以及最長時長邊界。

輸入風格範例對應的目標位置
片段開頭0時間軸原點的第一張影格
毫秒值0.250進入片段四分之一秒處的位置
小數秒1.5進入片段一秒半的位置
一般秒數30時間軸上的第 30 秒標記
影格速率風格的小數60.033在 30 fps 下常用來對齊影格邊界
一分鐘標記60進入片段六十秒的位置
最長時長邊界(影片時長)最後一個有效的跳轉位置

先確認的檔案、解析度與時長限制

瀏覽器的影片解碼器最擅長處理短而精簡的片段。擷取工具沿用了共同的影片安全政策,因此解碼與 PNG 編碼步驟都能順利完成。如果你的檔案超出下列任一數值,工具會拒絕該輸入,而不是產出一張損毀的圖片。

限制項目最大值
檔案大小500 MiB
時長5 分鐘 (300 秒)
寬度或高度每邊 4096 像素
總像素面積3840 × 2160 像素
支援的容器格式MP4、WebM、MOV、M4V、Ogg

請記住,擁有支援的副檔名並不等同於擁有支援的編解碼器。MP4、MOV 與 M4V 這幾種容器可以容納許多不同的影音編解碼器,而瀏覽器只有在檔案內部使用的編解碼器也是它支援的編解碼器時,才能順利開啟該檔案。如果某個片段無法載入,最常見的原因通常是編解碼器不相符,而非副檔名或檔案大小。

為什麼瀏覽器最後可能落在鄰近的影格

你輸入的時間戳記是媒體時間軸上的一個位置,並不等同於保證對應到某一個編號的來源影格。當你要求播放器跳到 12.04 秒時,瀏覽器會使用 HTMLMediaElement seeking 來尋找最接近的已解碼影格(通常是最近的關鍵影格),然後向前播放直到播放頭通過你指定的時間。有幾個因素會影響最終落在哪一張影格:

  • 關鍵影格間距。 編碼器會每隔一段時間(通常是每 1 到 4 秒)儲存一張完整的圖片,並從這些圖片重建中間的影格。瀏覽器只能瞬間跳到關鍵影格;其他所有影格都需要短暫的向前播放。
  • 變動式影格速率。 以非固定速率錄製的影片可能會出現輕微飄移,因為容器中的時間戳記無法完美對齊固定的 30 或 60 fps 網格。
  • 編輯清單。 部分 MP4 與 MOV 檔案帶有會重寫時間戳記而不重新編碼影格的元資料,瀏覽器可能會依循重寫後的時間,而不是原始影格順序。
  • 時間戳記四捨五入。 媒體元素會將跳轉動作四捨五入到底層解多工器所支援的精度,通常是毫秒級,而非次毫秒級。
  • 編解碼器行為。 每一種編解碼器(H.264、HEVC、VP9、AV1)都有自己決定哪些影格保留在記憶體、哪些丟棄的規則,這會影響跳轉完成的乾淨程度。

實務上這代表你下載到的靜態圖確實是該瞬間的準確畫面,但它未必是你剪輯時間軸上 12.04 處那張編號完全一致的來源影格。對大多數用途來說——包括縮圖、簡報引用、部落格插圖、設計稿——這樣的精確度已經綽綽有餘。

什麼時候桌面版影片工具才是更好的選擇

瀏覽器內的擷取工具是為了你電腦上已有的短片段、一次一張靜態圖的需求而設計的。以下幾種情況,完整的桌面版影片編輯軟體才是更合適的工具:

  • 影格精準的剪輯工作。 如果你需要從 30 fps 時間軸上精確擷取第 1448 格影格以進行調色或 VFX 底圖,你就需要一個能讀取封包時間戳記並逐格行進的工具。
  • 批次擷取。 一次從一百支片段中各擷取一張靜態圖,或從一段很長的錄影中儲存所有關鍵影格,使用具備批次支援的專用工具會更快。
  • HDR 或色彩管理輸出。 瀏覽器的畫布輸出不會保留 HDR 元資料或色彩設定檔,因此如果這些對你的交付物很重要,就必須使用桌面版工具。
  • Alpha 通道工作流程。 透明度只有在解碼後的影片影格本身帶有 alpha 通道時才能保留,而大多數編碼過的影片並不具備。處理來自影片的 PNG alpha 通道通常需要桌面版的處理流程。
  • 長片段或不支援的編解碼器。 任何超過五分鐘、超過 500 MiB,或是瀏覽器無法解碼的編解碼器(部分 HEVC、ProRes 或 AV1 硬體設定檔),都需要一個能直接從磁碟讀取檔案的工具。

擷取單一影格的常見理由

人們通常出於下列其中一個明確的理由而需要影片單格畫面,而瀏覽器內的工作流程可以乾淨俐落地涵蓋每一種:

  • 縮圖與預覽圖。 從片段中具意義的一刻擷取的靜態圖,會比播放器自動挑選的預設封面影格更適合作為縮圖。
  • 簡報與文件引用。 將教學影片中的某張靜態圖放入簡報、知識庫文章或訓練文件中,在需要列印或加註解時,靜態圖會比影片更容易處理。
  • 設計稿與模型。 在設計圍繞影片播放器的 UI 時,設計師經常需要一張與播放器實際顯示完全一致的靜態圖,而原生尺寸的 PNG 正好能滿足這個需求。
  • 從自己擁有的片段快速擷取。 對於個人檔案、跨平台發布到社群媒體,或擷取你擁有權利的媒體畫面,一張一次性的 PNG 就足夠了。
  • 插畫用的參考畫面。 藝術家與寫作者經常需要從影片中取出某一個瞬間作為視覺參考,而 PNG 是最容易放進參考資料板的格式。

不論是哪種情況,整個工作流程的樣貌都一樣:開啟本機檔案、輸入你想要的那一刻的時間、擷取一張 PNG、然後下載。由於解碼、跳轉、畫布繪製與 PNG 編碼全部都在本機端完成,因此在你電腦與外界之間流動的,只有你選擇儲存的那個檔案。

如果你正在比較各種做法,以精確像素座標將影片裁切為 9:16 一文對此有更詳細的說明。

如果你正在比較各種做法,在不損失畫質的前提下縮減影片大小:擷取一張影格 一文對此有更詳細的說明。