Base64 a Video

Entrada Base64

Vista previa

Convierte en línea datos de vídeo codificados en Base64 a archivos de vídeo reproducibles en formatos MP4/WebM/OGG. Reconoce automáticamente el prefijo Data URL; todas las operaciones se realizan localmente en el navegador, los datos de vídeo no se cargan a servidores. Ideal para depurar API backend, verificar codificación de vídeo, restaurar vídeos en línea en el frontend. Después de la decodificación, puedes previsualizar, reproducir y descargar directamente.

Relacionado

Video a Base64

Manejo de padding Base64

Verificador de hash de archivo

Cifrado y descifrado DES

Compresión JSON

Formateador de SQL

Casos de uso

Depurar API de vídeo backend: cuando la API devuelve datos de vídeo codificados en Base64, pégalos directamente en la herramienta para previsualizar rápidamente y verificar si la respuesta de la interfaz es correcta, sin necesidad de escribir código de decodificación frontend
Verificar salida de codificación de vídeo: después de generar vídeo Base64 con FFmpeg o servicios de transcodificación en la nube, decodifica y reproduce para verificar si el resultado de la transcodificación es normal y diagnosticar problemas de codificación dañada
Restaurar vídeos en línea del frontend: extrae vídeos en línea en formato Data URL (data:video/mp4;base64,...) de HTML, CSS o JavaScript, y restáuralos a archivos de vídeo visibles
Verificación rápida de datos de vídeo: compara si dos vídeos Base64 decodifican el mismo contenido, o verifica si se produjo daño en los datos durante la transmisión Base64
Previsualización temporal de vídeos cortos: para fragmentos de vídeos cortos que no necesitan guardarse localmente, previsualiza y reproduce directamente en la herramienta, y decide si descargarlos después de confirmar el contenido
Análisis de datos de rastreadores web: restaura rápidamente datos de vídeo codificados en Base64 obtenidos por rastreadores web a archivos reproducibles para auditoría o análisis de contenido
Depuración de desarrollo de clientes: durante el desarrollo de aplicaciones móviles o mini programas, cuando el backend devuelve vídeo Base64, utiliza esta herramienta para verificar la corrección de los datos antes de proceder al desarrollo de la decodificación en el cliente
Uso en demostraciones educativas: como herramienta de demostración en línea al explicar los principios de codificación Base64, la tecnología Data URL o el uso de Blob/URL.createObjectURL en el frontend
Previsualización de archivos adjuntos de correo electrónico: algunos sistemas de correo convierten los archivos adjuntos a Base64 para incrustarlos; después de extraerlos, puedes restaurar rápidamente el contenido del vídeo para verlo
Asistencia en reproducción de errores (Bug): cuando el equipo de pruebas reporta errores relacionados con vídeo, proporciona datos Base64 para que los desarrolladores puedan restaurar rápidamente el vídeo y reproducir el escenario del problema

Cómo Usar

Obtener datos de vídeo Base64: copia la cadena de vídeo codificada en Base64 desde respuestas API, registros, código fuente HTML, bases de datos, etc. Se admite con o sin prefijo Data URL
Pegar en el área de entrada: pega completamente el texto Base64 copiado en el cuadro de entrada de la herramienta; la herramienta reconocerá automáticamente si contiene el prefijo data:video/...;base64,
Confirmar o seleccionar el formato: si la entrada tiene prefijo Data URL, la herramienta reconocerá automáticamente el tipo MIME; si es Base64 puro, selecciona manualmente el formato de vídeo correspondiente (MP4/WebM/OGG)
Hacer clic en el botón de decodificación: después de hacer clic en el botón de decodificación, la herramienta ejecuta operaciones de decodificación Base64, conversión Uint8Array, creación de Blob, etc., localmente en el navegador, mostrando indicaciones de estado durante el proceso
Ver información del vídeo: después de completar la decodificación, consulta la información básica del vídeo, incluyendo tamaño de archivo, tipo MIME, confirmación de formato, etc., para verificar si la decodificación fue exitosa
Previsualizar y reproducir el vídeo: utiliza el reproductor HTML5 integrado en la página para previsualizar el vídeo; arrastra la barra de progreso para comprobar si el contenido del vídeo está completo y si la imagen y el sonido son normales
Descargar el archivo de vídeo: después de confirmar que el vídeo es correcto, haz clic en el botón de descarga para guardar el vídeo Blob localmente; el archivo coincidirá automáticamente con la extensión correcta (.mp4/.webm/.ogg)

