WebM: el formato de vídeo abierto para la web — guía completa
WebM es un formato de vídeo diseñado específicamente para la web por Google, publicado en 2010 como alternativa libre de royalties a los formatos patentados como H.264. Es el formato de vídeo nativo de Chrome y Firefox.
Qué es WebM
WebM es un contenedor de vídeo basado en Matroska (MKV) que puede contener:
- Vídeo: VP8, VP9 o AV1
- Audio: Vorbis u Opus
- Subtítulos: WebVTT
A diferencia de MP4 (que puede contener H.264, H.265, AV1…), WebM está diseñado para un conjunto específico de códecs abiertos.
WebM vs MP4: diferencias clave
| Aspecto | WebM | MP4 |
|---|---|---|
| Contenedor | MKV-based | ISOBMFF |
| Códecs de vídeo | VP8, VP9, AV1 | H.264, H.265, AV1, MPEG-4 |
| Códecs de audio | Vorbis, Opus | AAC, MP3, AC-3, Opus |
| Licencias | Libre de royalties | Algunas patentadas (H.264) |
| Soporte en navegadores | Chrome, Firefox, Edge, Opera | Universal (incluye Safari) |
| Safari / iOS | ❌ (sin soporte nativo) | ✅ |
| Streaming adaptativo | DASH | HLS + DASH |
| Transparencia (alpha) | VP9 con alpha | Limitado |
Compatibilidad con navegadores (2024)
| Navegador | VP8/WebM | VP9/WebM | AV1/WebM |
|---|---|---|---|
| Chrome 90+ | ✅ | ✅ | ✅ |
| Firefox 90+ | ✅ | ✅ | ✅ |
| Edge (Chromium) | ✅ | ✅ | ✅ |
| Safari (macOS/iOS) | ❌ | ❌ (parcial desde Safari 16.4) | ❌ |
| Opera | ✅ | ✅ | ✅ |
| Android WebView | ✅ | ✅ | ✅ |
El gran problema: Safari (iPhone, iPad, macOS) no soporta WebM de forma nativa. Esto significa que para máxima compatibilidad, debes servir MP4 como fallback.
Patrón correcto para vídeo web con WebM
<video controls width="640" height="360">
<!-- WebM primero — Chrome/Firefox lo eligen -->
<source src="video.webm" type="video/webm">
<!-- MP4 como fallback — Safari/IE lo usa -->
<source src="video.mp4" type="video/mp4">
Tu navegador no soporta vídeo HTML5.
</video>
El navegador usa el primer <source> que puede reproducir. Chrome elegirá WebM; Safari elegirá MP4.
Conversión a WebM con FFmpeg
# WebM con VP9 (mejor calidad que VP8)
ffmpeg -i video.mp4 -c:v libvpx-vp9 -crf 30 -b:v 0 -c:a libopus -b:a 128k video.webm
# WebM con VP8 (más compatible, menor calidad)
ffmpeg -i video.mp4 -c:v libvpx -crf 10 -b:v 1M -c:a libvorbis video_vp8.webm
# WebM con AV1 (mejor compresión, encoding muy lento)
ffmpeg -i video.mp4 -c:v libaom-av1 -crf 30 -b:v 0 -c:a libopus -b:a 128k video_av1.webm
# Crear ambos formatos a la vez
ffmpeg -i original.mp4 \
-c:v libvpx-vp9 -crf 30 -b:v 0 -c:a libopus video.webm \
-c:v libx264 -crf 23 -c:a aac video.mp4
VP8, VP9 y AV1: ¿cuál usar?
| Códec | Calidad | Velocidad encoding | Compatibilidad |
|---|---|---|---|
| VP8 | Buena (similar H.264) | Rápida | Chrome, Firefox, Edge |
| VP9 | Muy buena (~30% mejor que VP8) | Lenta | Chrome, Firefox, Edge, Android |
| AV1 | Excelente (~50% mejor que H.264) | Muy lenta | Chrome 70+, Firefox 67+, Android 10+ |
Para la mayoría de casos: VP9 + Opus en WebM es la mejor combinación actualmente.
Cuándo usar WebM
Usa WebM cuando:
- Sirves vídeo en tu propia web y quieres el menor tamaño posible
- Tu audiencia usa mayoritariamente Chrome, Firefox o Android
- Necesitas transparencia (canal alpha) en un vídeo
- Quieres evitar royalties de H.264
Usa MP4 cuando:
- Necesitas compatibilidad con iOS / Safari (sin fallback)
- Distribución en plataformas (YouTube, Vimeo, redes sociales)
- El tiempo de codificación es crítico
WebM para vídeo con fondo transparente
WebM con VP9 soporta canal alpha (transparencia), lo que es útil para:
- Overlays de vídeo sobre fondos
- Animaciones con transparencia (alternativa a GIF pero de alta calidad)
# Crear WebM con canal alpha desde un MOV con transparencia
ffmpeg -i video_transparente.mov -c:v libvpx-vp9 -pix_fmt yuva420p video_alpha.webm
WebM con AV1 también soporta alpha, con mayor compresión pero menor compatibilidad.
Conclusión
WebM es una excelente elección para contenido web moderno si puedes ofrecer un fallback MP4 para Safari. La combinación VP9/Opus en WebM ofrece mejor calidad-tamaño que H.264/AAC en MP4 en la mayoría de casos, con cero coste de licencias.
Conversiones relacionadas
Conversiones de vídeo que encajan con esta guía: