影片調整尺寸工具是一種透過將每個影格重新編碼為新的寬度與高度,來改變影片檔案像素尺寸的工具,進而產生一個能以所要求大小播放的新檔案。基於瀏覽器的 Video Resizer 使用 HTML5 影片解碼、canvas 以及 MediaRecorder,在你的分頁中本地執行此重新編碼,因此原始檔案從不離開裝置。它接受 MP4、WebM、MOV、M4V 及 Ogg 檔案,檔案大小上限為 500 MiB,長度上限為五分鐘,原始尺寸每邊不超過 4096 像素,且總像素面積不超過 3840×2160 像素;輸出的 WebM 檔每邊上限為 1920 像素。幾何設定由兩個簡單的切換選項控制:Fit(適配)將輸入數字視為外框邊界,並保留長寬比;Stretch(拉伸)則獨立使用精確的寬度與高度,因此可能會使畫面失真。由於重新編碼在頁面上即時執行,處理時間通常與影片播放時間相當。

video resizer explained
Video Resizer Explained: How Local Resizing Works

「調整影片尺寸」實際上代表什麼

調整影片尺寸意指改變構成每個影格的水平和垂直像素數量。播放器中顯示的寬度與高度描述的是影格的像素網格:一個 1920×1080 的影格具有 1,920 欄與 1,080 列。當調整工具改變這些數字時,必須在新的網格上重新渲染每一個影格,這是因為像素無法在不重繪畫面的情況下直接被刪除或新增。此重新渲染是一次真正的重新編碼,而非僅修改元資料。它會重新取樣原始影像,混合相鄰像素以符合新尺寸,並寫入一個播放器能再次解碼的新編碼位元串。最終結果是一個像素尺寸符合要求、全新的影片檔案。

在每次調整尺寸的要求下,存在兩個幾何概念。第一個是長寬比,即寬度與高度之間的比例關係。1920×1080 的影格為 16:9,1080×1080 的影格為 1:1,1080×1920 的影格則為 9:16。第二個是外框邊界與精確矩形之間的區別。外框邊界是最大的容器:其中的內容必須容納進去,因此以兩軸中較小的縮放比例決定輸出。精確矩形顧名思義——每個要求的像素都會被保留,即使這代表壓縮影像。

基於瀏覽器的調整工具與伺服器工具有何不同

許多「線上」影片調整工具會將原始檔案上傳至遠端伺服器,在雲端硬體上進行處理,再回傳下載連結。這種模式可行,但會產生明顯的權衡取捨:檔案會離開裝置,在處理期間存放在第三方基礎架構上,並且依賴上傳頻寬。對於較長的影片、較大的原始檔或機密內容,這些權衡取捨可能至關重要。

Video Resizer 採用不同的模式。瀏覽器本身就是編碼器。選擇的檔案由頁面內的影片元素讀取,逐影格解碼後繪製到具有新尺寸的 canvas 上,再透過 canvas 的 captureStream 方法擷取,並使用瀏覽器內建的 VP9 或 VP8 WebM 編碼器透過 MediaRecorder 錄製。由於每個步驟都在當前分頁中進行,原始檔案從不經過網路傳輸。唯一的網路活動僅限於初次載入頁面。這種做法背後的隱私機制已在 Is an Online Video Resizer Safe? What Really Happens 一文中詳細說明。

此架構也說明了輸出格式的選擇。該工具輸出 WebM 格式,因為這是瀏覽器能透過 MediaRecorder 原生產生的容器格式。若嘗試從同一處理流程寫出 MP4,則需要搭載龐大的媒體編碼器函式庫,而這正是此設計刻意避免的。

Video Resizer 內部:處理流程

其內部處理流程包含八個可辨識的步驟:

  1. 將選擇的檔案載入 HTML5 影片元素,以便瀏覽器能解碼其影格。
  2. 讀取瀏覽器中繼資料——長度、像素尺寸、支援的編碼器——並依據文件說明的限制進行驗證。
  3. 使用者輸入的寬度與高度會被限制在 2–1920 的偶數整數範圍內,奇數值會減少一個像素以確保編碼器相容性。
  4. 計算幾何設定:Fit 模式使用保留長寬比的包含式數學計算;Stretch 模式則使用精確要求的數學計算。
  5. 將解碼後的影格繪製到尺寸為計算結果的 canvas 上。
  6. 瀏覽器所公開的任何音軌都會與影片串流一同擷取。
  7. MediaRecorder 使用支援的 VP9 或 VP8 設定,以最高 30 fps 的速度寫入 WebM 檔案。
  8. 錄製完成後,透過經稽核的共用 Matroska duration writer 將有限的長度修補寫入 WebM,並公開一個可撤銷的物件 URL 供下載。

Canvas captureStream 行為與 MediaRecorder 生命週期皆記錄於 MDN canvas captureStream 參考文件MDN MediaRecorder 參考文件 中。理解這兩個瀏覽器 API 即可解釋該工具的所有行為,從為何影格時間可能會稍微漂移,到為何輸出是 WebM 而非 MP4,皆能由此說明。