Características

Reconocimiento inteligente del formato de entrada: detecta automáticamente cadenas Base64 puras y el formato Data URL completo (con prefijo data:video/...;base64,), no necesitas eliminar el prefijo manualmente para decodificar
Soporte para múltiples formatos de vídeo: soporta completamente tipos MIME de vídeo compatibles nativamente con los navegadores modernos, incluyendo MP4 (video/mp4), WebM (video/webm), OGG (video/ogg)
Procesamiento local en el navegador: todas las operaciones de decodificación Base64, generación de Blob y previsualización de vídeo se realizan en tu navegador mediante JavaScript; los datos de vídeo no se cargan a ningún servidor
Previsualización y reproducción instantánea: después de la decodificación, se genera automáticamente un reproductor de vídeo HTML5 con controles completos: reproducción, pausa, arrastre de progreso, ajuste de volumen, pantalla completa, etc.
Descarga de archivo original: guarda el vídeo decodificado como archivo local con un solo clic; selecciona automáticamente la extensión de archivo correcta (.mp4/.webm/.ogg) según el tipo MIME
Detección automática de tipo MIME: reconoce automáticamente el formato de vídeo desde el prefijo Data URL, sin necesidad de que el usuario lo seleccione manualmente; para entradas Base64 puras, se admite la selección manual del formato
Retroalimentación de progreso de decodificación en tiempo real: muestra el estado de procesamiento al decodificar datos Base64 de gran tamaño, evitando que el usuario piense que la página se ha bloqueado
Visualización de metadatos del vídeo: después de la decodificación, muestra información básica como tamaño del vídeo, tipo MIME, duración (cuando se puede reproducir), resolución, etc.
Sugerencias de diagnóstico de errores: proporciona mensajes de error claros y sugerencias de resolución cuando el formato de entrada es incorrecto, la codificación Base64 está dañada o el formato de vídeo no es compatible
Soporte para arrastrar, soltar y pegar: admite pegar directamente texto Base64 o arrastrar archivos de texto al área de entrada, mejorando la eficiencia de depuración
Reparación automática de problemas de codificación: maneja automáticamente problemas comunes de formato como caracteres de relleno (=) faltantes en Base64, caracteres en blanco, saltos de línea, etc.
Compatibilidad con navegadores cruzados: soporta todos los navegadores modernos como Chrome, Firefox, Safari, Edge, utilizando las API estándar atob y Uint8Array
Diseño responsivo: se puede usar tanto en escritorio como en dispositivos móviles; decodifica y previsualiza vídeos cortos correctamente en teléfonos y tabletas
Garantía de privacidad y seguridad: los datos de vídeo se procesan completamente en la memoria local; al cerrar la página, los datos se eliminan inmediatamente, sin dejar caché ni registros

Preguntas Frecuentes

¿Qué formatos de vídeo admite la herramienta Base64 a vídeo?

Admite los principales formatos de vídeo reproducibles nativamente por los navegadores: MP4 (video/mp4, codificación H.264+AAC), WebM (video/webm, codificación VP8/VP9+Vorbis/Opus), OGG (video/ogg, codificación Theora+Vorbis). Entre ellos, el formato MP4 tiene la mejor compatibilidad, compatible con todos los navegadores modernos y dispositivos móviles; se recomienda usarlo prioritariamente. Si tu vídeo está en otros formatos (como MOV, AVI, MKV), primero necesitas transcodificarlo a MP4(H.264+AAC) con FFmpeg antes de realizar la codificación Base64.

¿La entrada necesita tener el prefijo data:video/mp4;base64?

No es necesario. La herramienta admite dos formatos de entrada: ① cadena Base64 pura (sin ningún prefijo); ② Data URL completo (con prefijo data:video/xxx;base64,). La herramienta detectará automáticamente si la entrada contiene el prefijo; si es así, extraerá automáticamente el contenido Base64 y reconocerá el tipo MIME. Se recomienda copiar directamente el contenido completo devuelto por la API, sin necesidad de procesar el prefijo manualmente.

¿El vídeo decodificado se puede reproducir directamente en el navegador?

Sí. Después de completar la decodificación, la herramienta generará un reproductor de vídeo HTML5 integrado con funciones completas: reproducción/pausa, arrastre de barra de progreso, ajuste de volumen, reproducción en pantalla completa, etc. Puedes previsualizar directamente el contenido del vídeo en la página y decidir si descargarlo localmente después de confirmar que la imagen y el sonido son normales.

