Base64 en Vidéo

Entrée Base64

Aperçu vidéo

Convertissez en ligne des données vidéo codées en Base64 en fichiers vidéo MP4/WebM/OGG lisibles. Reconnaît automatiquement le préfixe Data URL ; toutes les opérations sont effectuées localement dans le navigateur, les données vidéo ne sont pas téléchargées sur des serveurs. Idéal pour déboguer les API backend, vérifier le codage vidéo, restaurer des vidéos en ligne dans le frontend. Après décodage, vous pouvez prévisualiser, lire et télécharger directement.

Recommandations connexes

Vidéo vers Base64

Gestion du padding Base64

Vérificateur de hash de fichier

Chiffrement DES

Compression JSON

Formateur SQL

Cas d'utilisation

Déboguer les API vidéo backend : lorsque l'API renvoie des données vidéo codées en Base64, collez-les directement dans l'outil pour prévisualiser rapidement et vérifier si la réponse de l'interface est correcte, sans avoir à écrire de code de décodage frontend
Vérifier la sortie de codage vidéo : après avoir généré une vidéo Base64 avec FFmpeg ou des services de transcodage cloud, décodez et lisez pour vérifier si le résultat du transcodage est normal et diagnostiquer les problèmes de codage corrompu
Restaurer des vidéos en ligne du frontend : extrayez les vidéos en ligne au format Data URL (data:video/mp4;base64,...) de HTML, CSS ou JavaScript, et restaurez-les en fichiers vidéo visibles
Vérification rapide de données vidéo : comparez si deux vidéos Base64 décodent le même contenu, ou vérifiez si une corruption de données s'est produite pendant la transmission Base64
Prévisualisation temporaire de vidéos courtes : pour des fragments de vidéos courtes qui n'ont pas besoin d'être enregistrés localement, prévisualisez et lisez directement dans l'outil, et décidez de les télécharger après avoir confirmé le contenu
Analyse de données de robots d'indexation : restaurez rapidement les données vidéo codées en Base64 récupérées par des robots d'indexation web en fichiers lisibles pour audit ou analyse de contenu
Débogage de développement client : pendant le développement d'applications mobiles ou de mini-programmes, lorsque le backend renvoie une vidéo Base64, utilisez cet outil pour vérifier l'exactitude des données avant de procéder au développement du décodage côté client
Utilisation pour des démonstrations pédagogiques : comme outil de démonstration en ligne lors de l'explication des principes du codage Base64, de la technologie Data URL ou de l'utilisation de Blob/URL.createObjectURL dans le frontend
Prévisualisation de pièces jointes d'e-mail : certains systèmes de messagerie convertissent les pièces jointes en Base64 pour les incruster ; après extraction, vous pouvez rapidement restaurer le contenu de la vidéo pour le visualiser
Assistance à la reproduction de bogues : lorsque l'équipe de tests signale des bogues liés à la vidéo, fournissez les données Base64 pour que les développeurs puissent restaurer rapidement la vidéo et reproduire le scénario du problème

Comment utiliser

Obtenir les données vidéo Base64 : copiez la chaîne vidéo codée en Base64 depuis des réponses API, des journaux, du code source HTML, des bases de données, etc. Prend en charge avec ou sans préfixe Data URL
Coller dans la zone d'entrée : collez entièrement le texte Base64 copié dans le champ de saisie de l'outil ; l'outil reconnaîtra automatiquement s'il contient le préfixe data:video/...;base64,
Confirmer ou sélectionner le format : si l'entrée a un préfixe Data URL, l'outil reconnaîtra automatiquement le type MIME ; si c'est du Base64 pur, sélectionnez manuellement le format vidéo correspondant (MP4/WebM/OGG)
Cliquer sur le bouton de décodage : après avoir cliqué sur le bouton de décodage, l'outil exécute les opérations de décodage Base64, conversion Uint8Array, création de Blob, etc., localement dans le navigateur, en affichant des indications d'état pendant le processus
Voir les informations de la vidéo : une fois le décodage terminé, consultez les informations de base de la vidéo, notamment la taille du fichier, le type MIME, la confirmation du format, etc., pour vérifier si le décodage a réussi
Prévisualiser et lire la vidéo : utilisez le lecteur HTML5 intégré à la page pour prévisualiser la vidéo ; faites glisser la barre de progression pour vérifier si le contenu de la vidéo est complet et si l'image et le son sont normaux
Télécharger le fichier vidéo : après avoir confirmé que la vidéo est correcte, cliquez sur le bouton de téléchargement pour enregistrer la vidéo Blob localement ; le fichier correspondra automatiquement à la bonne extension (.mp4/.webm/.ogg)

Fonctionnalités

Reconnaissance intelligente du format d'entrée : détecte automatiquement les chaînes Base64 pures et le format Data URL complet (avec préfixe data:video/...;base64,), pas besoin de supprimer manuellement le préfixe pour décoder
Prise en charge de plusieurs formats vidéo : prend en charge tous les types MIME vidéo compatibles nativement avec les navigateurs modernes, notamment MP4 (video/mp4), WebM (video/webm), OGG (video/ogg)
Traitement local dans le navigateur : toutes les opérations de décodage Base64, génération de Blob et prévisualisation vidéo sont effectuées dans votre navigateur via JavaScript ; les données vidéo ne sont téléchargées sur aucun serveur
Prévisualisation et lecture instantanées : après décodage, un lecteur vidéo HTML5 est généré automatiquement avec des contrôles complets : lecture, pause, glissement de progression, réglage du volume, plein écran, etc.
Téléchargement de fichier original : enregistrez la vidéo décodée en tant que fichier local en un clic ; sélectionne automatiquement la bonne extension de fichier (.mp4/.webm/.ogg) selon le type MIME
Détection automatique du type MIME : reconnaît automatiquement le format vidéo à partir du préfixe Data URL, sans que l'utilisateur ait à le sélectionner manuellement ; pour les entrées Base64 pures, la sélection manuelle du format est prise en charge
Retour de progression de décodage en temps réel : affiche l'état de traitement lors du décodage de données Base64 volumineuses, évitant que l'utilisateur ne pense que la page est bloquée
Affichage des métadonnées de la vidéo : après décodage, affiche des informations de base telles que la taille de la vidéo, le type MIME, la durée (lorsque lisible), la résolution, etc.
Suggestions de diagnostic d'erreurs : fournit des messages d'erreur clairs et des suggestions de résolution lorsque le format d'entrée est incorrect, le codage Base64 est corrompu ou le format vidéo n'est pas pris en charge
Prise en charge du glisser-déposer et du collage : prend en charge le collage direct de texte Base64 ou le glisser-déposer de fichiers texte dans la zone d'entrée, améliorant l'efficacité de débogage
Réparation automatique des problèmes de codage : gère automatiquement les problèmes de format courants tels que les caractères de remplissage (=) manquants dans Base64, les caractères blancs, les sauts de ligne, etc.
Compatibilité multi-navigateurs : prend en charge tous les navigateurs modernes comme Chrome, Firefox, Safari, Edge, en utilisant les API standard atob et Uint8Array
Design responsive : utilisable sur ordinateur comme sur appareils mobiles ; décode et prévisualise correctement les vidéos courtes sur téléphones et tablettes
Garantie de confidentialité et de sécurité : les données vidéo sont traitées entièrement dans la mémoire locale ; à la fermeture de la page, les données sont immédiatement supprimées, sans laisser de cache ni d'enregistrements

FAQ

Quels formats vidéo l'outil Base64 en vidéo prend-il en charge ?

Prend en charge les principaux formats vidéo lisibles nativement par les navigateurs : MP4 (video/mp4, codage H.264+AAC), WebM (video/webm, codage VP8/VP9+Vorbis/Opus), OGG (video/ogg, codage Theora+Vorbis). Parmi eux, le format MP4 a la meilleure compatibilité, pris en charge par tous les navigateurs modernes et appareils mobiles ; il est recommandé de l'utiliser en priorité. Si votre vidéo est dans d'autres formats (comme MOV, AVI, MKV), vous devez d'abord la transcodée en MP4(H.264+AAC) avec FFmpeg avant d'effectuer le codage Base64.

L'entrée doit-elle avoir le préfixe data:video/mp4;base64 ?

Non. L'outil prend en charge deux formats d'entrée : ① chaîne Base64 pure (sans aucun préfixe) ; ② Data URL complet (avec préfixe data:video/xxx;base64,). L'outil détectera automatiquement si l'entrée contient le préfixe ; si c'est le cas, il extraira automatiquement le contenu Base64 et reconnaîtra le type MIME. Il est recommandé de copier directement le contenu complet renvoyé par l'API, sans avoir à traiter le préfixe manuellement.

La vidéo décodée peut-elle être lue directement dans le navigateur ?

Oui. Une fois le décodage terminé, l'outil générera un lecteur vidéo HTML5 intégré avec des fonctionnalités complètes : lecture/pause, glissement de barre de progression, réglage du volume, lecture en plein écran, etc. Vous pouvez prévisualiser directement le contenu de la vidéo sur la page et décider de la télécharger localement après avoir confirmé que l'image et le son sont normaux.