如何使用 Video Resizer 在本地調整影片尺寸

此工作流程需要你做出三個明確的決策,以及一段等待時間:

  1. 開啟 Video Resizer 頁面,選擇一個支援的本機檔案。支援的類型為 MP4、WebM、MOV、M4V 及 Ogg。請等待瀏覽器完成中繼資料載入;若檔案過大、過長或解析度過高,工具會以明顯的方式失敗,而不會產生誤導性的檔案。
  2. 輸入最大寬度與最大高度,兩者皆須為整數。若希望在外框邊界內保留原始長寬比,請選擇 Fit;若希望無論是否失真皆使用精確的寬度與高度,請選擇 Stretch。
  3. 選擇 Resize video(調整影片)。編碼為即時進行,因此請保持分頁開啟並維持在前景,直到錄製器停止。
  4. 錄製完成後,頁面會顯示所產生 WebM 檔案的下載連結。請將其儲存於本地;該 URL 是可撤銷的。

若輸出結果看起來不正確,請重新檢查模式。Stretch 可能會將圓形擠壓成橢圓形;Fit 則必定保留原始的比例形狀。

Fit 與 Stretch:並列比較

兩種模式解決不同的問題。下表從讀者通常關心的各個面向進行對比。

屬性Fit 模式Stretch 模式
將輸入視為外框邊界(最大寬度、最大高度)精確尺寸
長寬比保留原始比例可刻意變更
輸出大小採用兩軸中較小的縮放比例套用至原始影像精確要求的寬度 × 精確要求的高度
失真絕不會失真;絕不裁切可能使畫面失真
最佳用途在符合最大尺寸的同時保留比例精確填滿固定畫面,例如 1920×1080 的母版

一個具體的範例能讓 Fit 的計算更清楚。假設有一個 1920×1080(16:9)的原始檔,並要求 1280×1000 的外框邊界。

  • 寬度縮放比例 = 1280 ÷ 1920 = 0.6667
  • 高度縮放比例 = 1000 ÷ 1080 = 0.9259
  • Fit 採用較小的縮放比例:0.6667
  • 輸出寬度 = round even(1920 × 0.6667) = 1280
  • 輸出高度 = round even(1080 × 0.6667) = 720

因此 Fit 會產生一個 1280×720 的檔案。由於高度方向的縮放比例較大,因此永遠不會達到 1000 像素的上限;Fit 會縮小至限制較嚴格的軸。若上限為 1280×600,Fit 將採用高度方向的縮放比例(0.5556),並輸出 1066×600。Stretch 則會忽略這兩個縮放比例,直接產生字面上的 1280×1000 檔案,使 16:9 的原始影像明顯地垂直拉伸。

必須遵守的限制與輸入條件

以下每一項限制皆為產品契約的一部分;若違反任何一項,工具會以明顯的方式失敗,而不會產生損壞的檔案。

限制條件數值
原始容器格式MP4、WebM、MOV、M4V、Ogg
原始檔案大小上限 500 MiB
原始長度上限 5 分鐘
原始每邊解析度上限 4096 像素
原始總像素面積上限 3840 × 2160 像素
目標寬度2–1920,偶數整數
目標高度2–1920,偶數整數
輸出容器格式WebM(VP9 或 VP8)
輸出影格率上限 30 fps

奇數的目標值會向下調整一個像素,因為在常見的瀏覽器編碼器中,編碼器相容的偶數尺寸更為可靠。這是出於安全性的調整,而非錯誤:要求 1281×721 會實際產出 1280×720。不支援的編碼器、無效的尺寸、過大的原始中繼資料、空白的錄製器輸出,以及瀏覽器功能不足,皆會以明顯方式失敗,而不會產生誤導性的下載檔案。

何時桌面編碼器是更佳選擇

基於瀏覽器的調整尺寸功能快速、私密且無相依性,但無法取代專業的編碼器。其契約明確說明:該工具不會放大細節、移除黑邊、裁切主體、保留字幕或多音軌、繞過 DRM,也無法保證專業級母版品質。即時編碼會在品質、位元率、影格時間、音訊配置、色彩中繼資料以及檔案大小等方面,與原始檔案產生差異。輸出是一次真正的重新編碼,而非僅修改中繼資料的尺寸變更,這正是為何新調整尺寸的檔案其位元組大小可能與原始檔案明顯不同。

若需要影格精確的交付、長片輸出、必須的 MP4 格式、色彩管理工作流程,或精確的位元率控制,則正確的做法是使用專用的桌面編碼器,例如 FFmpeg、HandBrake 或 Shutter Encoder。Video Resizer 適合在需要快速將影片本地調整為 WebM,並具備可預測的幾何設定、無需上傳、無需安裝的情境使用。僅可使用你擁有或擁有編輯權利的媒體;此單一原則為該工具所有其他保證的基礎。

延伸閱讀:Video Resizer for Beginners: Resize a Video Locally