¿Se admiten vídeos Base64 de gran tamaño? ¿Hay límite de tamaño?

La herramienta en sí no tiene límites de tamaño estrictos, pero los navegadores tienen límites de memoria y rendimiento. La codificación Base64 aumenta el volumen del vídeo en aproximadamente un 33%; durante la decodificación, el navegador necesita asignar memoria para almacenar múltiples copias: cadena Base64, cadena binaria, Uint8Array, Blob, etc.; la memoria máxima puede ser de 3 a 5 veces el tamaño del vídeo original. Se recomienda procesar Base64 de hasta 5MB (correspondiente a unos 3.7MB de vídeo original) para un funcionamiento fluido; Base64 de más de 10MB puede causar bloqueos de página. Para vídeos grandes, no se recomienda usar el método Base64; se recomiendan métodos tradicionales de carga de archivos y carga mediante URL.

¿Los datos de vídeo se cargarán en el servidor? ¿Es seguro para la privacidad?

Todas las operaciones de decodificación se realizan completamente en tu navegador local mediante JavaScript; los datos de vídeo no se cargan a ningún servidor ni se envían solicitudes de red. Al cerrar la página, los datos de vídeo se eliminan inmediatamente de la memoria del navegador, sin dejar caché ni registros. Puedes desconectar la red y usar esta herramienta; la función de decodificación seguirá funcionando normalmente.

¿Por qué el vídeo codificado en Base64 es 1/3 más grande que el archivo original?

Esto está determinado por el principio de codificación Base64, no es un problema de la herramienta. Base64 vuelve a codificar cada 3 bytes (24 bits) de datos binarios en 4 caracteres ASCII (cada carácter ocupa 1 byte), por lo que el volumen después de la codificación es 4/3 ≈ 133% del original, es decir, un aumento de aproximadamente 33%. Si la longitud de los datos originales no es un múltiplo de 3, se rellenará con signos = al final; el aumento real de volumen es de aproximadamente 33%-37%. Este aumento de volumen es común a todas las codificaciones Base64, no es un problema de esta herramienta.

¿Por qué mi MP4 Base64 no se reproduce después de decodificar?

MP4 es solo un formato contenedor; la codificación de vídeo en su interior debe ser un formato compatible con el navegador para poder reproducirse. El 99% de los casos se deben a que la codificación de vídeo no es H.264, o la codificación de audio no es AAC. Por ejemplo, si el MP4 contiene codificaciones como H.265(HEVC), AV1, etc., es posible que el navegador no pueda reproducirlo. Puedes usar el comando FFmpeg ffmpeg -i input.mp4 para ver la información de codificación; si no es H.264+AAC, usa el comando ffmpeg -i input.mp4 -c:v libx264 -c:a aac -movflags +faststart output.mp4 para transcodificar y luego codificar en Base64. Además, confirma que el tipo MIME esté configurado como video/mp4 y que los datos Base64 estén completos sin truncamiento.

¿Cómo verificar que la codificación de mi vídeo es compatible con el navegador?

Se recomienda usar la herramienta FFmpeg para verificar: después de instalar FFmpeg, ejecuta ffmpeg -i yourvideo.mp4 y consulta las líneas Video y Audio en la información de salida. La línea Video debe contener h264 (o avc), y la línea Audio debe contener aac. Por ejemplo: Stream #0:0(eng): Video: h264 (avc1/0x31637661...), Stream #0:1(eng): Audio: aac (mp4a/0x6134706D...). Si no son estas dos codificaciones, necesitas transcodificar. También puedes arrastrar directamente el archivo de vídeo original a la ventana del navegador Chrome; si se reproduce directamente, significa que la codificación es compatible con el navegador.

¿Cuál es la extensión del archivo de vídeo descargado después de la decodificación?

La herramienta seleccionará automáticamente la extensión de archivo correcta según el tipo MIME que hayas elegido (o reconocido automáticamente): video/mp4 corresponde a .mp4, video/webm corresponde a .webm, video/ogg corresponde a .ogv. No necesitas modificar la extensión manualmente; el archivo descargado se puede abrir directamente con el reproductor predeterminado del sistema.

¿Los saltos de línea y espacios en la cadena Base64 afectan la decodificación?

