調整影片大小依循一個五階段計畫：確認來源可在本地解碼、決定目標寬度與高度、在 Fit 與 Stretch 模式之間選擇、在瀏覽器分頁中執行編碼，並在使用下載的 WebM 之前先進行驗證。Video Resizer 工具會使用瀏覽器內建的影片解碼器與 MediaRecorder 即時執行該計畫，因此不會上傳任何內容到伺服器，也不依賴任何第三方媒體函式庫。由於編碼在 canvas 上以最高每秒 30 個影格的速度進行，處理時間通常與影片本身長度相當；這不是瞬間的中繼資料交換。事先規劃每個階段，有助於你避免兩個最常見的錯誤——選錯模式，以及選用會被向下取整的奇怪尺寸——並防止將 16:9 的片段當作 4:3 處理所產生的失真。以下計畫假設你手上有一段短片本地影片（MP4、WebM、MOV、M4V 或 Ogg，上限 500 MiB 與五分鐘），且心中已有目標尺寸，並以具體數字逐步帶領你走過每個步驟，讓你能將計畫對應到自己的檔案。如需可在第二個視窗中保持開啟的同一流程獨立教學，請參閱 Document the Steps to Resize a Video Locally。
以四個階段規劃調整大小
你可以把調整大小的流程想成四個規劃階段，這些階段必須在你按下調整按鈕之前完成。略過其中任何一個，是結果看起來錯誤、長寬比不對，或在瀏覽器中明顯失敗的最常見原因。這些階段並非專屬於本網站——它們說明的是無論選擇哪一種編碼器，一個合理的調整大小流程都必須確定的事項；之所以存在這些階段，是因為每個階段會鎖定一個下一階段無法撤銷的決定。
- 階段 1 — 來源稽核。確認檔案可在瀏覽器中開啟、符合支援的大小與長度限制，且像素面積不超過 3840 × 2160。
- 階段 2 — 目標尺寸。挑選符合你要投放的平台或裝置的最大寬度與最大高度，並決定你要的是邊界框還是精確的影格。
- 階段 3 — 模式選擇。依計畫選擇模式：Fit 用於保持長寬比的投放，只有在可接受失真時才使用 Stretch。
- 階段 4 — 驗證。編碼完成後，開啟 WebM 並在分享前確認尺寸、持續時間與視覺保真度。
把每個階段視為獨立的檢查項目，能讓流程保持誠實。一個常見的失敗模式是把階段 2 與階段 3 合併——直接輸入 1080 × 1080，卻沒有決定你要填滿框還是在框內貼合——然後對結果被擠壓感到意外。
在調整大小前檢查來源檔案
Video Resizer 工具接受五種檔案格式——MP4、WebM、MOV、M4V 與 Ogg——並設定三項硬性上限，決定規劃是否能繼續進行。來源檔不得大於 500 MiB、長度不得超過五分鐘，且像素面積不得超過 3840 × 2160，任何單邊不得超過 4096 像素。這些限制皆由瀏覽器自身的解碼器強制執行，因此你應該為此流程挑選短片段，而非好幾 GB 的母片。
一旦你選擇檔案，瀏覽器會在你的分頁中讀取其中繼資料並回報實際的寬度與高度。請記下這些數字——它們是後續所有規劃決策的基礎，包括本文稍後的計算範例。若中繼資料回報不支援的編解碼器，工具會以明顯方式失敗，而不會產生誤導性的下載檔案，這本身也是一個有用的規劃信號：它告訴你在嘗試調整大小之前，先將片段以不同的容器重新匯出，而不是在編碼白費工夫後才發現問題。
在正式決定之前，還有兩項來源屬性值得確認。第一，長度：超過五分鐘上限的任何內容都會在即時編碼時被拒絕，因此請提早檢查。第二，像素面積：一張 4096 像素寬的靜態影像即使時間很短也會被拒絕，因為瀏覽器解碼器無法為 canvas 繪製預備那麼大的影格。
設定目標尺寸並選擇 Fit 或 Stretch
第二個規劃階段是最多不可逆決策所在之處，因此值得以具體計算加以說明。每個目標尺寸必須是介於 2 到 1920 像素之間的整數，且出於編解碼器安全性考量，奇數值會由編碼器向下取整到最接近的偶數。大多數瀏覽器影片編碼器對偶數像素尺寸更為可靠，因此 801 × 601 的要求在內部會變成 800 × 600；當你試圖精確符合特定平台規格時，這點很重要。
Fit 模式計算範例。 假設來源是 1920 × 1080，而你想要 800 × 600 的邊界框——這是直立方向貼文或縮圖序列常見的尺寸。Fit 模式會選擇兩個縮放比例中較小者：
寬度縮放比例 = 800 / 1920 = 0.4167 高度縮放比例 = 600 / 1080 = 0.5556 貼合縮放比例 = min(0.4167, 0.5556) = 0.4167
套用該縮放比例：1920 × 0.4167 ≈ 800，1080 × 0.4167 ≈ 450。因此輸出為 800 × 450，保持 16:9 的比例（450 / 800 = 0.5625，符合 1080 / 1920）。黑邊會出現在上下方以填滿 600 像素框剩餘的 150 像素，上下平均分配為各 75 像素。若你需要緊密填滿 800 × 600，請改用 Stretch 模式並接受長寬比的改變。
Fit 與 Stretch 在同一個來源上會產生明顯不同的結果，下表將每種模式對應到更適合採用的情境。
| 準則 | Fit（保持長寬比） | Stretch（精確尺寸） |
|---|---|---|
| 長寬比 | 保持來源長寬比；永不裁切 | 獨立使用所要求的寬度與高度 |
| 輸出尺寸 | 兩個縮放尺寸中較小者，可能會留下填補黑邊 | 完全符合所要求的寬度與高度（取整至偶數） |
| 失真風險 | 無——畫面保持真實比例 | 可能有——畫面被拉伸或擠壓以符合框 |
| 最佳使用情境 | 平台比例重要的社群貼文 | 填滿固定大小的影格，且可接受失真 |
| 典型輸入 | 16:9 或 4:3 來源放入同方向的框 | 正方形 1:1 來源放入橫向或直立框 |
在瀏覽器中調整影片大小
一旦規劃階段確定，調整大小本身就是機械式的操作。以下教學使用 Video Resizer 工具，該工具圍繞瀏覽器的 HTMLCanvasElement captureStream API 與 MediaRecorder API 建構，如 MDN 中關於 canvas captureStream 與 MediaRecorder 的條目所述。
- 開啟 Video Resizer 並選擇一個支援的本地影片；等待瀏覽器中繼資料填入，以便查看實際的寬度、高度與長度。
- 輸入你規劃好的最大寬度與最大高度，每個值都保持 2 到 1920 像素之間的整數，並盡量使用偶數以避免單一像素的取整。
- 當你規劃的是保持長寬比的邊界框時選擇 Fit，當你規劃的是精確尺寸並接受失真時選擇 Stretch。
- 選擇 Resize video，保持分頁開啟且可見，並等待 canvas 以最高每秒 30 個影格的速度擷取影格，讓 MediaRecorder 即時編碼出 WebM。
- 錄製停止時，將可下載的 WebM 儲存到你的裝置，並將該檔案與來源一同保留以便驗證。
編碼是即時重新編碼，而非僅變更中繼資料的尺寸調整：瀏覽器會解碼來源、以 30 fps 將每個影格繪製到調整大小後的 canvas 上，附加任何瀏覽器可存取的音軌，並使用當前分頁上 MediaRecorder 選擇的 VP9 或 VP8 編解碼器設定，將擷取的 canvas 寫入 WebM 容器。這也是為什麼品質、影格時序、色彩中繼資料與檔案大小會與來源不同——它們都是重新編碼的輸出，而非原始檔案的保留屬性。
在使用輸出之前先進行驗證
最後一個規劃階段是驗證，而這也是最多讀者會略過的階段。在同一個瀏覽器或任何現代影片播放器中開啟下載的 WebM，並確認四件事：實際尺寸符合你所要求的（或輸入奇數時向下取整的偶數值）、長度符合來源、視覺保真度對你的用途而言可接受，以及任何音軌以正確的配置存在。若這四項檢查中有任何一項未通過，請勿分享該檔案——以不同的尺寸重新規劃、在 Fit 與 Stretch 之間切換，或改用桌面編碼器。
你可以使用同一個瀏覽器分頁並排比較來源與結果。一個快速的健全性檢查是播放兩個檔案並觀看第一個與最後一個影格；若第一個影格相符且長度相符，代表計畫中的幾何部分已正確運作。若要對較長或商業性影片進行更深入的檢查，請將 WebM 交給專用的桌面編碼器，以便逐影格與來源比對。
工具的兩種行為使驗證更容易。第一，共享的稽核 Matroska 長度寫入器會在 WebM 標頭中修補一個有限的長度，使播放器不會將該檔案視為無限長。第二，空白的錄製輸出會被拒絕而非被下載，因此你絕不會得到一個偽裝成成功調整大小的零位元組檔案。
何時桌面編碼器是更好的選擇
基於瀏覽器的 Video Resizer 刻意將範圍限制在短片段與快速的規劃工作流程。對於需要影格精準度、色彩管理母帶製作、必須輸出 MP4、精確位元率控制、長片段，或任何需要保留字幕或多音軌的專案，請改用專用的桌面編碼器。瀏覽器的 MediaRecorder 並不保證專業級的母帶製作品質，也無法繞過受保護媒體的 DRM——它僅適用於你擁有或已獲授權編輯的媒體。
同樣的邏輯也適用於升級放大。該工具不會無中生有地產生原本不存在的細節；它只是以不同解析度重新繪製既有的像素。如果你載入 640 × 360 的片段並要求 1920 × 1080，你會得到一個把相同資訊攤得更開的較大影格，而非更清晰的畫面。誠實地規劃調整大小能做與不能做的事，是工作流程的一部分，也正是它區分出有用的調整大小檔案，與僅是在更大尺寸下看起來更差的檔案的關鍵。
最後，八個獨立的幾何測試案例涵蓋橫向、直立、正方形、同比例、邊界框、拉伸與奇數尺寸情境，因此你以上規劃所用的尺寸是經過測試的範圍，而非未經測試的猜測。在這些範圍內規劃、依序執行步驟，結果就會符合規劃。
若你在權衡選項，How to Repeat a Video Resize and Get the Same Result 對此有詳細說明。