要取得單一影片畫面，您可使用一個瀏覽器工具，並對本地短片中的某個時間點定位，瀏覽器會跳至該時間點、以原生像素大小解碼最近的畫面、將該畫面繪製到 canvas 上，然後將結果存成可下載的 PNG，全程無需上傳來源檔案。多數讀者預期會看到的關鍵背景資訊是影格率：每部影片都會以固定或變動的每秒畫面數儲存，您輸入的時間會被轉換為該時間軸上的某個位置。30 fps 的影片每秒包含 30 個等距畫面，因此要求第 10 秒的位置會對應到畫面索引 300。然而瀏覽器並不保證回傳的畫面與該索引完全相符。關鍵畫面、可變影格率、編輯清單，以及編解碼器特有的時間戳記進位，都可能讓解碼器偏移到附近的畫面。理解這項差距，正是能否區分「精準至畫面編號的輸出」與「接受瀏覽器能解碼出的最接近畫面」的關鍵。本指南將說明影格率與畫面擷取之間的關係，逐步介紹使用 Video Frame Extractor 的完整步驟，並列出開始前您應預期會遇到的限制。
「取得影片畫面」真正的含義
當讀者輸入「how to get video frame rate」（如何取得影片影格率）時，他們通常指的是下列兩件事之一：識別檔案的每秒畫面數值，或是從檔案擷取單張靜態影像。兩種操作看似相近，卻回答不同的問題。偵測影格率通常涉及讀取容器的中繼資料，或在已知區間內計算畫面數。擷取畫面則是另一項任務：您指定影片中的某個時間點，並下載該時間點在畫面上呈現的靜態影像。
本 Video Frame Extractor 執行的是第二項任務。它並不會在介面上顯示「23.976 fps」或「29.97 fps」這類數字，因為瀏覽器的媒體解碼器是被要求跳至某個時間點並回傳解碼後的影像，而非檢查封包的時間戳記。您實際得到的是最接近您請求時間的已解碼畫面，並匯出為保留原始解碼像素尺寸的 PNG。
這在編輯工作中相當重要，尤其是當精確的畫面編號至關重要時，包括調色作業、廣播後製或動態分析。至於縮圖、參考資料、簡報投影片與社群貼文，最接近的已解碼畫面幾乎都已足夠，且其速度與零上傳的特性遠勝於微小的畫面偏移。
影格率如何影響您擷取的畫面
影格率決定影片的時間解析度。24 fps 的影片每秒包含 24 個畫面，30 fps 的影片每秒包含 30 個，60 fps 的影片則每秒包含 60 個。計算方式很簡單：目標畫面索引等於請求時間（以秒為單位）乘以每秒畫面數。
計算範例：一部 24 fps 的影片，請求時間為 8.5 秒。
- 每秒畫面數：24
- 請求時間：8.5 秒
- 該時間點的畫面索引：8.5 × 24 = 204
這告訴您，若每個畫面皆等距分佈，則第 8.5 秒的位置對應到編號 204 的來源畫面。然而若最近的 I-frame 或同步樣本偏移了幾毫秒，瀏覽器可能回傳畫面 200 或畫面 208。可變影格率的素材，其影格率會隨片段變動，更讓計算變得困難，因為整段時間軸上無法套用單一乘數。
這就是為什麼本工具會記錄請求時間，而非實際回傳的畫面編號。所顯示的時間仍為媒體時間軸上的位置，並不保證來源畫面的精確性。
如何從本地影片擷取單一畫面
當您想從短片中取得單張靜態影像，且希望所有作業都在瀏覽器內完成時，可使用 Video Frame Extractor。流程圍繞三個已驗證的步驟：
- 選擇一部受支援的本地影片，並等待其時長與預覽載入完成。受支援的容器格式包括 MP4、WebM、MOV、M4V 與 Ogg，但仍受限於瀏覽器對容器內音訊與視訊串流的編解碼器支援。
- 輸入介於零與所顯示時長之間的畫面時間，必要時可使用小數。支援輸入帶小數的秒數（例如 12.5 或 0.083），且輸入內容會在跳轉前先依據影片回報的時長進行驗證。
- 選擇 Extract PNG frame，於預覽區確認靜態影像，再下載本地的 PNG。輸出檔名會包含所選時間，且 PNG 會保留已解碼畫面的原生像素尺寸，不進行縮放、裁剪、銳化或濾鏡處理。
影片檔案會透過 HTMLMediaElement 的跳轉功能、Canvas 的 drawImage 與 PNG canvas 編碼，於目前分頁中處理。若解碼、跳轉、canvas 或編碼發生失敗，系統會顯示錯誤訊息，而非產生空白的下載檔案，因此您可修正輸入後再試一次，而不會遺失原本的進度。
為何瀏覽器的跳轉鮮少精準至畫面
瀏覽器的影片解碼器是為流暢播放所最佳化，而非為了隨時精準跳至特定畫面編號。當您在媒體元素上設定 currentTime 時，解碼器會尋找能快速解碼的最近關鍵畫面（I-frame），再從該位置向前或向後解碼至請求的位置。實際回傳的畫面可能比您輸入時間所對應的畫面早或晚幾個畫面。
有四個因素會擴大這項差距：
| 因素 | 對跳轉精度的影響 |
|---|---|
| 關鍵畫面間隔 | 較長的 GOP（picture group）會迫使可解碼位置之間的跳轉距離加大。 |
| 可變影格率 | VFR 素材的畫面間距並不均勻，因此單一影格率乘數無法描述整段片段。 |
| 編輯清單與 CTTS 偏移 | 容器中繼資料可能使顯示時間偏離解碼時間，干擾時間運算。 |
| 編解碼器時間戳記進位 | 某些編碼器會將時間戳記進位至最近的倍數，導致請求時間偏差一個畫面。 |
若您需要精確的編號畫面，可在目標時間略往前一點跳轉，再以小數增量（例如 30 fps 下使用 0.033 秒）逐步往前推進，直到所見的靜態影像符合您想要的動作。若是需要精準至畫面的編輯工作，本合約建議改用專用的桌面影片工具。
支援的檔案、編解碼器與安全限制
本工具遵循共享的影片安全政策，對檔案大小、時長與尺寸設有上限。檔案大小上限為 500 MiB，時長不得超過 5 分鐘，每邊像素不得超過 4096 像素，總面積不得超過 3840 × 2160 像素。任何超出上述限制的檔案，在嘗試跳轉前便會被拒絕，因此龐大的 4K 母片或冗長的訪談影片需先進行裁剪或轉檔。
瀏覽器的編解碼器支援決定了哪些檔案能真正於工具內開啟。MP4 屬於容器而非編解碼器，即便副檔名屬於允許清單，若 MP4 內含的音訊或視訊串流不為瀏覽器所支援，仍會載入失敗。MOV 與 M4V 檔案亦適用相同限制。WebM 與 Ogg 則仰賴瀏覽器內建的 VP8、VP9、AV1 與 Opus 或 Vorbis 解碼器，若未內建，該檔案將被視為不支援。
| 容器 | 常見內含編解碼器 | 開啟行為 |
|---|---|---|
| MP4 | H.264, H.265, AAC | 於瀏覽器搭載對應解碼器時可開啟。 |
| WebM | VP8, VP9, AV1, Opus, Vorbis | 於瀏覽器內建 VP9 或 AV1 時可開啟。 |
| MOV | H.264, ProRes, AAC, ALAC | 可辨識容器；結果取決於編解碼器。 |
| M4V | H.264, AAC | 通常視為 MP4 處理；結果取決於編解碼器。 |
| Ogg | Theora, Vorbis, Opus | 於瀏覽器內建 Theora 或 Opus 時可開啟。 |
若檔案無法載入，通常的解決方式是將來源檔案轉檔一次為廣泛支援的編解碼器組合，而非反覆重試相同的容器。
何時需要使用專用的桌面影片編輯器
基於瀏覽器的畫面擷取工具能涵蓋常見情境：單張靜態影像、單一時間位置、單一 PNG。但仍有數種工作超出此範圍，較適合使用桌面工具。
- 精準至畫面的擷取。能讀取封包時間戳記並逐張逐步解碼畫面的工具，可穩定地命中特定編號的畫面，這是瀏覽器無法保證的。
- 批次擷取。以固定間隔擷取數十張靜態影像，使用 CLI 指令稿或批次模式的影片編輯器，會比在瀏覽器分頁中一張一張擷取更為迅速。
- HDR 與色彩管理輸出。瀏覽器解碼器通常輸出 SDR；HDR 轉換函式與色彩空間需要能正確處理母版中繼資料的工具。
- Alpha 通道工作流程。PNG 僅在瀏覽器解碼出的畫面具備透明度時才會保留透明資訊，而這在一般影片中相當少見；對於真正的 Alpha 處理，採用專用流程會更為可靠。
- 長片與不支援的編解碼器。任何超出 5 分鐘、500 MiB 安全限制的素材，或瀏覽器無法解碼的編解碼器，皆應交由桌面型 NLE 或基於 FFmpeg 的流程處理。
至於縮圖、參考資料、簡報投影片、社群貼文，以及從您擁有或可處理的媒體中快速擷取靜態影像等用途，由於來源檔案從不離開您的裝置，本地的瀏覽器流程通常是最快的途徑。
對於希望將本方法與逐畫面擷取進行比較，或想了解相關應用情境（例如超音波影像）的讀者，深度指南 Capture a Video Frame as a PNG: Exact Time, Full Size 從精準度導向的角度介紹了同一項工具。瀏覽器跳轉機制的相關說明請參閱 MDN 的 HTMLMediaElement.currentTime 參考文件，而產生 PNG 的 canvas 步驟則遵循 CanvasRenderingContext2D.drawImage API。
若您正在權衡各種方案，How to Get a Video Frame Image at an Exact Time 對此有詳細說明。