Base64 a Vídeo
Entrada Base64
Entrada Base64
Vista prèvia de vídeo
Restaura en línia dades de vídeo codificades en Base64 a fitxers de vídeo MP4/WebM/OGG reproduïbles, amb reconeixement automàtic del prefix Data URL. Totes les operacions es realitzen localment al navegador, les dades de vídeo no es pugen a cap servidor. Ideal per a depuració d'API backend, verificació de codificació de vídeo i restauració de vídeo inline de frontend. Després de la descodificació es pot previsualitzar, reproduir i descarregar directament.
Relacionats
Casos d'ús
- Depuració d'API de vídeo backend: quan l'API retorna dades de vídeo codificades en Base64, enganxa directament a l'eina per a una previsualització ràpida, verificant si la resposta de l'API és correcta sense necessitat d'escriure codi de descodificació frontend
- Verificació de la sortida de codificació de vídeo: després de generar vídeo Base64 amb FFmpeg o serveis de transcodificació al núvol, descodifica i reprodueix per verificar si el resultat de la transcodificació és normal, resolent problemes de codificació danyada
- Restauració de vídeo inline frontend: extreu vídeos inline en format Data URL de HTML, CSS o JavaScript (data:video/mp4;base64,...), restaurant-los com a fitxers de vídeo visibles
- Validació ràpida de dades de vídeo: compara si dos vídeos Base64 descodifiquen el mateix contingut, o verifica si hi ha hagut corrupció de dades durant la transmissió Base64
- Previsualització temporal de vídeo curt: per a clips de vídeo curts que no cal desar localment, previsualitza i reprodueix directament a l'eina, decidint si cal descarregar després de confirmar el contingut
- Anàlisi de dades de rastreig web: dades de vídeo codificades en Base64 obtingudes per rastrejadors web, es restauren ràpidament com a fitxers reproduïbles per a revisió o anàlisi de contingut
- Depuració de desenvolupament client: en desenvolupar aplicacions mòbils i mini-programes, quan el backend retorna vídeo Base64, utilitza aquesta eina per verificar la correcció de les dades abans de desenvolupar la descodificació client
- Propòsits de demostració didàctica: com a eina de demostració en línia en explicar els principis de codificació Base64, la tecnologia Data URL i l'ús de Blob/URL.createObjectURL en frontend
- Previsualització d'adjuncions de correu: alguns sistemes de correu converteixen les adjuncions a Base64 per incrustar-les, després d'extreure's es pot restaurar ràpidament el contingut de vídeo per visualitzar-lo
- Ajuda en la reproducció de bugs: quan l'equip de proves reporta bugs relacionats amb vídeo, proporciona dades Base64, els desenvolupadors poden restaurar ràpidament el vídeo per reproduir l'escenari del problema
Com usar-ho
- Obté les dades de vídeo Base64: copia la cadena de vídeo codificada en Base64 des de respostes d'API, registres, codi font HTML, bases de dades, etc., amb suport per a amb o sense prefix Data URL
- Enganxa a l'àrea d'entrada: enganxa completament el text Base64 copiat al quadre d'entrada de l'eina, l'eina reconeixerà automàticament si conté el prefix data:video/...;base64,
- Confirma o selecciona el format: si l'entrada conté el prefix Data URL, l'eina reconeixerà automàticament el tipus MIME; si és Base64 pur, selecciona manualment el format de vídeo corresponent (MP4/WebM/OGG)
- Fes clic al botó de descodificació: després de fer clic al botó de descodificació, l'eina executa la descodificació Base64, conversió Uint8Array i creació de Blob localment al navegador, mostrant missatges d'estat durant el procés
- Visualitza la informació del vídeo: un cop completada la descodificació, consulta la informació bàsica del vídeo incloent mida del fitxer, tipus MIME i confirmació de format, verificant si la descodificació ha estat exitosa
- Previsualitza i reprodueix el vídeo: utilitza el reproductor HTML5 integrat de la pàgina per previsualitzar el vídeo, arrossega la barra de progrés per comprovar si el contingut del vídeo és complet i si la imatge i el so són normals
- Descarrega el fitxer de vídeo: després de confirmar que el vídeo és correcte, fes clic al botó de descàrrega per desar el vídeo Blob localment, el fitxer coincidirà automàticament amb l'extensió correcta (.mp4/.webm/.ogg)
Característiques
- Reconeixement intel·ligent del format d'entrada: detecta automàticament la codificació Base64 pura i el format Data URL complet (prefix data:video/...;base64,), permet la descodificació sense necessitat d'eliminar el prefix manualment
- Suport a múltiples formats de vídeo: suport complet per a tipus MIME de vídeo amb suport natiu dels navegadors moderns com MP4 (video/mp4), WebM (video/webm), OGG (video/ogg)
- Processament local al navegador: totes les operacions de descodificació Base64, generació de Blob i previsualització de vídeo es realitzen completament al navegador de l'usuari mitjançant JavaScript, les dades de vídeo no s'envien a cap servidor
- Previsualització i reproducció instantània: després de la descodificació es genera automàticament un reproductor de vídeo HTML5 amb controls complets de reproducció com reproduir, pausar, arrossegar el progrés, ajustar el volum i pantalla completa
- Descàrrega del fitxer original: amb un sol clic desa el vídeo descodificat com a fitxer local, seleccionant automàticament l'extensió de fitxer correcta segons el tipus MIME (.mp4/.webm/.ogg)
- Detecció automàtica del tipus MIME: reconeix automàticament el format de vídeo des del prefix Data URL, l'usuari no ha de seleccionar manualment; suport per a la selecció manual del format quan l'entrada és Base64 pur
- Retroacció del progrés de descodificació en temps real: mostra l'estat del processament en descodificar dades Base64 de gran mida, evitant que l'usuari pensi que la pàgina s'ha penjat
- Visualització de metadades del vídeo: després de la descodificació mostra informació bàsica com la mida del vídeo, tipus MIME, durada (quan es pot reproduir) i resolució
- Missatges de diagnòstic d'errors: proporciona missatges d'error clars i suggeriments de resolució quan el format d'entrada és incorrecte, la codificació Base64 està danyada o el format de vídeo no és compatible
- Suport per arrossegar i enganxar: permet enganxar directament text Base64 i arrossegar fitxers de text a l'àrea d'entrada, millorant l'eficiència de depuració
- Correcció automàtica de problemes de codificació: gestiona automàticament problemes de format comuns com ara caràcters de farciment Base64 (=) que falten, espais en blanc i salts de línia
- Compatibilitat entre navegadors: suport per a tots els navegadors moderns com Chrome, Firefox, Safari i Edge, utilitzant les API estàndard atob i Uint8Array
- Disseny responsiu: suport per a ús en escriptori i mòbil, permet descodificar i previsualitzar vídeos curts correctament en telèfons i tauletes
- Garantia de seguretat i privacitat: les dades de vídeo es processen completament a la memòria local, les dades s'eliminen immediatament en tancar la pàgina, sense deixar cap memòria cau ni registre
Preguntes freqients
Quins formats de vídeo admet l'eina Base64 a vídeo?
Admet els formats de vídeo principals reproduïbles nativament pels navegadors: MP4 (video/mp4, codificació H.264+AAC), WebM (video/webm, codificació VP8/VP9+Vorbis/Opus), OGG (video/ogg, codificació Theora+Vorbis). D'entre aquests, el format MP4 té la millor compatibilitat, amb suport de tots els navegadors moderns i dispositius mòbils, i es recomana utilitzar-lo prioritàriament. Si el vostre vídeo és d'un altre format (com MOV, AVI, MKV), cal transcodificar-lo primer a MP4 (H.264+AAC) amb FFmpeg abans de la codificació Base64.
Cal que l'entrada inclogui el prefix data:video/mp4;base64?
No cal. L'eina admet dos formats d'entrada: ①Cadena Base64 pura (sense cap prefix); ②Data URL complet (amb prefix data:video/xxx;base64,). L'eina detectarà automàticament si l'entrada conté un prefix; si n'hi ha, extreurà automàticament el contingut Base64 i reconeixerà el tipus MIME. Es recomana copiar directament el contingut complet retornat per l'API, sense necessitat de manejar el prefix manualment.
Es pot reproduir el vídeo directament al navegador després de la descodificació?
Sí. Un cop completada la descodificació, l'eina genera un reproductor de vídeo HTML5 integrat, amb funcions completes com reproduir/pausar, arrossegar la barra de progrés, ajustar el volum i reproducció a pantalla completa; podeu previsualitzar directament el contingut del vídeo a la pàgina, i després de confirmar que la imatge i el so són normals, decidir si descarregar-lo localment.
Es poden processar vídeos Base64 de mida gran? Hi ha límits de mida?
L'eina en si no té límits de mida estrictes, però els navegadors tenen límits de memòria i rendiment. La codificació Base64 fa que la mida del vídeo augmenti aproximadament un 33%; durant el procés de descodificació el navegador ha d'assignar memòria per emmagatzemar la cadena Base64, cadena binària, Uint8Array, Blob i altres còpies, amb una memòria màxima que pot ser 3-5 vegades la mida del vídeo original. Es recomana processar Base64 de fins a 5MB (equivalent a uns 3.7MB de vídeo original) de forma fluida; Base64 de més de 10MB pot causar retards a la pàgina; per a vídeos grans no es recomana utilitzar Base64, es recomana utilitzar la càrrega tradicional de fitxers i la càrrega mitjançant URL.
Les dades de vídeo es pujaran a un servidor? La privacitat és segura?
Totes les operacions de descodificació es completen íntegrament de forma local al vostre navegador mitjançant JavaScript, les dades de vídeo no es pujaran a cap servidor ni s'enviarà cap sol·licitud de xarxa. En tancar la pàgina, les dades de vídeo s'eliminaran immediatament de la memòria del navegador, sense deixar cap memòria cau ni registre. Podeu desconnectar la xarxa i utilitzar aquesta eina, la funció de descodificació continuarà funcionant amb normalitat.
Per què el vídeo després de la codificació Base64 és 1/3 més gran que el fitxer original?
Això està determinat pel principi de codificació de Base64, no és un problema de l'eina. Base64 recodifica cada 3 bytes (24 bits) de dades binàries en 4 caràcters ASCII (cada caràcter ocupa 1 byte), per tant el volum després de la codificació és 4/3≈133% de l'original, és a dir, el volum augmenta aproximadament un 33%. Si la longitud de les dades originals no és un múltiple de 3, el final s'omple amb signes =, amb un augment de volum real d'aproximadament 33%-37%. Aquest augment de volum és una característica comuna de totes les codificacions Base64, no és un problema d'aquesta eina.
Per què el meu MP4 Base64 no es pot reproduir després de la descodificació?
MP4 és només un format contenidor; la codificació de vídeo que conté ha de ser un format compatible amb el navegador per poder reproduir-se. En el 99% dels casos la codificació de vídeo no és H.264, o la codificació d'àudio no és AAC. Per exemple, dins de MP4 s'han empaquetat codificacions H.265(HEVC), AV1, etc., que el navegador podria no ser capaç de reproduir. Podeu utilitzar l'ordre FFmpeg ffmpeg -i input.mp4 per veure la informació de codificació; si no és H.264+AAC, transcodifiqueu amb l'ordre ffmpeg -i input.mp4 -c:v libx264 -c:a aac -movflags +faststart output.mp4 i després codifiqueu a Base64. A més, cal confirmar que el tipus MIME estigui establert a video/mp4 i que les dades Base64 siguin completes i no truncades.
Com puc verificar que la codificació del meu vídeo és compatible amb el navegador?
Es recomana utilitzar l'eina FFmpeg per a la verificació: després d'instal·lar FFmpeg, executeu ffmpeg -i yourvideo.mp4 i consulteu les línies Video i Audio de la informació de sortida. La línia Video ha de contenir h264 (o avc), i la línia Audio ha de contenir aac. Per exemple: Stream #0:0(eng): Video: h264 (avc1/0x31637661...), Stream #0:1(eng): Audio: aac (mp4a/0x6134706D...). Si no són aquestes dues codificacions, cal transcodificar. També podeu arrossegar directament el fitxer de vídeo original a la finestra del navegador Chrome; si es pot reproduir directament, la codificació és compatible amb el navegador.
Quina és l'extensió del fitxer de vídeo descarregat després de la descodificació?
L'eina farà coincidir automàticament l'extensió de fitxer correcta segons el tipus MIME que hàgiu seleccionat (o reconegut automàticament): video/mp4 correspon a .mp4, video/webm a .webm, video/ogg a .ogv. No cal que modifiqueu l'extensió manualment, el fitxer descarregat es pot obrir directament amb el reproductor per defecte del sistema.
Els salts de línia i els espais a la cadena Base64 afecten la descodificació?
No afecten. L'eina gestionarà automàticament els espais en blanc com ara salts de línia (\n), retorns de carro (\r), espais i tabulacions a la cadena Base64; aquests caràcters s'eliminaran abans de la descodificació. Per tant, encara que el vostre Base64 sigui en format multilínia (com ara el format MIME amb salt de línia cada 76 caràcters), o que s'hagin introduït espais de formatat en copiar-lo, es podrà descodificar amb normalitat.
Com es pot implementar Base64 a vídeo amb JavaScript en el frontend?
La lògica del codi bàsic és la següent: ①Elimineu el prefix Data URL per obtenir Base64 pur; ②Utilitzeu atob(base64Str) per descodificar a una cadena binària; ③Convertiu la cadena binària a Uint8Array (itereu cada caràcter i agafeu charCode); ④Utilitzeu new Blob([uint8Array], {type: 'video/mp4'}) per crear el Blob; ⑤Utilitzeu URL.createObjectURL(blob) per generar un URL temporal; ⑥Assigneu l'URL a video.src. Recordeu cridar URL.revokeObjectURL(url) després d'usar-lo per alliberar memòria i evitar fuites de memòria.
Quina diferència hi ha entre vídeo Data URL i vídeo Blob URL?
Data URL escriu les dades Base64 completes directament dins l'URL, amb format data:video/mp4;base64,XXXX, l'URL mateix conté totes les dades; Blob URL és una referència temporal en format blob:// generada per URL.createObjectURL(), que apunta a l'objecte Blob a la memòria del navegador, l'URL mateix és curt i no conté dades. Data URL ha d'analitzar tota la cadena Base64 cada vegada que s'utilitza, amb un rendiment pitjor; Blob URL és més eficient i adequat per a la reproducció i reutilització. Aquesta eina utilitza internament el mètode Blob URL per implementar el reproductor.
Quins escenaris són adequats per utilitzar codificació de vídeo Base64? Quins no ho són?
Escenaris adequats: ①Vídeos curts d'uns pocs MB (animacions de càrrega, guies d'instruccions, animacions d'icones); ②Quan cal incrustar vídeo en una Demo/document d'un sol fitxer HTML; ③Vídeos petits incrustats en correus electrònics; ④Transmissió temporal de vídeos petits durant la depuració d'interfícies API. Escenaris no adequats: ①Vídeos de més de 5MB (l'inflament de volum del 33% malbarata massa ample de banda); ②Vídeos pujats per usuaris (mida incontrolable); ③Vídeos llargs que requereixen càrrega en streaming o arrossegament del progrés; ④Vídeos que han de ser emmagatzemats en memòria cau i reutilitzats pel navegador (Data URL no es pot emmagatzemar en memòria cau independentment); ⑤Contingut de vídeo per a usuaris en entorns de producció (s'hauria d'utilitzar CDN i URL de fitxer extern).
Per què el vídeo després de la descodificació es reprodueix normalment a Safari, però no a Chrome?
Aquesta situació és relativament rara, normalment es deu al fet que la codificació del vídeo és H.265(HEVC) — Safari a macOS i iOS té bon suport per a H.265 (amb acceleració per maquinari), però Chrome i Firefox tenen suport limitat per a H.265 (requereixen maquinari i llicència). La solució és transcodificar a la codificació H.264, que és la codificació universal compatible amb tots els navegadors. Al contrari, el cas on Chrome pot reproduir però Safari no és més comú, normalment a causa d'un Profile/Level de codificació massa alt o que l'àtom moov és al final del fitxer.
En la conversió entre vídeo Base64 i fitxer de vídeo, es perd qualitat d'imatge?
No es perd qualitat d'imatge. Base64 és un mètode de codificació, no compressió ni transcodificació, només fa una conversió de mapatge un a un entre dades binàries i cadenes de text. El vídeo convertit a Base64 i després descodificat torna a produir dades binàries idèntiques al fitxer de vídeo original (idèntiques byte per byte), sense cap pèrdua de qualitat d'imatge ni de so, similar a copiar i enganxar un fitxer en lloc d'una conversió amb compressió. Mentre el procés de codificació i descodificació Base64 sigui correcte, la qualitat del vídeo serà idèntica a la del fitxer original.
Solució de problemes
El vídeo no es pot reproduir després de la descodificació Base64, el vídeo HTML5 mostra format no compatible o pantalla negra
Error en la configuració del tipus MIME: el vídeo MP4 s'ha configurat com a video/webm o un altre tipus que no coincideix La codificació de vídeo no és un format compatible amb el navegador: per exemple, dins de MP4 hi ha codificació H.265 en lloc de H.264 Les dades Base64 s'han truncat durant el procés de còpia, mancant parts del principi o del final, causant que el fitxer estigui danyat Error en el maneig del prefix Data URL: el prefix també s'ha descodificat com a Base64, o en eliminar el prefix s'ha esborrat accidentalment el caràcter inicial de Base64 El vídeo original mateix ja estava danyat, o és un format especial no compatible amb el navegador La resolució del vídeo supera els límits del navegador, o utilitza un format de píxels no compatible (com ara YUV de 10 bits) La capçalera del fitxer de vídeo (àtom ftyp) està danyada, el navegador no pot reconèixer el format contenidor MP4
La funció atob() llança InvalidCharacterError i la descodificació falla
La cadena Base64 conté caràcters no permesos: el conjunt de caràcters estàndard de Base64 només té 65 caràcters A-Z, a-z, 0-9, +, /, = El prefix Data URL data:video/mp4;base64, no s'ha eliminat i s'ha passat directament a atob() A la cadena s'han barrejat espais en blanc com ara salts de línia \n, retorns de carro \r, espais i tabulacions En copiar des de Word/pàgines web, etc. s'han introduït signes de puntuació xinesos, caràcters de amplada completa o caràcters especials invisibles La cadena Base64 ha estat codificada per URL (el signe + s'ha convertit en %2B, la barra / en %2F), cal descodificar-la per URL primer La longitud de la cadena Base64 no és un múltiple de 4 i manquen els caràcters de farciment =, fent que la verificació d'atob falli Alguns llenguatges de backend (com Java, Python) utilitzen variants de Base64 segures per a URL (- i _ en lloc de + i /) en els seus codificadors
El vídeo es reprodueix normalment a Chrome/Firefox, però no es pot reproduir a Safari
Safari té requisits més estrictes per al Profile i Level de codificació H.264, configuracions avançades com High Profile Level 5.1 poden no ser compatibles L'àtom moov (metadades) del fitxer MP4 és al final del fitxer en lloc del principi, Safari ha d'esperar que es descarregui completament per reproduir La codificació d'àudio no és AAC; Safari té poc suport per a altres àudios com MP3 dins del contenidor MP4 La resolució o el bitrate del vídeo són massa alts, superant la capacitat de descodificació per maquinari de Safari (especialment iOS Safari) S'han utilitzat característiques de codificació no compatibles amb Safari, com ara profunditat de color de 10 bits i algunes característiques H.264 iOS Safari requereix que el vídeo estableixi l'atribut playsinline per a la reproducció inline; altrament es reproduirà a pantalla completa o no es podrà reproduir Safari té requisits sobre la freqüència de mostreig de la pista d'àudio; freqüències de mostreig no estàndard (com ara no 44.1kHz/48kHz) poden causar que la reproducció falli
La pàgina es retarda i el navegador es bloqueja en descodificar vídeos Base64 de mida gran
JavaScript és de fil únic; atob() i la conversió Uint8Array s'executen al fil principal, bloquejant el renderitzat de la UI Durant el procés de descodificació Base64 es generen múltiples cadenes i arrays grans, amb un alt consum de memòria (en descodificar Base64 de 10MB, la memòria màxima pot ocupar desenes de MB) La creació de Blob i Object URL també requereix memòria; els vídeos grans fàcilment activen els límits de memòria del navegador Els dispositius mòbils tenen menys memòria i són més propensos a bloquejos per OOM (memòria insuficient) No s'utilitza Web Worker, totes les operacions són al fil principal, bloquejant el bucle d'esdeveniments Els navegadors tenen un límit en la longitud de cadena individual (el motor V8 té uns 512MB a 1GB); les cadenes Base64 molt llargues poden no ser analitzades correctament La recol·lecció d'escombraries (GC) freqüent durant el procés de descodificació també causa retards a la pàgina i latència de resposta
El Base64 copiat de la resposta d'API, el vídeo després de la descodificació està danyat i no es pot reproduir
El backend, en retornar Base64, ha escapçat automàticament caràcters especials (com ara + convertit en espai, o problemes d'escap JSON) En analitzar JSON no s'han manejat correctament els caràcters especials de la cadena Base64 Error de codificació quan el backend va codificar en Base64, per exemple tractant les dades binàries com a cadena UTF-8 Les dades s'han modificat durant la compressió gzip o la transmissió HTTP En copiar des de Chrome DevTools, la previsualització Response del panell Network pot truncar o escapar cadenes llargues El backend utilitza una variant Base64 diferent (com ara Base64 segur per a URL, utilitzant - i _ en lloc de + i /) i el frontend no ho gestiona La resposta de l'API està paginada o truncada, les dades Base64 no són completes
El vídeo només té imatge però no so, o el so i la imatge no estan sincronitzats
La codificació d'àudio no és compatible amb el navegador: per exemple, dins de MP4 s'utilitza MP3 o Opus en lloc d'AAC Els paràmetres d'àudio s'han configurat incorrectament durant la transcodificació del vídeo, causant errors en les marques de temps (PTS/DTS) Les dades Base64 no són completes, truncant justament part de les dades de la pista d'àudio El vídeo és de velocitat de fotogrames variable (VFR); alguns navegadors tenen poc suport per a vídeos VFR, causant desincronització àudio-vídeo El vídeo original mateix ja té problemes de sincronització àudio-vídeo, no és causat per la descodificació Base64 La freqüència de mostreig d'àudio o el nombre de canals no són compatibles amb el navegador, causant que la descodificació de la pista d'àudio falli La base de temps (timebase) de la pista d'àudio i la pista de vídeo dins del contenidor de vídeo no és consistent, causant desplaçaments de sincronització durant la reproducció
Glossari
- Base64
- Mètode de codificació que representa dades binàries mitjançant 64 caràcters imprimibles, cada 3 bytes de dades binàries es codifiquen en 4 bytes de text ASCII, amb un augment de volum d'aproximadament un 33%, utilitzat sovint per transmetre dades binàries en protocols de text.
- Data URL
- Esquema URI definit per RFC 2397, amb format data:[mediatype][;base64],data, que permet incrustar fitxers petits directament en documents, sense necessitat de sol·licituds HTTP addicionals.
- Tipus MIME
- Identificador de tipus de mitjà, utilitzat per indicar el format d'un document o fitxer; els formats de vídeo comencen amb video/, com ara video/mp4, video/webm, video/ogg; els navegadors determinen com gestionar els recursos segons el tipus MIME.
- Blob
- Binary Large Object (Objecte Binari Gran), un objecte que representa dades binàries en brut immutables al navegador, que es pot utilitzar per emmagatzemar dades de fitxers com vídeo i imatges, generant un URL accessible mitjançant URL.createObjectURL().
- atob()
- Funció integrada del navegador, utilitzada per descodificar una cadena codificada en Base64 a una cadena binària (ASCII to Binary); la funció de codificació corresponent és btoa() (Binary to ASCII).
- btoa()
- Funció integrada del navegador, utilitzada per codificar una cadena binària a una cadena Base64 (Binary to ASCII), és l'operació inversa d'atob(), utilitzada en convertir vídeo a Base64.
- Uint8Array
- Array tipat de JavaScript que emmagatzema enters sense signe de 8 bits (0-255), cada element correspon a un byte, és la forma estàndard de processar dades binàries; després de la descodificació Base64 cal convertir-lo a Uint8Array abans de crear el Blob.
- MP4
- MPEG-4 Part 14, un format contenidor multimedia d'ús comú que normalment empaqueta codificació de vídeo H.264 i codificació d'àudio AAC, amb la millor compatibilitat web, extensió de fitxer .mp4.
- WebM
- Format contenidor de vídeo de codi obert i lliure de drets impulsat per Google, que normalment utilitza codificació de vídeo VP8/VP9/AV1 i codificació d'àudio Vorbis/Opus, amb una taxa de compressió millor que MP4, amb bon suport a Chrome/Firefox/Edge.
- OGG
- Format contenidor multimedia de codi obert desenvolupat per la Fundació Xiph; el vídeo normalment utilitza codificació Theora i l'àudio Vorbis, actualment en desús sent reemplaçat per WebM, extensió de fitxer .ogv.
- H.264/AVC
- L'estàndard de codificació de vídeo més utilitzat actualment, també anomenat AVC (Advanced Video Coding), amb un bon equilibri entre compressió i qualitat, amb suport d'acceleració per maquinari, és la codificació de vídeo estàndard del contenidor MP4 i compatible amb tots els navegadors.
- AAC
- Advanced Audio Coding (Codificació d'Àudio Avançada), la codificació d'àudio estàndard del contenidor MP4, successora del format MP3, amb fitxers més petits a la mateixa qualitat i suport de tots els navegadors moderns.
- Object URL
- URL temporal creat mitjançant URL.createObjectURL(blob), amb format blob://..., que es pot utilitzar directament per a l'atribut src d'etiquetes com video/img, apuntant a les dades Blob a la memòria; després d'usar-lo cal revokeObjectURL per alliberar-lo.
- FFmpeg
- Eina de processament d'àudio i vídeo de codi obert, que es pot utilitzar per a operacions com transcodificació de vídeo, retall, visualització d'informació de codificació i compressió; és l'eina estàndard de la indústria per processar vídeo, essencial per verificar i convertir codificacions de vídeo.
- moov atom
- Àtom de metadades en un fitxer MP4 que conté dades clau com la durada del vídeo, resolució, informació de codificació i paràmetres de descodificació. El moov ha d'estar al principi del fitxer per a una reproducció ràpida; es recomana col·locar-lo al principi per a vídeo web (faststart).
- Format Contenidor
- Format de fitxer que empaqueta fluxos de vídeo, àudio, subtítols i metadades, com MP4, WebM, OGG, MKV; el format contenidor no equival al format de codificació, un mateix contenidor pot empaquetar diferents codificacions.
- Codificació de Vídeo
- Algorisme per comprimir i descomprimir dades de vídeo; els més comuns són H.264, H.265(HEVC), VP8, VP9, AV1; la codificació determina la taxa de compressió i la qualitat d'imatge, i la codificació compatible amb el navegador determina si el vídeo es pot reproduir.
- Depuració d'API
- Procés de verificació de la correcció de les dades durant el desenvolupament d'interfícies frontend-backend; aquesta eina es pot utilitzar per previsualitzar ràpidament si les dades de vídeo Base64 retornades per l'API són correctes, sense necessitat d'escriure codi de descodificació frontend.
- Chrome DevTools
- Eines de desenvolupament integrades al navegador Chrome; el panell Network permet veure les sol·licituds i respostes d'API, i se'n poden copiar les dades de vídeo Base64 per a la depuració.
- Caràcter de Farciment =
- Al final de la codificació Base64 poden aparèixer 1 o 2 signes igual, utilitzats per omplir la longitud del resultat de codificació a un múltiple de 4; si el farciment falta durant la descodificació pot causar errors, l'eina pot corregir automàticament els problemes de farciment.
Taula de Comparació de Tipus MIME de Vídeo Web i Compatibilitat
| Tipus MIME | Format Contenidor | Codificació de Vídeo Comuna | Codificació d'Àudio Comuna | Compatibilitat de Navegadors | Extensió de Fitxer |
|---|---|---|---|---|---|
| video/mp4 | MP4 (MPEG-4 Part 14) | H.264/AVC, H.265/HEVC, AV1 | AAC, MP3 | Tots els navegadors moderns (Chrome/Firefox/Safari/Edge/iOS/Android), la combinació H.264+AAC és 100% compatible | .mp4, .m4v |
| video/webm | WebM | VP8, VP9, AV1 | Vorbis, Opus | Chrome/Firefox/Edge/Opera amb suport complet, Safari 14.1+ amb suport, iOS Safari 15+ amb suport parcial | .webm |
| video/ogg | Ogg | Theora | Vorbis | Firefox/Chrome antic/Opera amb suport, Safari sense suport, ús actualment reduït | .ogv, .ogg |
| video/quicktime | QuickTime (MOV) | ProRes, H.264 | AAC, PCM | Principalment amb suport a Safari/macOS, altres navegadors amb compatibilitat pobra | .mov |
| video/x-matroska | Matroska | H.264, VP9, AV1, etc. | Diverses codificacions | Suport nadiu del navegador pobre, normalment requereix reproductors de tercers, no recomanat per a ús web | .mkv |
Codis d'Error Comuns en Descodificació de Vídeo Base64 i Solucions
| Símptoma d'Error/Missatge d'Error | Causa Possible | Direcció de Resolució | Solució |
|---|---|---|---|
| atob() reporta error: InvalidCharacterError o "not correctly encoded" | La cadena Base64 conté caràcters no permesos; el prefix Data URL no s'ha eliminat; hi ha espais en blanc/salts de línia | Comproveu si la cadena d'entrada només conté A-Za-z0-9+/=; confirmeu si s'ha eliminat el prefix data: | Elimineu el prefix data:video/...;base64,; traieu tots els salts de línia, espais i tabulacions; comproveu si s'han barrejat caràcters xinesos o caràcters especials |
| La descodificació té èxit però el vídeo no es pot reproduir, mostra "format de vídeo no compatible" | El tipus MIME és incorrecte; la codificació de vídeo no és compatible amb el navegador; la capçalera del fitxer està danyada | Confirmeu si el tipus MIME coincideix amb el format real del vídeo; utilitzeu FFmpeg per comprovar la informació de codificació | Seleccioneu el tipus MIME correcte (MP4 utilitza video/mp4); transcodifiqueu amb FFmpeg a H.264+AAC (MP4); comproveu si l'inici i el final de Base64 són complets |
| El vídeo té imatge però no so, o so però no imatge | Una de les codificacions d'àudio o vídeo no és compatible amb el navegador; la pista d'àudio o vídeo està danyada | Utilitzeu FFmpeg per veure quins fluxos conté el vídeo i les seves codificacions | MP4 ha de ser vídeo H.264 + àudio AAC; WebM utilitza VP8/VP9+Vorbis/Opus; transcodifiqueu novament a un format compatible estàndard |
| La imatge del vídeo apareix amb artefactes, verda o en mosaic | Les dades Base64 no són completes (truncades); les dades s'han danyat durant la descodificació; s'ha perdut un fotograma clau | Compareu la longitud Base64 original, comproveu si la còpia és completa | Torneu a copiar la cadena Base64 completa; comproveu si s'han perdut caràcters durant la transmissió; verifiqueu si el fitxer de vídeo original mateix és normal |
| La mida del vídeo després de la descodificació no coincideix amb la del fitxer original | Error en el maneig del caràcter de farciment Base64 =; problema de codificació en convertir la cadena binària a Uint8Array | Comproveu si la lògica de descodificació maneja correctament el farciment; confirmeu que el rang de charCodeAt és 0-255 | Assegureu-vos que el signe = al final de Base64 es maneja correctament; comproveu si la lògica de conversió Uint8Array és correcta |
| La pàgina es retarda i no respon en descodificar vídeos grans | La descodificació Base64 s'executa al fil principal, bloquejant la UI; el vídeo és massa gran i supera el límit de memòria | Consulteu la mida de les dades Base64; Base64 de més de 10MB (uns 7.5MB de vídeo original) pot causar retards | No es recomana utilitzar Base64 per a vídeos grans; considereu utilitzar Web Worker per a descodificació en segon pla; processament per blocs; canvieu al mètode de càrrega de fitxers |
| Safari pot descodificar però no pot reproduir, Chrome funciona normalment | Safari té requisits més estrictes per a la codificació de vídeo; l'àtom moov no és al principi del fitxer; el Profile/Level de codificació és massa alt | Utilitzeu FFmpeg per comprovar el Profile i Level H.264; comproveu la posició de moov | Afegiu -movflags +faststart en transcodificar; utilitzeu H.264 Baseline/Main Profile, amb Level no superior a 4.1; confirmeu que l'àudio és AAC |
| Data URL assignada directament a video src no es reprodueix | El format Data URL és incorrecte; el tipus MIME està mal escrit; la part Base64 està danyada | Comproveu si el format Data URL és data:video/xxx;base64,xxxx | Confirmeu que el tipus MIME és correcte; la coma és una coma anglesa; la part Base64 és completa; alguns mòbils tenen límits de mida per a Data URL |
Taula de Comparació de Mides de Vídeo Original i Mides Després de Codificació Base64
| Mida de Vídeo Original | Mida Després de Codificació Base64 (aprox.) | Augment de Volum | Despesa de Capçalera Data URL | Apte per a Incrustació | Escenari Típic |
|---|---|---|---|---|---|
| 100 KB | ~133 KB | +33% | Uns 20 bytes | Recomanat | Animacions d'icona molt petites, animacions de càrrega sense so d'uns segons |
| 500 KB | ~667 KB | +33% | Uns 20 bytes | Recomanat | Animacions en bucle curtes, vídeos curts de guia d'operacions, animacions de retroacció de botons |
| 1 MB | ~1.33 MB | +33% | Uns 20 bytes | Depèn del cas | Vídeos de guia de 5-10 segons, animacions de demostració de baixa resolució, vigileu el rendiment de la primera pantalla |
| 2 MB | ~2.67 MB | +33% | Uns 20 bytes | No recomanat | A prop del límit de mida per a vídeo incrustat, augmentarà significativament el temps de càrrega de la pàgina |
| 5 MB | ~6.67 MB | +33% | Uns 20 bytes | No recomanat | Volum excessiu, no es recomana incrustar Base64, utilitzeu un fitxer de vídeo extern |
| 10 MB | ~13.3 MB | +33% | Uns 20 bytes | Prohibit | Impacte greu en la càrrega de la pàgina, pot causar bloquejos per memòria insuficient en mòbils |
| 50 MB | ~66.7 MB | +33% | Uns 20 bytes | Prohibit | No utilitzeu mai Base64 per processar vídeos tan grans, cal utilitzar mètodes de càrrega/pujada de fitxers |
- Comparació Segura de Text
- Conversió Binària
- Xifrat de César
- Codi Morse
- Codificació Hexadecimal
- Base64 a Vídeo
- Imatge a Base64
- Base64 a imatge
- Text a Base64
- Base64 a Text
- Verificador de hash de fitxer
- Fitxer a Base64
- Base64 a Fitxer
- Àudio a Base64
- Base64 a Àudio
- Xifrar i desxifrar AES
- Xifratge i Desxifrat DES
- Codificador i Descodificador Base32
- Base58 Codificació i descodificació
- Codificació Base64
- Descodificació Base64
- Comparació Base64
- Divisor Base64
- Base64 fusió de múltiples línies
- Formateig Base64
- Validació Base64
- Codificació Base64 per lots
- Descodificació per Lots Base64
- Neteja Base64
- Gestió del padding Base64
- Estadístiques Base64
- Base64 a Hex
- Convertidor Base64 DataURL
- Convertidor Base64-Hex
- Codificació Base85
- Generació i Verificació HMAC
- Derivació PBKDF2
- Hash MD5
- Hash SHA-256
- Hash SHA1
- Hash SHA512
- Decodificador, Verificador i Generador JWT
- Codificació d'Entitats HTML
- Unicode Escape
- Codificació URL
- Base64 URL-Safe
- MIME Base64
- Ofuscació de Java
- Ofuscació JS
- Ofuscació de PHP
- Ofuscació de Python
- Convertidor de Vídeo a Base64