Base64 to Video
Base64 Input
Base64 Input
Video Preview
Decode Base64-encoded video data into playable MP4/WebM/OGG files directly in your browser. Automatically detects Data URL prefixes, processes everything locally with no server upload, making it ideal for API debugging, video encoding validation, and frontend inline video restoration. Preview and download decoded videos instantly.
Related
Use Cases
- Backend video API debugging: Paste Base64 video data returned from APIs directly into the tool to quickly preview and verify responses without writing frontend decoding code
- Video encoding output verification: After generating Base64 videos via FFmpeg or cloud transcoding services, decode and play to verify transcoding results and diagnose encoding corruption
- Frontend inline video restoration: Extract Data URL inline videos (data:video/mp4;base64,...) embedded in HTML, CSS, or JavaScript and restore them to viewable video files
- Quick video data validation: Compare two Base64 videos to confirm they decode to identical content, or verify data integrity during Base64 transmission
- Short video temporary preview: Preview short video clips directly in the tool without saving them locally, then decide whether to download after confirming content
- Web scraping data parsing: Quickly restore Base64-encoded video data captured by web scrapers into playable files for content review or analysis
- Client development debugging: When backend APIs return Base64 videos during mobile app or mini-program development, verify data correctness before implementing client-side decoding
- Teaching and demonstrations: Use as an online demo tool when explaining Base64 encoding principles, Data URL technology, or frontend Blob/URL.createObjectURL usage
- Email attachment preview: Some email systems embed attachments as Base64; extract and quickly restore video content for viewing
- Bug reproduction assistance: When QA teams report video-related bugs with Base64 data, developers can quickly restore the video to reproduce issue scenarios
How to Use
- Obtain Base64 video data: Copy the Base64-encoded video string from API responses, logs, HTML source, or databases, with or without the Data URL prefix
- Paste into input area: Paste the complete Base64 text into the tool's input field; the tool automatically detects whether the data:video/...;base64, prefix is present
- Confirm or select format: If Data URL prefix is present, MIME type is detected automatically; for raw Base64, manually select the corresponding video format (MP4/WebM/OGG)
- Click decode button: After clicking decode, the tool executes Base64 decoding, Uint8Array conversion, and Blob creation locally in the browser with status indicators during processing
- Review video information: After decoding completes, review basic video information including file size, MIME type, and format confirmation to verify successful decoding
- Preview video playback: Use the built-in HTML5 player to preview the video; drag the progress bar to verify content completeness and confirm audio/video works correctly
- Download video file: After confirming the video is correct, click the download button to save the Blob video locally; the correct file extension (.mp4/.webm/.ogg) is applied automatically
Features
- Smart input detection: Automatically identifies raw Base64 strings and full Data URL formats (data:video/...;base64, prefix), no manual prefix removal needed
- Multi-format support: Full support for MP4 (video/mp4), WebM (video/webm), OGG (video/ogg) and other natively supported video MIME types in modern browsers
- Client-side processing: All Base64 decoding, Blob generation, and video preview happen entirely in your browser via JavaScript with zero server upload
- Instant preview playback: Automatically generates an HTML5 video player after decoding with full controls for play/pause, seek, volume, and fullscreen
- Original file download: Save decoded videos to your local drive with one click; file extensions (.mp4/.webm/.ogg) are automatically selected based on MIME type
- Auto MIME detection: Extracts video format from Data URL prefixes automatically; manual format selection is available for raw Base64 input
- Real-time progress feedback: Shows processing status during large Base64 data decoding so users know the page is still responsive
- Video metadata display: Shows decoded video size, MIME type, duration (when playable), resolution, and other basic information
- Error diagnostics: Provides clear error messages and troubleshooting suggestions for invalid input, corrupted Base64, or unsupported video formats
- Drag and paste support: Paste Base64 text directly or drag text files into the input area for faster debugging workflows
- Auto-fix encoding issues: Handles missing padding characters (=), whitespace, newlines, and other common formatting problems automatically
- Cross-browser compatibility: Works on Chrome, Firefox, Safari, Edge, and all modern browsers using standard atob and Uint8Array APIs
- Responsive design: Fully functional on desktop and mobile devices; decode and preview short videos on phones and tablets
- Privacy-first: Video data is processed entirely in browser memory; closing the page immediately clears all data with no cached records
FAQ
Which video formats does the Base64 to Video tool support?
It supports mainstream video formats natively playable in browsers: MP4 (video/mp4, H.264+AAC encoding), WebM (video/webm, VP8/VP9+Vorbis/Opus encoding), and OGG (video/ogg, Theora+Vorbis encoding). MP4 offers the best compatibility across all modern browsers and mobile devices and is recommended as the primary choice. If your video is in another format (e.g., MOV, AVI, MKV), first transcode to MP4 (H.264+AAC) using FFmpeg before Base64 encoding.
Does input need the data:video/mp4;base64 prefix?
No. The tool supports two input formats: ① Raw Base64 strings (without any prefix); ② Complete Data URLs (with data:video/xxx;base64, prefix). The tool automatically detects whether the prefix is present; if present, it extracts the Base64 content and identifies the MIME type automatically. It's recommended to directly copy the complete content returned by APIs without manually processing prefixes.
Can decoded videos be played directly in the browser?
Yes. After decoding completes, the tool generates a built-in HTML5 video player with full features including play/pause, progress bar seeking, volume control, and fullscreen playback. You can preview video content directly on the page to confirm both video and audio work correctly before deciding whether to download locally.
Are large Base64 videos supported? Is there a size limit?
The tool itself has no strict size limit, but browsers have memory and performance constraints. Base64 encoding increases video size by approximately 33%, and during decoding browsers must allocate memory to store Base64 strings, binary strings, Uint8Arrays, Blobs, and other copies—peak memory usage can be 3-5 times the original video size. Processing Base64 within 5MB (corresponding to ~3.7MB original video) is relatively smooth; Base64 over 10MB may cause page jank. Large videos are not recommended for Base64 approaches; traditional file upload and URL loading are preferred.
Is video data uploaded to servers? Is it private and secure?
All decoding operations complete entirely locally in your browser via JavaScript; video data is never uploaded to any server, and no network requests are sent. After closing the page, video data is immediately cleared from browser memory without leaving any cached records. You can disconnect from the network while using this tool—the decoding functionality continues working normally.
Why is Base64-encoded video 1/3 larger than the original file?
This is determined by Base64's encoding principle—it's not an issue with the tool. Base64 re-encodes every 3 bytes (24 bits) of binary data into 4 ASCII characters (each occupying 1 byte), so encoded size is 4/3 ≈ 133% of original, approximately 33% increase. If original data length is not a multiple of 3, = padding characters are added at the end, resulting in an actual size increase of approximately 33%-37%. This size increase is universal to all Base64 encoding, not specific to this tool.
Why won't my MP4 Base64 decode and play?
MP4 is only a container format—the video codecs inside must be browser-supported for playback. 99% of the time, the video codec is not H.264, or the audio codec is not AAC. For example, MP4 files encapsulating H.265 (HEVC) or AV1 codecs may not play in browsers. You can check codec information using the FFmpeg command ffmpeg -i input.mp4; if not H.264+AAC, transcode with ffmpeg -i input.mp4 -c:v libx264 -c:a aac -movflags +faststart output.mp4 before encoding as Base64. Also confirm MIME type is set to video/mp4 and Base64 data is complete without truncation.
How do I verify my video encoding is browser-compatible?
FFmpeg is recommended for verification: After installing FFmpeg, run ffmpeg -i yourvideo.mp4 and review the Video and Audio lines in the output. The Video line should contain h264 (or avc), and the Audio line should contain aac. For example: Stream #0:0(eng): Video: h264 (avc1/0x31637661...), Stream #0:1(eng): Audio: aac (mp4a/0x6134706D...). If these two codecs are not present, transcoding is required. Alternatively, drag the original video file directly into a Chrome browser window—if it plays directly, the encoding is browser-compatible.
What file extension do downloaded decoded videos have?
The tool automatically matches the correct file extension based on your selected (or auto-detected) MIME type: video/mp4 corresponds to .mp4, video/webm corresponds to .webm, video/ogg corresponds to .ogv. You don't need to manually modify the extension; downloaded files open directly with the system's default player.
Do newlines and spaces in Base64 strings affect decoding?
No. The tool automatically handles newline characters (\n), carriage returns (\r), spaces, tabs, and other whitespace in Base64 strings by removing them before decoding. So even if your Base64 is in multi-line format (e.g., MIME format wrapping every 76 characters), or formatting spaces were introduced during copying, decoding works normally.
How to implement Base64 to video in JavaScript on the frontend?
The core code logic is as follows: ① Strip Data URL prefix to obtain raw Base64; ② Decode to binary string with atob(base64Str); ③ Convert binary string to Uint8Array (iterate each character and take charCode); ④ Create Blob with new Blob([uint8Array], {type: 'video/mp4'}); ⑤ Generate temporary URL with URL.createObjectURL(blob); ⑥ Set URL to video.src. Remember to call URL.revokeObjectURL(url) after use to release memory and avoid leaks.
What's the difference between Data URL videos and Blob URL videos?
Data URLs embed the complete Base64 data directly in the URL with format data:video/mp4;base64,XXXX—the URL itself contains all data. Blob URLs are temporary references in blob:// format generated by URL.createObjectURL(), pointing to Blob objects in browser memory—the URL itself is short and contains no data. Data URLs require parsing the entire Base64 string each time they're used, with worse performance; Blob URLs are more efficient and suitable for playback and reuse. This tool internally uses Blob URLs to implement the player.
What scenarios are appropriate for Base64-encoded videos? What scenarios are inappropriate?
Appropriate scenarios: ① Short videos within a few MB (loading animations, onboarding tips, icon animations); ② Demos/documentation requiring video embedded in a single HTML file; ③ Small videos embedded in emails; ④ Temporarily passing small videos during API debugging. Inappropriate scenarios: ① Videos over 5MB (33% bloat wastes bandwidth); ② User-uploaded videos (unpredictable size); ③ Long videos requiring streaming or seeking; ④ Videos needing browser cache reuse (Data URLs cannot be cached separately); ⑤ Production user-facing video content (CDN and external file URLs should be used).
Why does a video play normally in Safari but not in Chrome?
This scenario is relatively uncommon and typically occurs because the video codec is H.265 (HEVC)—Safari has good H.265 support on macOS and iOS (with hardware acceleration), but Chrome and Firefox have limited H.265 support (requiring hardware and licensing). The solution is transcoding to H.264, the universal codec supported by all browsers. The reverse—Chrome plays but Safari doesn't—is more common, usually due to encoding Profile/Level being too high or moov atom at the end of the file.
Is quality lost when converting between Base64 video and video files?
No quality is lost. Base64 is an encoding method, not compression or transcoding—it simply performs a one-to-one mapping between binary data and text strings. Converting video to Base64 and decoding back produces binary data identical to the original video file (byte-for-byte identical), with no video or audio quality loss, similar to file copy-paste rather than compression conversion. As long as Base64 encoding and decoding processes are correct, video quality is identical to the original file.
Troubleshooting
Video won't play after Base64 decoding; HTML5 video shows unsupported format or black screen
Incorrect MIME type setting: MP4 video set to video/webm or other mismatched type Video codec not in browser-supported format: e.g., MP4 contains H.265 instead of H.264 Base64 data truncated during copying, missing beginning or end portions causing file corruption Data URL prefix processing error: prefix included in Base64 decoding, or Base64 start characters accidentally removed during prefix stripping Original video itself is corrupted or in a special format unsupported by browsers Video resolution exceeds browser limits, or uses unsupported pixel formats (e.g., 10-bit YUV) Video file header (ftyp atom) is corrupted; browser cannot recognize MP4 container format
atob() function throws InvalidCharacterError, decoding fails
Invalid characters in Base64 string: Base64 standard character set includes only A-Z, a-z, 0-9, +, /, =—65 characters total Data URL prefix data:video/mp4;base64, not removed before passing to atob() String contaminated with newline \n, carriage return \r, spaces, tabs, or other whitespace Copying from Word/web pages introduced Chinese punctuation, full-width characters, or invisible special characters Base64 string was URL-encoded (plus + became %2B, slash / became %2F) requiring URL decoding first Base64 string length not a multiple of 4 with missing padding character = causing atob validation failure Some backend languages (e.g., Java, Python) use URL-safe Base64 variants (- and _ instead of + and /)
Videos play normally in Chrome/Firefox but won't play in Safari
Safari has stricter H.264 encoding Profile and Level requirements; advanced configurations like High Profile Level 5.1 may be unsupported MP4 file's moov atom (metadata) is at the end rather than beginning; Safari must download entirely before playing Audio codec is not AAC; Safari has poor support for other audio formats like MP3 in MP4 containers Video resolution or bitrate too high, exceeding Safari's (especially iOS Safari's) hardware decoding capability Encoding features unsupported by Safari used, such as 10-bit color depth or certain H.264 features iOS Safari requires the playsinline attribute for inline playback; otherwise video goes fullscreen or fails to play Safari has audio track sample rate requirements; non-standard sample rates (non-44.1kHz/48kHz) may cause playback failure
Page jank or browser crashes when decoding large Base64 videos
JavaScript is single-threaded; atob() and Uint8Array conversion execute on the main thread, blocking UI rendering Base64 decoding generates multiple large strings and arrays with high memory usage (10MB Base64 may peak at tens of MB during decoding) Creating Blob and Object URL also requires memory; large videos can trigger browser memory limits Mobile devices have less memory, making OOM (Out of Memory) crashes more likely Web Workers not used; all operations on the main thread block the event loop Browsers impose string length limits (V8 engine ~512MB to 1GB); extremely long Base64 strings may not parse correctly Frequent garbage collection (GC) during decoding also causes page jank and response delays
Base64 copied from API responses decodes to corrupted unplayable video
Backend automatically escaped special characters when returning Base64 (e.g., + converted to space, or JSON escaping issues) JSON parsing didn't correctly handle special characters in Base64 strings Backend Base64 encoding errors, such as treating binary data as UTF-8 strings Data modified during gzip compression or HTTP transmission When copying from Chrome DevTools, the Network panel Response preview may truncate or escape long strings Backend used a different Base64 variant (e.g., URL-safe Base64 with - and _ instead of + and /) that frontend didn't handle API response paginated or truncated; Base64 data incomplete
Video has only video without audio, or audio/video out of sync
Audio codec unsupported by browser: e.g., MP3 or Opus used in MP4 instead of AAC Improper audio parameter settings during video transcoding causing timestamp (PTS/DTS) errors Base64 data incomplete, truncating portion of the audio track Video uses variable frame rate (VFR); some browsers handle VFR videos poorly causing A/V sync issues Original video itself had A/V sync issues not caused by Base64 decoding Audio sample rate or channel count unsupported by browser, causing audio track decoding failure Inconsistent timebases between audio and video tracks in the container causing playback sync offset
Glossary
- Base64
- An encoding scheme that represents binary data using 64 printable characters, encoding every 3 bytes of binary data into 4 bytes of ASCII text with approximately 33% size increase, commonly used for transmitting binary data in text-based protocols.
- Data URL
- A URI scheme defined in RFC 2397 with the format data:[mediatype][;base64],data that allows embedding small files directly in documents without additional HTTP requests.
- MIME type
- A media type identifier used to indicate the format of documents or files. Video formats start with video/, such as video/mp4, video/webm, video/ogg; browsers determine resource handling based on MIME types.
- Blob
- Binary Large Object, a browser object representing immutable raw binary data that can store file data such as video and images; accessible URLs are generated via URL.createObjectURL().
- atob()
- A browser built-in function that decodes Base64-encoded strings to binary strings (ASCII to Binary); the corresponding encoding function is btoa() (Binary to ASCII).
- btoa()
- A browser built-in function that encodes binary strings to Base64 strings (Binary to ASCII), the reverse operation of atob(), used when converting videos to Base64.
- Uint8Array
- A JavaScript typed array storing 8-bit unsigned integers (0-255), where each element corresponds to one byte—this is the standard way to handle binary data; Base64-decoded data must be converted to Uint8Array before creating a Blob.
- MP4
- MPEG-4 Part 14, a commonly used multimedia container format typically encapsulating H.264 video codec and AAC audio codec, offering the best Web compatibility with .mp4 file extension.
- WebM
- An open, patent-unencumbered video container format introduced by Google, typically using VP8/VP9/AV1 video codecs and Vorbis/Opus audio codecs with better compression than MP4; well-supported in Chrome/Firefox/Edge.
- OGG
- An open-source multimedia container format developed by the Xiph Foundation; videos typically use Theora encoding and audio uses Vorbis encoding. Usage is declining in favor of WebM; file extension is .ogv.
- H.264/AVC
- The most widely used video coding standard today, also known as AVC (Advanced Video Coding), offering excellent compression-to-quality balance with hardware acceleration support. It is the standard video codec for MP4 containers, compatible with all browsers.
- AAC
- Advanced Audio Coding, the standard audio codec for MP4 containers and successor to MP3, producing smaller files at equivalent quality with support in all modern browsers.
- Object URL
- A temporary URL created via URL.createObjectURL(blob) in blob://... format that can be used directly as the src attribute of video/img tags, pointing to Blob data in memory; requires revokeObjectURL to release after use.
- FFmpeg
- An open-source audio/video processing tool used for video transcoding, editing, viewing codec information, and compression—an industry-standard tool essential for verifying and converting video codecs.
- moov atom
- A metadata atom in MP4 files containing critical data such as video duration, resolution, encoding information, and decoding parameters. moov must be at the beginning of the file for fast playback; Web videos should use faststart placement.
- container format
- A file format encapsulating video streams, audio streams, subtitles, and metadata, such as MP4, WebM, OGG, MKV. Container formats are not equivalent to codecs—the same container can encapsulate different codecs.
- video codec
- An algorithm for compressing and decompressing video data; common ones include H.264, H.265 (HEVC), VP8, VP9, and AV1. Codecs determine compression ratio and quality; browser codec support determines whether videos can play.
- API debugging
- The process of verifying data correctness during frontend-backend API development; this tool enables quick preview of Base64 video data returned by APIs without writing frontend decoding code.
- Chrome DevTools
- Chrome's built-in developer tools; the Network panel shows API requests and responses where Base64 video data can be copied for debugging.
- padding character =
- One or two equal signs that may appear at the end of Base64 encoding to pad the encoded result length to a multiple of 4; missing padding during decoding may cause errors. This tool automatically fixes padding issues.
Web Video MIME Type and Compatibility Reference Table
| MIME Type | Container Format | Common Video Codecs | Common Audio Codecs | Browser Compatibility | File Extensions |
|---|---|---|---|---|---|
| video/mp4 | MP4 (MPEG-4 Part 14) | H.264/AVC, H.265/HEVC, AV1 | AAC, MP3 | All modern browsers (Chrome/Firefox/Safari/Edge/iOS/Android); H.264+AAC combination is 100% compatible | .mp4, .m4v |
| video/webm | WebM | VP8, VP9, AV1 | Vorbis, Opus | Full support in Chrome/Firefox/Edge/Opera; Safari 14.1+ support; iOS Safari 15+ partial support | .webm |
| video/ogg | Ogg | Theora | Vorbis | Firefox/older Chrome/Opera support; no Safari support; declining usage | .ogv, .ogg |
| video/quicktime | QuickTime (MOV) | ProRes, H.264 | AAC, PCM | Primarily Safari/macOS support; poor compatibility with other browsers | .mov |
| video/x-matroska | Matroska | H.264, VP9, AV1, etc. | Various codecs | Poor native browser support; usually requires third-party players; not recommended for Web use | .mkv |
Common Base64 Video Decoding Error Codes and Solutions
| Error Symptom/Message | Possible Causes | Troubleshooting Direction | Solution |
|---|---|---|---|
| atob() error: InvalidCharacterError or "not correctly encoded" | Base64 string contains invalid characters; Data URL prefix not removed; whitespace/newlines present | Check if input contains only A-Za-z0-9+/=; confirm data: prefix is removed | Strip data:video/...;base64, prefix; remove all newlines, spaces, tabs; check for Chinese or special character contamination |
| Decoding succeeds but video won't play showing "unsupported video format" | Incorrect MIME type; video codec unsupported by browser; file header corruption | Confirm MIME type matches actual video format; use FFmpeg to check codec info | Select correct MIME type (video/mp4 for MP4); transcode to H.264+AAC (MP4) with FFmpeg; verify Base64 beginning/end is complete |
| Video has video but no audio, or audio but no video | Either audio or video codec is unsupported by the browser; audio or video track corruption | Use FFmpeg to check which streams the video contains and their codecs | MP4 must be H.264 video+AAC audio; WebM uses VP8/VP9+Vorbis/Opus; re-transcode to standard compatible format |
| Video shows artifacts, green screen, or pixelation | Incomplete Base64 data (truncated); data corruption during decoding; keyframe loss | Compare original Base64 length, verify complete copy | Re-copy the complete Base64 string; check for character loss during transmission; verify original video file itself is intact |
| Decoded video size doesn't match original file | Base64 padding character = handling errors; encoding issues when converting binary string to Uint8Array | Check if decoding logic handles padding correctly; confirm charCodeAt range is 0-255 | Ensure trailing = in Base64 is handled correctly; verify Uint8Array conversion logic is correct |
| Page unresponsive during large video decoding | Base64 decoding executes on main thread blocking UI; video too large exceeding memory limits | Check Base64 data size; Base64 over 10MB (~7.5MB original video) may cause jank | Large videos not recommended for Base64; consider Web Worker background decoding; chunked processing; switch to file upload approach |
| Safari decodes but can't play; Chrome works | Safari has stricter video codec requirements; moov atom not at file start; encoding Profile/Level too high | Use FFmpeg to check H.264 Profile and Level; check moov position | Add -movflags +faststart during transcoding; use H.264 Baseline/Main Profile with Level not exceeding 4.1; confirm AAC audio |
| Data URL set directly to video src won't play | Data URL format error; MIME type typo; Base64 portion corrupted | Check Data URL format is data:video/xxx;base64,xxxx | Confirm MIME type is correct; comma is an ASCII comma; Base64 portion is complete; some mobile platforms limit Data URL size |
Original Video Size vs Base64 Encoded Size Comparison Table
| Original Video Size | Base64 Encoded Size (approx.) | Size Increase | Data URL Header Overhead | Suitable for Inline Use | Typical Scenario |
|---|---|---|---|---|---|
| 100 KB | ~133 KB | +33% | ~20 bytes | Recommended | Tiny icon animations, a few seconds of silent loading animations |
| 500 KB | ~667 KB | +33% | ~20 bytes | Recommended | Short looping animations, tooltip short videos, button feedback animations |
| 1 MB | ~1.33 MB | +33% | ~20 bytes | Depends | 5-10 second onboarding videos, low-resolution demo animations; watch first-screen performance |
| 2 MB | ~2.67 MB | +33% | ~20 bytes | Not recommended | Approaching inline video size limit; significantly increases page load time |
| 5 MB | ~6.67 MB | +33% | ~20 bytes | Not recommended | Too large; not recommended for Base64 inline; use external video files instead |
| 10 MB | ~13.3 MB | +33% | ~20 bytes | Prohibited | Severely impacts page loading; may cause mobile out-of-memory crashes |
| 50 MB | ~66.7 MB | +33% | ~20 bytes | Prohibited | Absolutely never use Base64 for videos this large; file upload/loading approaches are mandatory |
- Secure String Comparison
- Binary Converter
- Caesar Cipher
- Morse Code Translator
- Hex Converter
- Video to Base64
- Base64 to Video
- Image to Base64
- Base64 to Image
- Text to Base64
- Base64 to Text
- File Hash Checker
- File to Base64
- Base64 to File
- Audio to Base64
- Base64 to Audio
- AES Encrypt / Decrypt
- DES Encrypt Decrypt
- Base32 Encoder Decoder
- Base58 Encode Decode
- Base64 Encode
- Base64 Decode
- Base64 Diff Checker
- Base64 Split
- Base64 Multi-line Merge
- Base64 Formatter
- Base64 Validation
- Base64 Batch Encode
- Base64 Batch Decoder
- Base64 Cleaner
- Base64 Padding Tool
- Base64 Length Statistics
- Base64 to HEX
- Base64 DataURL Converter
- Base64-Hex Converter
- Base85 Encoder
- HMAC Generator & Verifier
- PBKDF2 Key Derivation
- MD5 Hash
- SHA-256 Hash
- SHA1 Hash
- SHA512 Hash
- JWT Decode, Verify & Generate
- HTML Encode Decode
- Unicode Escape
- URL Encode
- URL Safe Base64
- MIME Base64
- Java Obfuscator
- JS Obfuscator
- PHP Obfuscator
- Python Obfuscator