Base64 轉影片

相關推薦

適用場景

• 除錯後端影片介面：當 API 回傳 Base64 編碼的影片資料時，直接貼上到工具中快速預覽，驗證介面回傳是否正確，無需寫前端解碼程式碼
• 驗證影片編碼輸出：使用 FFmpeg 或雲端轉檔服務生成 Base64 影片後，解碼播放驗證轉檔結果是否正常，排查編碼損毀問題
• 還原前端內嵌影片：擷取 HTML、CSS 或 JavaScript 中的 Data URL 格式內嵌影片（data:video/mp4;base64,...），還原為可檢視的影片檔案
• 影片資料快速校驗：對比兩個 Base64 影片是否解碼出相同內容，或者驗證 Base64 傳輸過程中是否出現資料損毀
• 短影片臨時預覽：對於不需要儲存到本機的短影片片段，直接在工具中預覽播放，確認內容後再決定是否下載
• 爬蟲資料解析：網頁爬蟲抓取到的 Base64 編碼影片資料，快速還原為可播放檔案進行內容審核或分析
• 用戶端開發除錯：行動裝置 App、小程序開發中，後端回傳 Base64 影片時，用本工具驗證資料正確性再進行用戶端解碼開發
• 教學示範用途：講解 Base64 編碼原理、Data URL 技術、前端 Blob/URL.createObjectURL 用法時，作為線上示範工具
• 郵件附件預覽：某些郵件系統將附件轉為 Base64 嵌入，擷取後可快速還原影片內容檢視
• Bug 重現輔助：測試團隊回報影片相關 Bug 時，提供 Base64 資料，開發人員可快速還原影片重現問題場景

使用方法

1. 取得 Base64 影片資料：從 API 回應、記錄檔、HTML 原始碼、資料庫等地方複製 Base64 編碼的影片字串，支援帶或不帶 Data URL 前綴
2. 貼上到輸入區域：將複製的 Base64 文字完整貼上到工具的輸入框中，工具會自動辨識是否包含 data:video/...;base64, 前綴
3. 確認或選擇格式：如果輸入帶 Data URL 前綴，工具會自動辨識 MIME 類型；如果是純 Base64，手動選擇對應的影片格式（MP4/WebM/OGG）
4. 點擊解碼按鈕：點擊解碼按鈕後，工具在瀏覽器本機執行 Base64 解碼、Uint8Array 轉換、Blob 建立等操作，過程中顯示狀態提示
5. 檢視影片資訊：解碼完成後檢視影片基本資訊，包括檔案大小、MIME 類型、格式確認等，驗證解碼是否成功
6. 預覽播放影片：使用頁面內建的 HTML5 播放器預覽影片，拖曳進度條檢查影片內容是否完整、畫面聲音是否正常
7. 下載影片檔案：確認影片無誤後，點擊下載按鈕將 Blob 影片儲存到本機，檔案會自動匹配正確的副檔名（.mp4/.webm/.ogg）

功能特點

• 智慧辨識輸入格式：自動偵測純 Base64 編碼和完整 Data URL 格式（data:video/...;base64,前綴），無需手動去除前綴即可解碼
• 多格式影片支援：完整支援 MP4（video/mp4）、WebM（video/webm）、OGG（video/ogg）等主流瀏覽器原生支援的影片 MIME 類型
• 瀏覽器本機處理：所有 Base64 解碼、Blob 生成、影片預覽操作全部在使用者瀏覽器內透過 JavaScript 完成，影片資料不上傳任何伺服器
• 即時預覽播放：解碼後自動生成 HTML5 video 播放器，支援播放、暫停、進度拖曳、音量調節、全螢幕等完整播放控制項
• 原始檔案下載：一鍵將解碼後的影片儲存為本機檔案，自動根據 MIME 類型選擇正確的檔案副檔名（.mp4/.webm/.ogg）
• 自動 MIME 類型偵測：從 Data URL 前綴自動辨識影片格式，無需使用者手動選擇；純 Base64 輸入時支援手動指定格式
• 即時解碼進度回饋：大體積 Base64 資料解碼時顯示處理狀態，避免使用者誤以為頁面卡住
• 影片中繼資訊展示：解碼後顯示影片大小、MIME 類型、長度（可播放時）、解析度等基本資訊
• 錯誤診斷提示：輸入格式錯誤、Base64 編碼損毀、影片格式不支援時給出明確的錯誤訊息和排查建議
• 支援拖放貼上：支援直接貼上 Base64 文字、拖放文字檔案到輸入區域，提升除錯效率
• 編碼問題自動修復：自動處理 Base64 填充字元（=）缺失、空白字元、換行字元等常見格式問題
• 跨瀏覽器相容：支援 Chrome、Firefox、Safari、Edge 等所有現代瀏覽器，使用標準 atob 和 Uint8Array API
• 回應式設計：支援桌面端和行動端使用，在手機和平板上也能正常解碼和預覽短影片
• 隱私安全保障：影片資料完全在本機記憶體中處理，關閉頁面後資料立即清除，不會留下任何快取或記錄