Les vidéos Base64 volumineuses sont-elles prises en charge ? Y a-t-il une limite de taille ?

L'outil lui-même n'a pas de limites de taille strictes, mais les navigateurs ont des limites de mémoire et de performances. Le codage Base64 augmente le volume de la vidéo d'environ 33% ; pendant le décodage, le navigateur doit allouer de la mémoire pour stocker plusieurs copies : chaîne Base64, chaîne binaire, Uint8Array, Blob, etc. ; la mémoire maximale peut être de 3 à 5 fois la taille de la vidéo originale. Il est recommandé de traiter des Base64 de moins de 5Mo (correspondant à environ 3,7Mo de vidéo originale) pour un fonctionnement fluide ; des Base64 de plus de 10Mo peuvent causer des blocages de page. Pour les vidéos volumineuses, il est déconseillé d'utiliser la méthode Base64 ; il est recommandé d'utiliser les méthodes traditionnelles de téléchargement de fichiers et de chargement par URL.

Les données vidéo seront-elles téléchargées sur le serveur ? La confidentialité est-elle assurée ?

Toutes les opérations de décodage sont effectuées entièrement dans votre navigateur local via JavaScript ; les données vidéo ne sont téléchargées sur aucun serveur et aucune requête réseau n'est envoyée. À la fermeture de la page, les données vidéo sont immédiatement supprimées de la mémoire du navigateur, sans laisser de cache ni d'enregistrements. Vous pouvez déconnecter le réseau et utiliser cet outil ; la fonction de décodage fonctionnera toujours normalement.

Pourquoi la vidéo codée en Base64 est-elle 1/3 plus grosse que le fichier original ?

Cela est déterminé par le principe du codage Base64, ce n'est pas un problème de l'outil. Base64 recode chaque 3 octets (24 bits) de données binaires en 4 caractères ASCII (chaque caractère occupe 1 octet), donc le volume après codage est de 4/3 ≈ 133% de l'original, c'est-à-dire une augmentation d'environ 33%. Si la longueur des données originales n'est pas un multiple de 3, la fin sera remplie de signes = ; l'augmentation de volume réelle est d'environ 33%-37%. Cette augmentation de volume est commune à tous les codages Base64, ce n'est pas un problème de cet outil.

Pourquoi mon MP4 Base64 ne se lit-il pas après décodage ?

MP4 n'est qu'un format conteneur ; le codage vidéo à l'intérieur doit être un format pris en charge par le navigateur pour pouvoir être lu. Dans 99% des cas, c'est parce que le codage vidéo n'est pas H.264, ou le codage audio n'est pas AAC. Par exemple, si le MP4 contient des codages comme H.265(HEVC), AV1, etc., il est possible que le navigateur ne puisse pas le lire. Vous pouvez utiliser la commande FFmpeg ffmpeg -i input.mp4 pour voir les informations de codage ; si ce n'est pas H.264+AAC, utilisez la commande ffmpeg -i input.mp4 -c:v libx264 -c:a aac -movflags +faststart output.mp4 pour transcodé puis coder en Base64. De plus, confirmez que le type MIME est configuré comme video/mp4 et que les données Base64 sont complètes sans troncature.

Comment vérifier que le codage de ma vidéo est compatible avec le navigateur ?

Il est recommandé d'utiliser l'outil FFmpeg pour vérifier : après avoir installé FFmpeg, exécutez ffmpeg -i yourvideo.mp4 et consultez les lignes Video et Audio dans les informations de sortie. La ligne Video doit contenir h264 (ou avc), et la ligne Audio doit contenir aac. Par exemple : Stream #0:0(eng): Video: h264 (avc1/0x31637661...), Stream #0:1(eng): Audio: aac (mp4a/0x6134706D...). Si ce ne sont pas ces deux codages, vous devez transcodé. Vous pouvez également faire glisser directement le fichier vidéo original dans la fenêtre du navigateur Chrome ; s'il se lit directement, cela signifie que le codage est compatible avec le navigateur.

Quelle est l'extension du fichier vidéo téléchargé après décodage ?

L'outil sélectionnera automatiquement la bonne extension de fichier selon le type MIME que vous avez choisi (ou reconnu automatiquement) : video/mp4 correspond à .mp4, video/webm correspond à .webm, video/ogg correspond à .ogv. Vous n'avez pas besoin de modifier l'extension manuellement ; le fichier téléchargé peut être ouvert directement avec le lecteur par défaut du système.

Les sauts de ligne et espaces dans la chaîne Base64 affectent-ils le décodage ?

