擷取後畫面看起來不對,幾乎一定是下列四種情況之一:所要求的時間戳記與你預期的畫面不符、瀏覽器的跳轉落到了附近的關鍵幀、檔案使用的編解碼器是瀏覽器無法渲染的,或是 PNG 是以原始來源尺寸寫入,並未經過任何縮放、裁剪、銳利化或濾鏡處理。影片畫面擷取器會回報解碼、跳轉、畫布以及編碼的錯誤,而不是產生一個空白的下載檔,因此 PNG 雖然下載成功但視覺上卻不對勁,這屬於輸入或精度的問題,而非無聲的當機。大多數的修正方式都歸結於:選擇更好的時間戳記、在支援該檔案編解碼器的瀏覽器中重新執行擷取,或是接受基於瀏覽器的跳轉在大部分影片中並非精準到畫面,並據此調整你的工作流程,而不是期望瀏覽器解碼器能提供來源畫面的精確度。

how do i fix a result that looks wrong after i extract video frame
擷取影片畫面後結果看起來不對該如何修正

「看起來不對」在擷取畫面後通常代表什麼

人們會用幾種常見的方式描述結果不對,而每一種都有不同的根本原因。畫面場景正確但比預期早或晚了幾幀,通常表示瀏覽器的跳轉落在了附近的解碼幀上,而不是你要求的確切那一幀。出現純黑或純色的 PNG,通常代表請求落到了檔案最開頭的預捲區或缺失的關鍵幀。PNG 比起影片顯得模糊或解析度較低,通常就是來源本身的解析度,因為此工具是以解碼幀的原始尺寸寫入 PNG,並不會進行縮放、內插或套用濾鏡。

另外還有兩種常見的情況。完全無法開啟的檔案,幾乎一定是「容器內編解碼器」的問題:MP4、WebM、MOV、M4V 和 Ogg 都是容器格式,瀏覽器還必須支援容器內所儲存的特定視訊與音訊編解碼器。下載的 PNG 尺寸與預期不符,反映的是瀏覽器實際解碼出來的結果,而不是你對該片段的假設,因為此工具並不會對輸出進行裁剪、縮放或填補。

為什麼瀏覽器有時會選到錯誤的畫面

瀏覽器的視訊解碼是建立在 HTMLMediaElement API 與 Canvas drawImage 方法之上。當你輸入一個時間並要求取得一個畫面時,瀏覽器會設定媒體元素的 currentTime 屬性,等待跳轉完成,將解碼後的畫面繪製到離屏畫布上,再將該畫布編碼為 PNG。精度的損失就發生在跳轉這個步驟。由於關鍵幀間隔、可變的畫面播放速率、容器中的編輯清單、時間戳記的捨入,以及編解碼器的內部行為,瀏覽器只會跳轉到附近的解碼幀。

所要求的時間會以顯示時間的形式記錄在輸出上,但此工具並不會檢查封包時間戳記,也無法識別確切的編號來源畫面。這就是為什麼「跳轉到 12.5 秒」可能回傳的是瀏覽器剛好落在 12.5 秒附近的畫面,而不是來源剪輯軟體所認定 12.5 秒的精確畫面。MDN 上 HTMLMediaElement currentTime 的參考文件記載了這項行為,而Canvas drawImage 參考文件則說明了之後如何以原生尺寸將解碼後的畫面渲染到畫布上。

使用影片畫面擷取器重新擷取更好的畫面

修正結果不對最快的方法,就是用修正過的輸入再執行一次擷取。影片畫面擷取器以三個經過驗證的步驟運作,每個步驟都讓你有機會修正前一次的失敗。

  1. 選擇一個支援的本地影片,並等待其時長與預覽載入完成。時長欄位是你可輸入時間的上限,而預覽則可確認瀏覽器能夠解碼容器內的編解碼器。
  2. 輸入介於零與所顯示時長之間的畫面時間,必要時可包含小數。若先前的擷取結果偏早,請將時間向前調整零點零幾秒;若偏晚,則向後調整。可以接受小數。
  3. 選擇「擷取 PNG 畫面」,確認靜態影像後下載本地的 PNG。輸出檔名會包含所選的時間,因此你可以並排比較兩次嘗試的結果,看看修正過的時間戳記是否解決了問題。