常見問題

故障排查

術語表

Base64

一種基於64個可列印字元表示二進位資料的編碼方式，每3位元組二進位資料編碼為4位元組ASCII文字，體積增大約33%，常用於在文字協定中傳輸二進位資料。

Data URL

RFC 2397定義的URI方案，格式為data:[mediatype][;base64],data，允許將小檔案直接嵌入文件中，無需額外HTTP請求。

MIME 類型

媒體類型標識，用於表示文件或檔案的格式，影片格式以video/開頭，如video/mp4、video/webm、video/ogg，瀏覽器根據MIME類型決定如何處理資源。

Blob

Binary Large Object（二進位大型物件），瀏覽器中表示不可變的原始二進位資料的物件，可用於儲存影片、圖片等檔案資料，透過URL.createObjectURL()生成可存取URL。

atob()

瀏覽器內建函式，用於將Base64編碼的字串解碼為二進位字串（ASCII to Binary），對應編碼函式是btoa()（Binary to ASCII）。

btoa()

瀏覽器內建函式，用於將二進位字串編碼為Base64字串（Binary to ASCII），是atob()的反向操作，影片轉Base64時使用。

Uint8Array

JavaScript型別陣列，儲存8位元無符號整數（0-255），每個元素對應一個位元組，是處理二進位資料的標準方式，Base64解碼後需要轉為Uint8Array再建立Blob。

MP4

MPEG-4 Part 14，一種常用的多媒體容器格式，通常封裝H.264影片編碼和AAC音訊編碼，Web相容性最好，檔案副檔名為.mp4。

WebM

Google推出的開放原始碼免版稅影片容器格式，通常使用VP8/VP9/AV1影片編碼和Vorbis/Opus音訊編碼，壓縮率優於MP4，Chrome/Firefox/Edge支援良好。

OGG

Xiph基金會開發的開放原始碼多媒體容器格式，影片通常用Theora編碼、音訊用Vorbis編碼，現在逐漸被WebM取代，檔案副檔名為.ogv。

H.264/AVC

目前使用最廣泛的影片編碼標準，也叫AVC（Advanced Video Coding），壓縮率和品質平衡好，有硬體加速支援，MP4容器的標準影片編碼，所有瀏覽器相容。

AAC

Advanced Audio Coding，高級音訊編碼，MP4容器的標準音訊編碼，是MP3格式的繼任者，同品質下檔案更小，所有現代瀏覽器支援。

Object URL

透過URL.createObjectURL(blob)建立的臨時URL，格式為blob://...，可直接用於video/img等標籤的src屬性，指向記憶體中的Blob資料，用完需revokeObjectURL釋放。

FFmpeg

開放原始碼的音影片處理工具，可用於影片轉檔、剪輯、檢視編碼資訊、壓縮等操作，是處理影片的業界標準工具，驗證和轉換影片編碼必備。

moov atom

MP4檔案中的中繼資料原子，包含影片時長、解析度、編碼資訊、解碼參數等關鍵資料。moov在檔案開頭才能快速播放，Web影片建議放在開頭（faststart）。

容器格式

封裝影片串流、音訊串流、字幕、中繼資料的檔案格式，如MP4、WebM、OGG、MKV，容器格式不等於編碼格式，同一個容器可以封裝不同編碼。

影片編碼

壓縮和解壓影片資料的演算法，常見的有H.264、H.265(HEVC)、VP8、VP9、AV1，編碼決定了壓縮率和畫質，瀏覽器支援的編碼決定影片能否播放。

API 除錯

在開發前後端介面時驗證資料正確性的過程，本工具可用於快速預覽API回傳的Base64影片資料是否正確，無需編寫前端解碼程式碼。

Chrome DevTools

Chrome瀏覽器內建的開發者工具，Network面板可檢視API請求和回應，可從中複製Base64影片資料用於除錯。

填充字元 =

Base64編碼末尾可能出現1個或2個等號，用於將編碼結果長度填充為4的倍數，解碼時缺失填充可能導致錯誤，工具可自動修復填充問題。

Web影片MIME類型與相容性對照表

Base64影片解碼常見錯誤碼與解決方案

原始影片大小與Base64編碼後大小對比表