No afectan. La herramienta procesará automáticamente los caracteres en blanco como saltos de línea (\n), retornos de carro (\r), espacios, tabulaciones, etc., en la cadena Base64; estos caracteres se eliminarán antes de la decodificación. Por lo tanto, incluso si tu Base64 tiene formato de varias líneas (como el formato MIME con saltos de línea cada 76 caracteres), o si se introdujeron espacios de formato al copiar, se puede decodificar normalmente.

¿Cómo implementar Base64 a vídeo con JavaScript en el frontend?

La lógica central del código es la siguiente: ① elimina el prefijo Data URL para obtener Base64 puro; ② decodifica a cadena binaria con atob(base64Str); ③ convierte la cadena binaria a Uint8Array (recorre cada carácter para obtener charCode); ④ crea Blob con new Blob([uint8Array], {type: 'video/mp4'}); ⑤ genera URL temporal con URL.createObjectURL(blob); ⑥ establece la URL en video.src. Nota: después de usarla, llama a URL.revokeObjectURL(url) para liberar memoria y evitar fugas de memoria.

¿Cuál es la diferencia entre Data URL vídeo y Blob URL vídeo?

Data URL escribe todos los datos Base64 directamente en la URL, con formato data:video/mp4;base64,XXXX; la URL en sí contiene todos los datos; Blob URL es una referencia temporal en formato blob:// generada por URL.createObjectURL(), que apunta al objeto Blob en la memoria del navegador; la URL en sí es corta y no contiene datos. Data URL necesita analizar toda la cadena Base64 cada vez que se usa, con peor rendimiento; Blob URL es más eficiente, adecuado para reproducción y reutilización. Esta herramienta utiliza internamente el método Blob URL para implementar el reproductor.

¿Qué escenarios son adecuados para codificar vídeo con Base64? ¿Qué escenarios no lo son?

Escenarios adecuados: ① vídeos cortos de unos pocos MB (animaciones de carga, sugerencias de guía, animaciones de iconos); ② Demos/documentos que necesitan incrustar vídeo en un solo archivo HTML; ③ vídeos pequeños incrustados en correos electrónicos; ④ transferencia temporal de vídeos pequeños durante la depuración de API. Escenarios no adecuados: ① vídeos de más de 5MB (el aumento de volumen del 33% desperdicia demasiado ancho de banda); ② vídeos subidos por usuarios (volumen incontrolable); ③ vídeos largos que necesitan carga en streaming o arrastre de progreso; ④ vídeos que necesitan ser almacenados en caché y reutilizados por el navegador (Data URL no se puede almacenar en caché por separado); ⑤ contenido de vídeo orientado al usuario en entornos de producción (debe usarse CDN y URL de archivos externos).

¿Por qué el vídeo se reproduce normalmente en Safari después de la decodificación, pero no en Chrome?

Esta situación es relativamente rara, generalmente se debe a que la codificación del vídeo es H.265(HEVC): Safari tiene mejor soporte para H.265 en macOS e iOS (con aceleración por hardware), pero Chrome y Firefox tienen soporte limitado para H.265 (requieren hardware y licencia). La solución es transcodificar a codificación H.264, que es la codificación universal compatible con todos los navegadores. Por el contrario, es más común que Chrome reproduzca y Safari no; generalmente se debe a que el Profile/Level de codificación es demasiado alto o el moov atom está al final del archivo.

¿Se pierde calidad de imagen al convertir entre vídeo Base64 y archivos de vídeo?

No se pierde calidad de imagen. Base64 es un método de codificación, no compresión ni transcodificación; solo realiza una conversión de mapeo uno a uno entre datos binarios y cadenas de texto. Convertir vídeo a Base64 y luego decodificarlo de vuelta da como resultado datos binarios completamente idénticos al archivo de vídeo original (idénticos byte por byte), sin ninguna pérdida de calidad de imagen o sonido; es similar a copiar y pegar archivos en lugar de conversión por compresión. Mientras el proceso de codificación y decodificación Base64 sea correcto, la calidad del vídeo es exactamente la misma que la del archivo original.

Solución de problemas

El vídeo no se reproduce después de la decodificación Base64; el vídeo HTML5 muestra formato no compatible o pantalla negra