Ils n'affectent pas. L'outil traitera automatiquement les caractères blancs comme les sauts de ligne (\n), les retours chariot (\r), les espaces, les tabulations, etc., dans la chaîne Base64 ; ces caractères seront supprimés avant le décodage. Par conséquent, même si votre Base64 est en format multi-lignes (comme le format MIME avec des sauts de ligne tous les 76 caractères), ou si des espaces de mise en forme ont été introduits lors de la copie, il peut être décodé normalement.

Comment implémenter Base64 en vidéo avec JavaScript dans le frontend ?

La logique centrale du code est la suivante : ① supprimez le préfixe Data URL pour obtenir du Base64 pur ; ② décodez en chaîne binaire avec atob(base64Str) ; ③ convertissez la chaîne binaire en Uint8Array (parcourez chaque caractère pour obtenir charCode) ; ④ créez Blob avec new Blob([uint8Array], {type: 'video/mp4'}) ; ⑤ générez une URL temporaire avec URL.createObjectURL(blob) ; ⑥ définissez l'URL sur video.src. Note : après utilisation, appelez URL.revokeObjectURL(url) pour libérer la mémoire et éviter les fuites de mémoire.

Quelle est la différence entre Data URL vidéo et Blob URL vidéo ?

Data URL écrit toutes les données Base64 directement dans l'URL, au format data:video/mp4;base64,XXXX ; l'URL elle-même contient toutes les données ; Blob URL est une référence temporaire au format blob:// générée par URL.createObjectURL(), qui pointe vers l'objet Blob dans la mémoire du navigateur ; l'URL elle-même est courte et ne contient pas de données. Data URL doit analyser toute la chaîne Base64 à chaque utilisation, avec de moins bonnes performances ; Blob URL est plus efficace, adapté à la lecture et à la réutilisation. Cet outil utilise en interne la méthode Blob URL pour implémenter le lecteur.

Quels cas sont adaptés au codage de vidéo avec Base64 ? Quels cas ne le sont pas ?

Cas adaptés : ① vidéos courtes de quelques Mo (animations de chargement, aides de guide, animations d'icônes) ; ② Demos/documents qui ont besoin d'incruster une vidéo dans un seul fichier HTML ; ③ petites vidéos incrustées dans des e-mails ; ④ transfert temporaire de petites vidéos lors du débogage d'API. Cas non adaptés : ① vidéos de plus de 5Mo (l'augmentation de volume de 33% gaspille trop de bande passante) ; ② vidéos téléchargées par les utilisateurs (volume incontrôlable) ; ③ vidéos longues nécessitant un chargement en continu ou un défilement de progression ; ④ vidéos qui ont besoin d'être mises en cache et réutilisées par le navigateur (Data URL ne peut pas être mis en cache séparément) ; ⑤ contenu vidéo destiné aux utilisateurs en production (il faut utiliser CDN et URL de fichiers externes).

Pourquoi la vidéo se lit-elle normalement sur Safari après décodage, mais pas sur Chrome ?

Cette situation est relativement rare, généralement due au fait que le codage de la vidéo est H.265(HEVC) : Safari a une meilleure prise en charge de H.265 sur macOS et iOS (avec accélération matérielle), mais Chrome et Firefox ont une prise en charge limitée de H.265 (nécessitent matériel et licence). La solution est de transcodé en codage H.264, qui est le codage universel compatible avec tous les navigateurs. Inversement, il est plus fréquent que Chrome lise et Safari ne lise pas ; généralement dû au fait que le Profile/Level de codage est trop élevé ou que le moov atom est à la fin du fichier.

Y a-t-il une perte de qualité d'image lors de la conversion entre vidéo Base64 et fichiers vidéo ?

Il n'y a pas de perte de qualité d'image. Base64 est une méthode de codage, pas une compression ni un transcodage ; il effectue simplement une conversion de correspondance un pour un entre données binaires et chaînes de texte. Convertir une vidéo en Base64 puis la décoder en retour donne des données binaires complètement identiques au fichier vidéo original (identiques octet par octet), sans aucune perte de qualité d'image ou de son ; c'est similaire à copier-coller des fichiers plutôt qu'à une conversion par compression. Tant que le processus de codage et décodage Base64 est correct, la qualité de la vidéo est exactement la même que celle du fichier original.

Dépannage

La vidéo ne se lit pas après le décodage Base64 ; la vidéo HTML5 affiche format non pris en charge ou écran noir