若第二次嘗試的結果仍然不對,幾乎可以確定不是時間戳記的問題。請繼續參考下方的表格,根據症狀找出對應的修正方式。

常見症狀與修正方式

下表將下載的 PNG 中所看到的症狀,與最可能的原因及下一步該採取的動作配對在一起。此工具本身在失敗時並不會產生空白的下載檔,因此每一列都假設已有 PNG 產生。

PNG 中的症狀 最可能的原因 下一步動作
場景正確,但相差幾幀 瀏覽器跳轉落到了附近的關鍵幀或解碼幀 以向前或向後調整零點零幾秒的時間戳記重新擷取
純黑、純白或純色的影像 請求落到了預捲區或沒有解碼幀的區域 避開第一個關鍵幀間隔內的時間戳記,從 0.5 秒或之後開始
影像模糊或解析度較低 來源影片解析度較低;PNG 為原生解碼尺寸 確認來源解析度;此工具不會進行放大、銳利化或濾鏡處理
檔案無法開啟或預覽無法載入 MP4、WebM、MOV、M4V 或 Ogg 容器內的編解碼器不受支援 使用廣泛支援的編解碼器重新編碼來源,或改用其他瀏覽器開啟
PNG 尺寸與預期不符 輸出為解碼幀的尺寸,從未經過縮放或裁剪 檢查來源尺寸;如有必要,僅在擷取後再進行縮放
時間欄位拒絕接受輸入值 數值超出零到所回報時長的範圍 重新輸入一個落在已載入時長內的數值,可包含小數
PNG 看起來正確但場景錯誤 載入了錯誤的片段,或輸入的時間位置與預期不同 重新載入正確的檔案,並以秒為單位重新輸入時間

可能導致輸出失敗的檔案、編解碼器與尺寸限制

擷取作業會在共享的影片安全政策下執行,下列任何一項限制都會導致無法取得可用的 PNG。可接受最大 500 MiB 且長度不超過五分鐘的檔案。任一邊的長度不得超過 4096 像素,總面積也不能大於 3840 x 2160 像素。能開啟哪些 MP4、WebM、MOV、M4V 或 Ogg 檔案,取決於瀏覽器自身的編解碼器支援,因此僅有支援的副檔名並不保證容器內的音訊與視訊編解碼器一定可用。當瀏覽器無法解碼該檔案時,此工具會回報解碼錯誤,而不是產生空白的下載檔。

若你的檔案超過上述任何一項限制,修正方式並非調整工具設定,而是先對來源進行剪輯、裁剪、縮放或重新編碼。若要在不上傳的情況下剪輯同一個本地檔案的片段,影片剪輯工具可產生一段固定時長的 WebM 片段。若要在擷取前縮小尺寸,影片尺寸調整工具可保持長寬比或配合指定的輸出範圍。若要在保留相同內容的前提下縮減檔案大小,影片壓縮工具會在本地重新編碼。對剪輯、縮放或壓縮過的檔案執行擷取,幾乎都能在第一次就產生乾淨的 PNG。

何時該改用桌面版影片工具

基於瀏覽器的擷取是為縮圖、參考資料、簡報,以及從你擁有或有權處理的媒體中快速取得靜態畫面而設計。它並不適合用於需要精準到畫面的剪輯工作、HDR 或色彩管理輸出、含有 alpha 通道的工作流程、跨長時間軸的批次擷取、精確的畫面編號選取、長影片,或是瀏覽器無法解碼的格式。在上述任何情況下,請改用具備檢查封包時間戳記、支援更廣泛編解碼器組合,並讓你能以實際在來源中的索引來指定畫面的專用桌面版影片工具。

如果目標只是從短片中取得一張靜態畫面,且 PNG 能夠開啟,那麼問題幾乎一定是時間或編解碼器的問題,上述步驟即可解決。請以修正過的時間戳記重新擷取,確認來源編解碼器受瀏覽器支援,並遵守 500 MiB、五分鐘、單邊 4096 像素、面積 3840 x 2160 的限制,這樣就能得到你預期中的畫面。

如果你正在權衡各種方案,使用影片裁剪時可能出錯的事:失敗地圖對此有詳細說明。

如果你正在權衡各種方案,需要擷取影片畫面時該如何開始對此有詳細說明。