Configuración incorrecta del tipo MIME: el vídeo MP4 está configurado como video/webm, u otro tipo que no coincide La codificación del vídeo no es un formato compatible con el navegador: por ejemplo, el MP4 tiene codificación H.265 en lugar de H.264 Los datos Base64 se truncaron durante la copia, faltan partes al principio o al final, lo que causa daños en el archivo Error en el procesamiento del prefijo Data URL: el prefijo también se decodificó como Base64, o se eliminaron erróneamente caracteres iniciales de Base64 al quitar el prefijo El vídeo original en sí está dañado, o es un formato especial no compatible con el navegador La resolución del vídeo supera los límites del navegador, o se utiliza un formato de píxel no compatible con el navegador (como YUV de 10 bits) El encabezado del archivo de vídeo (ftyp atom) está dañado, el navegador no puede reconocer el formato contenedor MP4

La función atob() lanza InvalidCharacterError y la decodificación falla

La cadena Base64 contiene caracteres no válidos: el conjunto de caracteres estándar Base64 solo tiene 65 caracteres: A-Z, a-z, 0-9, +, /, = El prefijo Data URL data:video/mp4;base64, no se eliminó antes de pasar directamente a atob() Se mezclaron caracteres en blanco como saltos de línea \n, retornos de carro \r, espacios, tabulaciones en la cadena Al copiar desde Word/páginas web, etc., se introdujeron signos de puntuación chinos, caracteres de ancho completo o caracteres especiales invisibles La cadena Base64 fue codificada por URL (el signo + se convirtió en %2B, la barra / se convirtió en %2F), se necesita decodificación URL primero La longitud de la cadena Base64 no es un múltiplo de 4, y la falta del carácter de relleno = hace que la validación de atob falle Algunos lenguajes de backend (como Java, Python) usan variantes de Base64 seguras para URL (- y _ en lugar de + y /) en sus codificadores Base64

El vídeo se reproduce normalmente en Chrome/Firefox, pero no se reproduce en Safari

Safari tiene requisitos más estrictos para el Profile y Level de codificación H.264; configuraciones avanzadas como High Profile Level 5.1 pueden no ser compatibles El moov atom (metadatos) del archivo MP4 está al final del archivo en lugar de al principio; Safari necesita esperar a que se descargue todo para reproducir La codificación de audio no es AAC; Safari tiene mal soporte para otros audios como MP3 en el contenedor MP4 La resolución o tasa de bits del vídeo es demasiado alta, superando la capacidad de decodificación por hardware de Safari (especialmente iOS Safari) Se utilizaron características de codificación no compatibles con Safari, como profundidad de color de 10 bits, ciertas características de H.264 iOS Safari requiere que el vídeo establezca el atributo playsinline para reproducirse en línea; de lo contrario, se reproducirá en pantalla completa o no se reproducirá Safari tiene requisitos para la frecuencia de muestreo de la pista de audio; frecuencias de muestreo no estándar (diferentes de 44.1kHz/48kHz) pueden causar fallos de reproducción

La página se bloquea y el navegador se cierra al decodificar vídeos Base64 de gran tamaño

JavaScript es de un solo hilo; la conversión atob() y Uint8Array se ejecuta en el hilo principal, lo que bloquea el renderizado de la UI Durante la decodificación Base64 se generan múltiples cadenas y matrices grandes, con alto consumo de memoria (la memoria máxima al decodificar Base64 de 10MB puede ocupar decenas de MB) La creación de Blob y Object URL también requiere memoria; los vídeos grandes activan fácilmente los límites de memoria del navegador Los dispositivos móviles tienen menos memoria y son más propensos a cierres por OOM (falta de memoria) No se utiliza Web Worker; todas las operaciones se realizan en el hilo principal, bloqueando el bucle de eventos Los navegadores tienen límites en la longitud de cadenas individuales (el motor V8 tiene un límite de aproximadamente 512MB a 1GB); las cadenas Base64 extremadamente largas pueden no analizarse correctamente La recolección de basura (GC) frecuente durante la decodificación también causa bloqueos de página y retrasos en la respuesta

El Base64 copiado de la respuesta API se decodifica en un vídeo dañado que no se puede reproducir

El backend escapó automáticamente caracteres especiales al devolver Base64 (por ejemplo, + se convirtió en espacio, o problemas de escape JSON) El análisis JSON no procesó correctamente los caracteres especiales en la cadena Base64 Error de codificación Base64 en el backend, por ejemplo, datos binarios tratados como cadena UTF-8 Datos modificados durante la compresión gzip o la transmisión HTTP Al copiar desde Chrome DevTools, la vista previa Response en el panel Network puede truncar o escapar cadenas largas El backend utilizó una variante de Base64 diferente (como Base64 seguro para URL, que usa - y _ en lugar de + y /) y el frontend no lo procesó La respuesta API fue paginada o truncada, los datos Base64 están incompletos