Configuration incorrecte du type MIME : la vidéo MP4 est configurée comme video/webm, ou un autre type qui ne correspond pas Le codage vidéo n'est pas un format pris en charge par le navigateur : par exemple, le MP4 contient un codage H.265 au lieu de H.264 Les données Base64 ont été tronquées lors de la copie, manquant des parties au début ou à la fin, ce qui cause une corruption du fichier Erreur de traitement du préfixe Data URL : le préfixe a aussi été décodé comme Base64, ou des caractères initiaux de Base64 ont été supprimés par erreur en retirant le préfixe La vidéo originale elle-même est corrompue, ou est un format spécial non pris en charge par le navigateur La résolution de la vidéo dépasse les limites du navigateur, ou utilise un format de pixel non pris en charge par le navigateur (comme YUV 10 bits) L'en-tête du fichier vidéo (ftyp atom) est corrompu, le navigateur ne peut pas reconnaître le format conteneur MP4

La fonction atob() lève InvalidCharacterError et le décodage échoue

La chaîne Base64 contient des caractères non valides : le jeu de caractères standard Base64 ne comporte que 65 caractères : A-Z, a-z, 0-9, +, /, = Le préfixe Data URL data:video/mp4;base64, n'a pas été supprimé avant d'être passé directement à atob() Des caractères blancs comme des sauts de ligne \n, des retours chariot \r, des espaces, des tabulations se sont mélangés dans la chaîne Lors de la copie depuis Word/pages web, etc., des signes de ponctuation chinois, des caractères pleine chasseur ou des caractères spéciaux invisibles ont été introduits La chaîne Base64 a été codée en URL (le signe + est devenu %2B, la barre / est devenue %2F), il faut d'abord la décoder en URL La longueur de la chaîne Base64 n'est pas un multiple de 4, et l'absence du caractère de remplissage = fait échouer la validation d'atob Certains langages backend (comme Java, Python) utilisent des variantes de Base64 sécurisées pour les URL (- et _ à la place de + et /) dans leurs encodeurs Base64

La vidéo se lit normalement sur Chrome/Firefox, mais ne se lit pas sur Safari

Safari a des exigences plus strictes en matière de Profile et Level de codage H.264 ; des configurations avancées comme High Profile Level 5.1 peuvent ne pas être prises en charge Le moov atom (métadonnées) du fichier MP4 est à la fin du fichier au lieu du début ; Safari doit attendre que tout soit téléchargé pour lire Le codage audio n'est pas AAC ; Safari a une mauvaise prise en charge d'autres audios comme MP3 dans le conteneur MP4 La résolution ou le débit binaire de la vidéo est trop élevé, dépassant la capacité de décodage matériel de Safari (en particulier iOS Safari) Des fonctionnalités de codage non prises en charge par Safari ont été utilisées, comme la profondeur de couleur 10 bits, certaines fonctionnalités de H.264 iOS Safari nécessite que la vidéo définisse l'attribut playsinline pour être lue en ligne ; sinon, elle se lira en plein écran ou ne se lira pas Safari a des exigences sur la fréquence d'échantillonnage de la piste audio ; des fréquences d'échantillonnage non standard (autres que 44.1kHz/48kHz) peuvent causer des échecs de lecture

La page se bloque et le navigateur plante lors du décodage de vidéos Base64 volumineuses

JavaScript est mono-thread ; la conversion atob() et Uint8Array s'exécute sur le thread principal, ce qui bloque le rendu de l'UI Pendant le décodage Base64, plusieurs grandes chaînes et tableaux sont générés, avec une consommation mémoire élevée (la mémoire maximale lors du décodage de Base64 de 10Mo peut occuper plusieurs dizaines de Mo) La création de Blob et Object URL nécessite également de la mémoire ; les vidéos volumineuses déclenchent facilement les limites de mémoire du navigateur Les appareils mobiles ont moins de mémoire et sont plus sujets aux plantages par OOM (manque de mémoire) Web Worker n'est pas utilisé ; toutes les opérations s'effectuent sur le thread principal, bloquant la boucle d'événements Les navigateurs ont des limites sur la longueur des chaînes individuelles (le moteur V8 a une limite d'environ 512Mo à 1Go) ; les chaînes Base64 extrêmement longues peuvent ne pas être analysées correctement Le ramasse-miettes (GC) fréquent pendant le décodage cause également des blocages de page et des retards de réponse

Le Base64 copié depuis la réponse API se décode en une vidéo corrompue qui ne peut pas être lue

