Output Formats
Hypervideo supports multiple transparent video formats. Each has different trade-offs for file size, browser support, and quality.
Format Comparison
| Format | Codec | File Size | Browser Support | Processing | Best For |
|---|---|---|---|---|---|
| WebP | WebP + alpha | Small (~1.5MB/6s) | All browsers | AI | Smallest files, works everywhere |
| APNG | Animated PNG | Medium (~3-5MB/6s) | All browsers (iOS 8+) | AI | iOS Safari, <img> tag usage |
| Stacked-Alpha | H.264 / AV1 | Medium (~5-10MB/6s) | All via WebGL | AI | Cross-platform with player SDK |
| WebM | VP9 | Small (~1.5MB/6s) | Chrome, Firefox, Edge | Chromakey | Fast processing, Chrome-first |
| MOV | ProRes 4444 | Large (~60MB/6s) | Safari, video editors | Chromakey | Professional editing, Safari fallback |
Recommendations
Web (general)
Use webp for the smallest files with universal browser support.
curl -F "format=webp" -F "quality=40" ...iOS / Safari
Use apng for native <img> tag support on iOS Safari. Works without JavaScript or WebGL. Limited to 15fps and 640px max width.
curl -F "format=apng" ...Cross-platform with SDK Players
Use stacked-alpha with the React, Expo, or Swift player. Standard H.264 video works on every platform; the player SDK handles compositing.
curl -F "format=stacked-alpha" ...Fast Processing (Green Screen)
Use webm or mov for chromakey-based processing (~10s vs 60s).
curl -F "format=webm" -F 'chromaKey={"r":0,"g":255,"b":0}' ...Multiple Formats
Request multiple formats in one call:
curl -F 'formats=["webp","stacked-alpha"]' ...How Stacked-Alpha Works
The stacked-alpha format encodes both color and transparency in a single standard video file:
- Top half: RGB color frames
- Bottom half: Grayscale alpha mask
A WebGL shader (or Metal on iOS) composites both halves in real-time for transparent playback. This allows transparent video on platforms that don't natively support it (Safari, iOS, Android).
APNG Constraints
- Max 15 fps (lower frame rate for smaller files)
- Max 640px width (auto-scaled)
- Encoded with apngasm for optimal compression
- Quality parameter affects quantization (lower = smaller but more dithering)