El vídeo solo tiene imagen sin sonido, o el sonido y la imagen no están sincronizados

La codificación de audio no es compatible con el navegador: por ejemplo, el MP4 usa MP3 u Opus en lugar de AAC Los parámetros de audio se configuraron incorrectamente durante la transcodificación del vídeo, lo que causó errores en las marcas de tiempo (PTS/DTS) Datos Base64 incompletos, que truncaron justo parte de los datos de la pista de audio El vídeo tiene frecuencia de imagen variable (VFR); algunos navegadores tienen mal soporte para vídeos VFR, lo que causa falta de sincronización audiovisual El vídeo original en sí tiene problemas de sincronización audiovisual, no causados por la decodificación Base64 La frecuencia de muestreo de audio o el número de canales no son compatibles con el navegador, lo que causa fallos en la decodificación de la pista de audio La base de tiempo (timebase) de la pista de audio y la pista de vídeo en el contenedor de vídeo no es consistente, lo que causa desviación de sincronización durante la reproducción

Glosario

Base64: Método de codificación que representa datos binarios mediante 64 caracteres imprimibles; cada 3 bytes de datos binarios se codifican en 4 bytes de texto ASCII, con un aumento de volumen de aproximadamente 33%, comúnmente utilizado para transmitir datos binarios en protocolos de texto.
Data URL: Esquema URI definido en RFC 2397, con formato data:[mediatype][;base64],data, que permite incrustar archivos pequeños directamente en documentos sin necesidad de solicitudes HTTP adicionales.
MIME type: Identificador de tipo de medio que indica el formato de un documento o archivo; los formatos de vídeo comienzan con video/, como video/mp4, video/webm, video/ogg. El navegador determina cómo procesar el recurso según el tipo MIME.
Blob: Binary Large Object (objeto binario grande), objeto que representa datos binarios originales inmutables en el navegador, se puede usar para almacenar datos de archivos como vídeo e imágenes, y genera una URL accesible mediante URL.createObjectURL().
atob(): Función integrada del navegador utilizada para decodificar cadenas codificadas en Base64 a cadenas binarias (ASCII to Binary); la función de codificación correspondiente es btoa() (Binary to ASCII).
btoa(): Función integrada del navegador utilizada para codificar cadenas binarias a cadenas Base64 (Binary to ASCII), es la operación inversa de atob(), se usa al convertir vídeo a Base64.
Uint8Array: Tipo de matriz tipada de JavaScript que almacena enteros sin signo de 8 bits (0-255), cada elemento corresponde a un byte; es la forma estándar de procesar datos binarios; después de la decodificación Base64, es necesario convertirlo a Uint8Array antes de crear Blob.
MP4: MPEG-4 Part 14, un formato contenedor multimedia común que generalmente empaqueta codificación de vídeo H.264 y codificación de audio AAC, con la mejor compatibilidad web y extensión de archivo .mp4.
WebM: Formato contenedor de vídeo de código abierto sin regalías lanzado por Google, que generalmente utiliza codificación de vídeo VP8/VP9/AV1 y codificación de audio Vorbis/Opus; su tasa de compresión es superior a MP4, con buen soporte en Chrome/Firefox/Edge.
OGG: Formato contenedor multimedia de código abierto desarrollado por la Fundación Xiph; el vídeo generalmente se codifica con Theora y el audio con Vorbis; actualmente está siendo reemplazado gradualmente por WebM, con extensión de archivo .ogv.
H.264/AVC: Estándar de codificación de vídeo más utilizado actualmente, también llamado AVC (Advanced Video Coding), con buen equilibrio entre tasa de compresión y calidad, soporte de aceleración por hardware, codificación de vídeo estándar para el contenedor MP4, compatible con todos los navegadores.
AAC: Advanced Audio Coding, codificación de audio avanzada, codificación de audio estándar para el contenedor MP4, sucesora del formato MP3; con la misma calidad, los archivos son más pequeños, compatible con todos los navegadores modernos.
Object URL: URL temporal creada mediante URL.createObjectURL(blob), con formato blob://..., se puede usar directamente en el atributo src de etiquetas como video/img, apunta a datos Blob en memoria; es necesario liberar con revokeObjectURL después de usar.
FFmpeg: Herramienta de procesamiento de audio y vídeo de código abierto, que se puede usar para transcodificación, edición, visualización de información de codificación, compresión y otras operaciones de vídeo; es la herramienta estándar de la industria para procesar vídeo, esencial para verificar y convertir codificaciones de vídeo.
moov atom: Átomo de metadatos en archivos MP4 que contiene datos clave como duración del vídeo, resolución, información de codificación, parámetros de decodificación, etc. Para que el vídeo se reproduzca rápidamente, moov debe estar al principio del archivo (faststart) para vídeos web.
Formato contenedor: Formato de archivo que empaqueta flujos de vídeo, flujos de audio, subtítulos y metadatos, como MP4, WebM, OGG, MKV; el formato contenedor no es igual al formato de codificación, un mismo contenedor puede empaquetar diferentes codificaciones.
Codificación de vídeo: Algoritmo para comprimir y descomprimir datos de vídeo; los más comunes son H.264, H.265(HEVC), VP8, VP9, AV1; la codificación determina la tasa de compresión y la calidad de imagen; la compatibilidad del navegador con la codificación determina si el vídeo se puede reproducir.
Depuración de API: Proceso de verificar la corrección de los datos durante el desarrollo de interfaces frontend y backend; esta herramienta se puede usar para previsualizar rápidamente si los datos de vídeo Base64 devueltos por la API son correctos, sin necesidad de escribir código de decodificación frontend.
Chrome DevTools: Herramientas de desarrollo integradas en el navegador Chrome; el panel Network permite ver solicitudes y respuestas API, desde donde se pueden copiar datos de vídeo Base64 para depuración.
Carácter de relleno =: Al final de la codificación Base64 pueden aparecer 1 o 2 signos igual, que se usan para rellenar la longitud del resultado de codificación a un múltiplo de 4; la falta de relleno durante la decodificación puede causar errores, la herramienta puede reparar automáticamente problemas de relleno.