Le backend a automatiquement échappé des caractères spéciaux en renvoyant Base64 (par exemple, + est devenu espace, ou problèmes d'échappement JSON) L'analyse JSON n'a pas traité correctement les caractères spéciaux dans la chaîne Base64 Erreur de codage Base64 côté backend, par exemple, des données binaires traitées comme une chaîne UTF-8 Données modifiées pendant la compression gzip ou la transmission HTTP Lors de la copie depuis Chrome DevTools, la prévisualisation Response dans le panneau Network peut tronquer ou échapper les longues chaînes Le backend a utilisé une variante de Base64 différente (comme Base64 sécurisé pour URL, qui utilise - et _ à la place de + et /) et le frontend ne l'a pas traité La réponse API a été paginée ou tronquée, les données Base64 sont incomplètes

La vidéo n'a que l'image sans le son, ou le son et l'image ne sont pas synchronisés

Le codage audio n'est pas pris en charge par le navigateur : par exemple, le MP4 utilise MP3 ou Opus au lieu de AAC Les paramètres audio ont été mal configurés lors du transcodage de la vidéo, ce qui a causé des erreurs d'horodatage (PTS/DTS) Données Base64 incomplètes, qui ont tronqué juste une partie des données de la piste audio La vidéo a une fréquence d'images variable (VFR) ; certains navigateurs ont une mauvaise prise en charge des vidéos VFR, ce qui cause une désynchronisation audiovisuelle La vidéo originale elle-même a des problèmes de synchronisation audiovisuelle, non causés par le décodage Base64 La fréquence d'échantillonnage audio ou le nombre de canaux ne sont pas pris en charge par le navigateur, ce qui cause un échec de décodage de la piste audio La base de temps (timebase) de la piste audio et de la piste vidéo dans le conteneur vidéo n'est pas cohérente, ce qui cause une déviation de synchronisation lors de la lecture

Glossaire

Base64: Méthode de codage qui représente des données binaires à l'aide de 64 caractères imprimables ; chaque 3 octets de données binaires sont codés en 4 octets de texte ASCII, avec une augmentation de volume d'environ 33%, couramment utilisée pour transmettre des données binaires dans des protocoles texte.
Data URL: Schéma URI défini dans la RFC 2397, au format data:[mediatype][;base64],data, qui permet d'incruster de petits fichiers directement dans des documents sans nécessiter de requêtes HTTP supplémentaires.
MIME type: Identifiant de type de média qui indique le format d'un document ou d'un fichier ; les formats vidéo commencent par video/, comme video/mp4, video/webm, video/ogg. Le navigateur détermine comment traiter la ressource en fonction du type MIME.
Blob: Binary Large Object (grand objet binaire), objet représentant des données binaires brutes immuables dans le navigateur, peut être utilisé pour stocker des données de fichiers comme des vidéos et des images, et génère une URL accessible via URL.createObjectURL().
atob(): Fonction intégrée du navigateur utilisée pour décoder des chaînes codées en Base64 en chaînes binaires (ASCII to Binary) ; la fonction de codage correspondante est btoa() (Binary to ASCII).
btoa(): Fonction intégrée du navigateur utilisée pour coder des chaînes binaires en chaînes Base64 (Binary to ASCII), est l'opération inverse de atob(), utilisée lors de la conversion de vidéo en Base64.
Uint8Array: Tableau typé JavaScript qui stocke des entiers non signés de 8 bits (0-255), chaque élément correspond à un octet ; c'est la méthode standard pour traiter des données binaires ; après le décodage Base64, il faut le convertir en Uint8Array avant de créer Blob.
MP4: MPEG-4 Part 14, un format conteneur multimédia courant qui empaquette généralement le codage vidéo H.264 et le codage audio AAC, avec la meilleure compatibilité web et une extension de fichier .mp4.
WebM: Format conteneur vidéo open source sans redevances lancé par Google, qui utilise généralement le codage vidéo VP8/VP9/AV1 et le codage audio Vorbis/Opus ; son taux de compression est supérieur à celui de MP4, bien pris en charge sur Chrome/Firefox/Edge.
OGG: Format conteneur multimédia open source développé par la Fondation Xiph ; la vidéo est généralement codée avec Theora et l'audio avec Vorbis ; il est actuellement progressivement remplacé par WebM, avec une extension de fichier .ogv.
H.264/AVC: Norme de codage vidéo la plus utilisée actuellement, aussi appelée AVC (Advanced Video Coding), avec un bon équilibre entre taux de compression et qualité, prise en charge de l'accélération matérielle, codage vidéo standard pour le conteneur MP4, compatible avec tous les navigateurs.
AAC: Advanced Audio Coding, codage audio avancé, codage audio standard pour le conteneur MP4, successeur du format MP3 ; à qualité égale, les fichiers sont plus petits, compatible avec tous les navigateurs modernes.
Object URL: URL temporaire créée via URL.createObjectURL(blob), au format blob://..., peut être utilisée directement dans l'attribut src de balises comme video/img, pointe vers des données Blob en mémoire ; il faut la libérer avec revokeObjectURL après utilisation.
FFmpeg: Outil de traitement audio et vidéo open source, pouvant être utilisé pour le transcodage, le montage, la visualisation d'informations de codage, la compression et d'autres opérations vidéo ; c'est l'outil standard de l'industrie pour traiter la vidéo, essentiel pour vérifier et convertir les codages vidéo.
moov atom: Atome de métadonnées dans les fichiers MP4 qui contient des données clés comme la durée de la vidéo, la résolution, les informations de codage, les paramètres de décodage, etc. Pour que la vidéo se lise rapidement, moov doit être au début du fichier (faststart) pour les vidéos web.
Format conteneur: Format de fichier qui empaquette des flux vidéo, des flux audio, des sous-titres et des métadonnées, comme MP4, WebM, OGG, MKV ; le format conteneur n'est pas égal au format de codage, un même conteneur peut empaqueter différents codages.
Codage vidéo: Algorithme pour compresser et décompresser des données vidéo ; les plus courants sont H.264, H.265(HEVC), VP8, VP9, AV1 ; le codage détermine le taux de compression et la qualité d'image ; la prise en charge du codage par le navigateur détermine si la vidéo peut être lue.
Débogage d'API: Processus de vérification de l'exactitude des données lors du développement d'interfaces frontend et backend ; cet outil peut être utilisé pour prévisualiser rapidement si les données vidéo Base64 renvoyées par l'API sont correctes, sans avoir à écrire de code de décodage frontend.
Chrome DevTools: Outils de développement intégrés au navigateur Chrome ; le panneau Network permet de voir les requêtes et réponses API, depuis lesquelles on peut copier des données vidéo Base64 pour le débogage.
Caractère de remplissage =: À la fin du codage Base64 peuvent apparaître 1 ou 2 signes égal, utilisés pour remplir la longueur du résultat de codage à un multiple de 4 ; un remplissage manquant lors du décodage peut causer des erreurs, l'outil peut réparer automatiquement les problèmes de remplissage.

Tableau de comparaison des types MIME vidéo web et compatibilité

Type MIME	Format conteneur	Codage vidéo courant	Codage audio courant	Compatibilité navigateurs	Extension de fichier
video/mp4	MP4 (MPEG-4 Part 14)	H.264/AVC, H.265/HEVC, AV1	AAC, MP3	Tous les navigateurs modernes (Chrome/Firefox/Safari/Edge/iOS/Android), la combinaison H.264+AAC est 100% compatible	.mp4, .m4v
video/webm	WebM	VP8, VP9, AV1	Vorbis, Opus	Chrome/Firefox/Edge/Opera entièrement compatible, Safari 14.1+ est compatible, iOS Safari 15+ est partiellement compatible	.webm
video/ogg	Ogg	Theora	Vorbis	Firefox/anciennes versions de Chrome/Opera compatibles, Safari non compatible, actuellement peu utilisé	.ogv, .ogg
video/quicktime	QuickTime (MOV)	ProRes, H.264	AAC, PCM	Principalement compatible avec Safari/macOS, mauvaise compatibilité avec les autres navigateurs	.mov
video/x-matroska	Matroska	H.264, VP9, AV1, etc.	Divers codages	Mauvaise compatibilité native avec les navigateurs, nécessite généralement un lecteur tiers, déconseillé pour une utilisation web	.mkv

Codes d'erreur courants lors du décodage vidéo Base64 et solutions

Symptôme/message d'erreur	Cause possible	Piste de résolution	Solution
Erreur atob(): InvalidCharacterError ou "not correctly encoded"	La chaîne Base64 contient des caractères non valides ; le préfixe Data URL n'a pas été supprimé ; présence de caractères blancs/sauts de ligne	Vérifiez si la chaîne d'entrée ne contient que A-Za-z0-9+/= ; confirmez si le préfixe data: a été supprimé	Supprimez le préfixe data:video/...;base64, ; supprimez tous les sauts de ligne, espaces, tabulations ; vérifiez s'il y a des caractères chinois ou spéciaux mélangés
Le décodage réussit mais la vidéo ne se lit pas, affiche "format vidéo non pris en charge"	Type MIME incorrect ; le codage vidéo n'est pas pris en charge par le navigateur ; l'en-tête du fichier est corrompu	Confirmez si le type MIME correspond au format réel de la vidéo ; utilisez FFmpeg pour vérifier les informations de codage	Sélectionnez le bon type MIME (utilisez video/mp4 pour MP4) ; transcodez avec FFmpeg en H.264+AAC (MP4) ; vérifiez si le début et la fin de Base64 sont complets
La vidéo a l'image mais pas le son, ou a le son mais pas l'image	L'un des codages audio ou vidéo n'est pas pris en charge par le navigateur ; la piste audio ou la piste vidéo est corrompue	Utilisez FFmpeg pour voir quels flux contient la vidéo et leurs codages	MP4 doit être vidéo H.264+audio AAC ; WebM utilise VP8/VP9+Vorbis/Opus ; retranscodez dans un format compatible standard
L'image de la vidéo présente des distorsions, écran vert, mosaïque	Données Base64 incomplètes (tronquées) ; données corrompues pendant le décodage ; perte d'images clés	Comparez la longueur de Base64 originale, vérifiez si la copie est complète	Recopiez la chaîne Base64 complète ; vérifiez s'il y a une perte de caractères pendant la transmission ; vérifiez si le fichier vidéo original lui-même est normal
La taille de la vidéo décodée ne correspond pas à celle du fichier original	Erreur de traitement du caractère de remplissage = de Base64 ; problème de codage lors de la conversion de chaîne binaire en Uint8Array	Vérifiez si la logique de décodage traite correctement le remplissage ; confirmez que la plage de charCodeAt est 0-255	Assurez-vous que les signes = à la fin de Base64 sont traités correctement ; vérifiez que la logique de conversion de Uint8Array est correcte
La page se bloque et ne répond pas lors du décodage de vidéos volumineuses	Le décodage Base64 s'exécute sur le thread principal, bloquant l'UI ; la vidéo est trop grosse et dépasse la limite de mémoire	Consultez la taille des données Base64 ; Base64 de plus de 10Mo (environ 7,5Mo de vidéo originale) peut causer des blocages	Il est déconseillé d'utiliser Base64 pour les vidéos volumineuses ; envisagez d'utiliser Web Worker pour décoder en arrière-plan ; traitez par fragments ; passez à la méthode de téléchargement de fichiers
Safari peut décoder mais ne pas lire, Chrome fonctionne correctement	Safari a des exigences plus strictes en matière de codage vidéo ; le moov atom n'est pas au début du fichier ; le Profile/Level de codage est trop élevé	Utilisez FFmpeg pour vérifier H.264 Profile et Level ; vérifiez la position de moov	Ajoutez -movflags +faststart lors du transcodage ; utilisez H.264 Baseline/Main Profile, Level ne dépassant pas 4.1 ; confirmez que l'audio est AAC
Définir Data URL directement sur video src ne lit pas la vidéo	Format Data URL incorrect ; type MIME mal écrit ; partie Base64 corrompue	Vérifiez si le format Data URL est data:video/xxx;base64,xxxx	Confirmez que le type MIME est correct ; la virgule est une virgule anglaise ; la partie Base64 est complète ; certains mobiles ont des limites de taille pour Data URL

Tableau de comparaison entre taille de vidéo originale et taille après codage Base64

Taille de vidéo originale	Taille après codage Base64 (env.)	Augmentation de volume	Surcharge d'en-tête Data URL	Adapté à l'incrustation ?	Scénario typique
100 KB	~133 KB	+33%	Environ 20 octets	Recommandé	Animations d'icônes extrêmement petites, animations de chargement sans son de quelques secondes
500 KB	~667 KB	+33%	Environ 20 octets	Recommandé	Animations en boucle courtes, vidéos courtes d'aide à l'opération, animations de retour de bouton
1 MB	~1.33 MB	+33%	Environ 20 octets	Selon le cas	Vidéos de guide de 5-10 secondes, animations de démonstration basse résolution ; faites attention aux performances de la première page
2 MB	~2.67 MB	+33%	Environ 20 octets	Déconseillé	Proche de la limite de volume pour les vidéos incrustées, augmentera considérablement le temps de chargement de la page
5 MB	~6.67 MB	+33%	Environ 20 octets	Déconseillé	Volume trop important, déconseillé d'incruster en Base64 ; utilisez des fichiers vidéo externes
10 MB	~13.3 MB	+33%	Environ 20 octets	Interdit	Affecte gravement le chargement de la page, peut causer des plantages par manque de mémoire sur mobile
50 MB	~66.7 MB	+33%	Environ 20 octets	Interdit	N'utilisez absolument pas Base64 pour traiter des vidéos aussi grosses ; vous devez utiliser des méthodes de téléchargement/chargement de fichiers