Tabla de comparación de tipos MIME de vídeo web y compatibilidad

Tipo MIME	Formato contenedor	Codificación de vídeo común	Codificación de audio común	Compatibilidad con navegadores	Extensión de archivo
video/mp4	MP4 (MPEG-4 Part 14)	H.264/AVC, H.265/HEVC, AV1	AAC, MP3	Todos los navegadores modernos (Chrome/Firefox/Safari/Edge/iOS/Android), la combinación H.264+AAC es 100% compatible	.mp4, .m4v
video/webm	WebM	VP8, VP9, AV1	Vorbis, Opus	Chrome/Firefox/Edge/Opera totalmente compatible, Safari 14.1+ es compatible, iOS Safari 15+ es parcialmente compatible	.webm
video/ogg	Ogg	Theora	Vorbis	Firefox/versiones antiguas de Chrome/Opera son compatibles, Safari no es compatible, actualmente se usa poco	.ogv, .ogg
video/quicktime	QuickTime (MOV)	ProRes, H.264	AAC, PCM	Principalmente compatible con Safari/macOS, mala compatibilidad con otros navegadores	.mov
video/x-matroska	Matroska	H.264, VP9, AV1, etc.	Varias codificaciones	Mala compatibilidad nativa con navegadores, generalmente requiere reproductor de terceros, no recomendado para uso web	.mkv

Códigos de error comunes en decodificación de vídeo Base64 y soluciones

Síntoma/mensaje de error	Causa posible	Dirección de resolución	Solución
Error en atob(): InvalidCharacterError o "not correctly encoded"	La cadena Base64 contiene caracteres no válidos; el prefijo Data URL no se ha eliminado; hay caracteres en blanco/saltos de línea	Verifica si la cadena de entrada contiene solo A-Za-z0-9+/=; confirma si se ha eliminado el prefijo data:	Elimina el prefijo data:video/...;base64,; elimina todos los saltos de línea, espacios, tabulaciones; verifica si hay caracteres chinos o especiales mezclados
La decodificación es exitosa pero el vídeo no se reproduce, muestra "formato de vídeo no compatible"	Tipo MIME incorrecto; la codificación del vídeo no es compatible con el navegador; el encabezado del archivo está dañado	Confirma si el tipo MIME coincide con el formato real del vídeo; usa FFmpeg para verificar la información de codificación	Selecciona el tipo MIME correcto (usa video/mp4 para MP4); transcodifica con FFmpeg a H.264+AAC (MP4); verifica si el principio y el final de Base64 están completos
El vídeo tiene imagen pero sin sonido, o con sonido pero sin imagen	Una de las codificaciones de audio o vídeo no es compatible con el navegador; la pista de audio o la pista de vídeo están dañadas	Usa FFmpeg para ver qué flujos contiene el vídeo y sus codificaciones	MP4 debe ser vídeo H.264+audio AAC; WebM usa VP8/VP9+Vorbis/Opus; transcodifica nuevamente a un formato compatible estándar
La imagen del vídeo tiene distorsión, pantalla verde, mosaico	Datos Base64 incompletos (truncados); datos dañados durante la decodificación; pérdida de fotogramas clave	Compara la longitud de Base64 original, verifica si la copia está completa	Vuelve a copiar la cadena Base64 completa; verifica si hay pérdida de caracteres durante la transmisión; verifica si el archivo de vídeo original en sí es normal
El tamaño del vídeo decodificado no coincide con el del archivo original	Error en el procesamiento del carácter de relleno = de Base64; problema de codificación al convertir cadena binaria a Uint8Array	Verifica si la lógica de decodificación procesa correctamente el relleno; confirma que el rango de charCodeAt es 0-255	Asegúrate de que los signos = al final de Base64 se procesen correctamente; verifica que la lógica de conversión de Uint8Array sea correcta
La página se bloquea y no responde al decodificar vídeos grandes	La decodificación Base64 se ejecuta en el hilo principal, bloqueando la UI; el vídeo es demasiado grande y supera el límite de memoria	Consulta el tamaño de los datos Base64; Base64 de más de 10MB (unos 7.5MB de vídeo original) puede causar bloqueos	No se recomienda usar Base64 para vídeos grandes; considera usar Web Worker para decodificar en segundo plano; procesa por fragmentos; cambia al método de carga de archivos
Safari puede decodificar pero no reproducir, Chrome funciona correctamente	Safari tiene requisitos más estrictos para la codificación de vídeo; el moov atom no está al principio del archivo; el Profile/Level de codificación es demasiado alto	Usa FFmpeg para verificar H.264 Profile y Level; verifica la posición de moov	Agrega -movflags +faststart al transcodificar; usa H.264 Baseline/Main Profile, Level no superior a 4.1; confirma que el audio sea AAC
Configurar Data URL directamente a video src no reproduce el vídeo	Formato Data URL incorrecto; tipo MIME mal escrito; parte Base64 dañada	Verifica si el formato de Data URL es data:video/xxx;base64,xxxx	Confirma que el tipo MIME sea correcto; la coma es una coma inglesa; la parte Base64 está completa; algunos dispositivos móviles tienen límites de tamaño para Data URL

Tabla de comparación entre tamaño de vídeo original y tamaño después de codificación Base64

Tamaño de vídeo original	Tamaño después de codificación Base64 (aprox.)	Incremento de volumen	Sobrecarga de cabecera Data URL	¿Adecuado para incrustación?	Escenario típico
100 KB	~133 KB	+33%	Aprox. 20 bytes	Recomendado	Animaciones de iconos extremadamente pequeñas, animaciones de carga sin sonido de unos segundos
500 KB	~667 KB	+33%	Aprox. 20 bytes	Recomendado	Animaciones en bucle cortas, vídeos cortos de sugerencias de operaciones, animaciones de retroalimentación de botones
1 MB	~1.33 MB	+33%	Aprox. 20 bytes	Depende	Vídeos de guía de 5-10 segundos, animaciones de demostración de baja resolución; presta atención al rendimiento de la primera pantalla
2 MB	~2.67 MB	+33%	Aprox. 20 bytes	No recomendado	Cerca del límite de volumen para vídeos incrustados, aumentará significativamente el tiempo de carga de la página
5 MB	~6.67 MB	+33%	Aprox. 20 bytes	No recomendado	Volumen demasiado grande, no se recomienda incrustar con Base64; usa archivos de vídeo externos
10 MB	~13.3 MB	+33%	Aprox. 20 bytes	Prohibido	Afecta gravemente la carga de la página, puede causar cierres por falta de memoria en dispositivos móviles
50 MB	~66.7 MB	+33%	Aprox. 20 bytes	Prohibido	Absolutamente no uses Base64 para procesar vídeos tan grandes; debes usar métodos de carga/carga de archivos