Base64 в видео

Ввод Base64

Видео Preview

Онлайн-восстановление закодированных в Base64 видеоданных в воспроизводимые видеофайлы MP4/WebM/OGG. Поддерживает автоматическое распознавание префикса Data URL, все операции выполняются локально в браузере без загрузки видеоданных на сервер. Подходит для отладки бэкенд API интерфейсов, проверки видеокодирования и восстановления встроенных видео на фронтенде. После декодирования доступны мгновенный предпросмотр и загрузка.

Варианты использования

Отладка бэкенд видеоинтерфейсов: когда API возвращает закодированные в Base64 видеоданные, просто вставьте их в инструмент для быстрого предпросмотра и проверки корректности ответа интерфейса без написания фронтенд кода декодирования
Проверка вывода видеокодирования: после генерации Base64 видео с помощью FFmpeg или облачных сервисов перекодирования декодируйте и воспроизведите, чтобы проверить корректность результата и выявить проблемы с поврежденным кодированием
Восстановление встроенных видео на фронтенде: извлекайте встроенные видео в формате Data URL (data:video/mp4;base64,...) из HTML, CSS или JavaScript и восстанавливайте их в просматриваемые видеофайлы
Быстрая проверка видеоданных: сравнивайте, дают ли два Base64 видео одинаковое содержимое при декодировании, или проверяйте наличие повреждений данных при передаче Base64
Временный предпросмотр коротких видео: для коротких видеофрагментов, которые не нужно сохранять локально, просматривайте воспроизведение прямо в инструменте и решайте, загружать ли файл после подтверждения содержимого
Парсинг данных веб-скраперов: быстро восстанавливайте закодированные в Base64 видеоданные, полученные веб-скраперами, в воспроизводимые файлы для модерации или анализа контента
Отладка клиентской разработки: при разработке мобильных приложений и мини-приложений, когда бэкенд возвращает Base64 видео, используйте этот инструмент для проверки корректности данных перед разработкой клиентского декодирования
Использование в обучении и демонстрациях: как онлайн-демонстрационный инструмент при объяснении принципов кодирования Base64, технологии Data URL, использования Blob/URL.createObjectURL на фронтенде
Предпросмотр вложений электронной почты: некоторые почтовые системы преобразуют вложения в Base64 для встраивания — после извлечения можно быстро восстановить и просмотреть видеоконтент
Помощь в воспроизведении багов: когда тестовая команда сообщает о видео-багах, предоставляйте данные Base64, чтобы разработчики могли быстро восстановить видео и воспроизвести проблемную ситуацию

Как использовать

Получите видеоданные Base64: скопируйте закодированную в Base64 видеостроку из ответа API, логов, исходного кода HTML, базы данных и т.д., поддерживается как с префиксом Data URL, так и без него
Вставьте в область ввода: полностью вставьте скопированный текст Base64 в поле ввода инструмента, инструмент автоматически определит наличие префикса data:video/...;base64,
Подтвердите или выберите формат: если ввод содержит префикс Data URL, инструмент автоматически распознает MIME тип; если это чистая Base64, вручную выберите соответствующий видеоформат (MP4/WebM/OGG)
Нажмите кнопку декодирования: после нажатия кнопки декодирования инструмент локально в браузере выполняет операции декодирования Base64, преобразования Uint8Array, создания Blob и т.д., в процессе отображается подсказка о статусе
Просмотрите информацию о видео: после завершения декодирования просмотрите основную информацию о видео, включая размер файла, MIME тип, подтверждение формата, чтобы проверить успешность декодирования
Воспроизведите видео: используйте встроенный в страницу HTML5 плеер для предпросмотра видео, перетаскивайте ползунок прогресса, чтобы проверить полноту видеоконтента, корректность изображения и звука
Загрузите видеофайл: после подтверждения корректности видео нажмите кнопку загрузки, чтобы сохранить Blob видео локально, файлу автоматически будет присвоено правильное расширение (.mp4/.webm/.ogg)

Функции

Интеллектуальное распознавание формата ввода: автоматически определяет чистую кодировку Base64 и полный формат Data URL (префикс data:video/...;base64,), декодирует без необходимости ручного удаления префикса
Поддержка множества видеоформатов: полная поддержка MIME типов видео, нативно поддерживаемых современными браузерами — MP4 (video/mp4), WebM (video/webm), OGG (video/ogg)
Локальная обработка в браузере: все операции декодирования Base64, создания Blob и предпросмотра видео выполняются полностью в браузере пользователя через JavaScript, видеоданные не загружаются ни на какие серверы
Мгновенное воспроизведение: после декодирования автоматически создается HTML5 видеоплеер с полными элементами управления — воспроизведение, пауза, перемотка, регулировка громкости, полноэкранный режим
Загрузка исходного файла: сохраните декодированное видео в локальный файл в один клик, правильное расширение файла (.mp4/.webm/.ogg) выбирается автоматически по MIME типу
Автоматическое определение MIME типа: автоматически распознает видеоформат из префикса Data URL, не требуя ручного выбора; при вводе чистой Base64 поддерживается ручное указание формата
Индикация прогресса декодирования в реальном времени: при декодировании больших объемов данных Base64 отображается статус обработки, чтобы пользователь не думал, что страница зависла
Отображение метаданных видео: после декодирования показывается основная информация — размер видео, MIME тип, длительность (при воспроизведении), разрешение
Подсказки по диагностике ошибок: при неверном формате ввода, поврежденной кодировке Base64 или неподдерживаемом видеоформате выводятся понятные сообщения об ошибках и рекомендации по устранению
Поддержка перетаскивания и вставки: поддерживает прямую вставку текста Base64 и перетаскивание текстовых файлов в область ввода для повышения эффективности отладки
Автоматическое исправление проблем кодировки: автоматически обрабатывает распространенные проблемы формата — отсутствие символов заполнения Base64 (=), пробельные символы, символы новой строки
Кроссбраузерная совместимость: поддерживает все современные браузеры Chrome, Firefox, Safari, Edge, использует стандартные API atob и Uint8Array
Адаптивный дизайн: поддерживает использование на десктопе и мобильных устройствах, корректно декодирует и показывает короткие видео на телефонах и планшетах
Гарантия конфиденциальности: видеоданные полностью обрабатываются в локальной памяти, после закрытия страницы данные немедленно удаляются, не оставляя кэша или записей

Часто задаваемые вопросы

Какие видеоформаты поддерживает инструмент Base64 в видео?

Поддерживаются основные нативно воспроизводимые в браузере видеоформаты: MP4 (video/mp4, кодировка H.264+AAC), WebM (video/webm, кодировка VP8/VP9+Vorbis/Opus), OGG (video/ogg, кодировка Theora+Vorbis). Среди них формат MP4 имеет лучшую совместимость, поддерживается всеми современными браузерами и мобильными устройствами, рекомендуется использовать в первую очередь. Если ваше видео в других форматах (например, MOV, AVI, MKV), сначала перекодируйте его в MP4(H.264+AAC) с помощью FFmpeg, а затем выполняйте кодирование Base64.

Нужно ли добавлять префикс data:video/mp4;base64 при вводе?

Нет. Инструмент поддерживает два формата ввода: ①чистая строка Base64 (без каких-либо префиксов); ②полный Data URL (с префиксом data:video/xxx;base64,). Инструмент автоматически определяет наличие префикса во вводе, и если он есть, автоматически извлекает содержимое Base64 и распознает MIME тип. Рекомендуется напрямую копировать полное содержимое, возвращаемое API, без ручной обработки префикса.

Можно ли воспроизвести декодированное видео напрямую в браузере?

Да. После завершения декодирования инструмент создаст встроенный HTML5 видеоплеер с полными функциями — воспроизведение/пауза, перемотка ползунка прогресса, регулировка громкости, полноэкранное воспроизведение. Вы можете напрямую предварительно просмотреть видеоконтент на странице и решить, загружать ли файл локально после подтверждения нормального изображения и звука.

Поддерживается ли обработка больших Base64 видео? Есть ли ограничение по размеру?

Сам инструмент не имеет строгих ограничений по размеру, но у браузеров есть ограничения по памяти и производительности. Кодировка Base64 увеличивает объем видео примерно на 33%, в процессе декодирования браузеру требуется выделить память для хранения нескольких копий — строки Base64, бинарной строки, Uint8Array, Blob и т.д., пиковое потребление памяти может в 3-5 раз превышать размер исходного видео. Рекомендуется обрабатывать Base64 размером до 5 МБ (соответствует примерно 3,7 МБ исходного видео) для плавной работы, Base64 размером более 10 МБ может вызывать подтормаживания страницы. Большие видео не рекомендуется передавать через Base64, используйте традиционные способы загрузки файлов и загрузки по URL.

Загружаются ли видеоданные на сервер? Безопасна ли конфиденциальность?

Все операции декодирования полностью выполняются локально в вашем браузере через JavaScript, видеоданные не загружаются ни на какие серверы и не отправляют никаких сетевых запросов. После закрытия страницы видеоданные немедленно удаляются из памяти браузера, не оставляя кэша или записей. Вы можете отключить сеть и использовать этот инструмент, функция декодирования будет работать нормально.

Почему видео после кодировки Base64 на 1/3 больше исходного файла?

Это определяется принципом кодировки Base64, это не проблема инструмента. Base64 перекодирует каждые 3 байта (24 бита) бинарных данных в 4 ASCII-символа (каждый символ занимает 1 байт), поэтому после кодирования объем составляет 4/3≈133% от исходного, то есть объем увеличивается примерно на 33%. Если длина исходных данных не кратна 3, в конце заполняется знаками =, фактическое увеличение объема составляет примерно 33%-37%. Это увеличение объема — общая черта всех кодировок Base64, это не проблема данного инструмента.

Почему мое MP4 Base64 не воспроизводится после декодирования?

MP4 — это всего лишь контейнерный формат, видеокодек внутри должен быть форматом, поддерживаемым браузером, для воспроизведения. В 99% случаев видеокодек не H.264 или аудиокодек не AAC. Например, в MP4 инкапсулированы кодеки H.265(HEVC), AV1 и т.д., браузер может не воспроизвести. Вы можете использовать команду FFmpeg ffmpeg -i input.mp4 для просмотра информации о кодировании, если это не H.264+AAC, используйте команду ffmpeg -i input.mp4 -c:v libx264 -c:a aac -movflags +faststart output.mp4 для перекодирования, а затем закодируйте в Base64. Также убедитесь, что MIME тип установлен как video/mp4, а данные Base64 полные и не обрезаны.

Как проверить, что мой видеокодек совместим с браузерами?

Рекомендуется использовать инструмент FFmpeg для проверки: после установки FFmpeg выполните ffmpeg -i yourvideo.mp4, посмотрите строки Video и Audio в выводе. Строка Video должна содержать h264 (или avc), строка Audio — aac. Например: Stream #0:0(eng): Video: h264 (avc1/0x31637661...), Stream #0:1(eng): Audio: aac (mp4a/0x6134706D...). Если это не эти два кодека, требуется перекодирование. Также можно напрямую перетащить исходный видеофайл в окно браузера Chrome — если он воспроизводится напрямую, значит кодировка совместима с браузерами.

Какое расширение у видеофайла, загружаемого после декодирования?

Инструмент автоматически подбирает правильное расширение файла по выбранному (или автоматически распознанному) MIME типу: video/mp4 соответствует .mp4, video/webm соответствует .webm, video/ogg соответствует .ogv. Вам не нужно вручную изменять расширение, загруженный файл можно напрямую открыть системным плеером по умолчанию.

Влияют ли символы новой строки и пробелы в строке Base64 на декодирование?

Не влияют. Инструмент автоматически обрабатывает пробельные символы в строке Base64 — символы новой строки (\n), возврата каретки (\r), пробелы, табуляцию и т.д., эти символы удаляются перед декодированием. Поэтому даже если ваш Base64 в многострочном формате (например, формат MIME с переносом строки каждые 76 символов) или при копировании попали пробелы форматирования, декодирование будет нормальным.

Как реализовать преобразование Base64 в видео на фронтенде с помощью JavaScript?

Основная логика кода следующая: ①удалите префикс Data URL для получения чистой Base64; ②декодируйте в бинарную строку с помощью atob(base64Str); ③преобразуйте бинарную строку в Uint8Array (переберите каждый символ и получите charCode); ④создайте Blob с помощью new Blob([uint8Array], {type: 'video/mp4'}); ⑤сгенерируйте временный URL с помощью URL.createObjectURL(blob); ⑥установите URL в video.src. Обратите внимание, что после использования вызовите URL.revokeObjectURL(url) для освобождения памяти, чтобы избежать утечек памяти.

В чем разница между Data URL видео и Blob URL видео?

Data URL записывает полные данные Base64 напрямую в URL, формат data:video/mp4;base64,XXXX, сам URL содержит все данные; Blob URL — это временная ссылка в формате blob://, сгенерированная URL.createObjectURL(), указывает на объект Blob в памяти браузера, сам URL короткий и не содержит данных. Data URL при каждом использовании требует парсинга всей строки Base64, производительность хуже; Blob URL более эффективный, подходит для воспроизведения и переиспользования. Данный инструмент внутри использует способ Blob URL для реализации плеера.

В каких сценариях подходит кодирование видео в Base64? В каких не подходит?

Подходящие сценарии: ①короткие видео размером до нескольких МБ (анимации загрузки, подсказки, анимации иконок); ②видео, которые нужно встроить в Demo/документы с одним HTML файлом; ③встроенные маленькие видео в электронные письма; ④временная передача маленьких видео при отладке API интерфейсов. Неподходящие сценарии: ①видео размером более 5 МБ (увеличение объема на 33% слишком сильно тратит пропускную способность); ②видео, загружаемые пользователями (размер неконтролируем); ③длинные видео, требующие потоковой загрузки или перемотки; ④видео, которые должны кэшироваться и переиспользоваться браузером (Data URL нельзя отдельно кэшировать); ⑤видеоконтент для пользователей в продакшене (следует использовать CDN и URL внешних файлов).

Почему видео после декодирования нормально воспроизводится в Safari, а в Chrome — нет?

Такая ситуация встречается относительно редко, обычно это связано с тем, что видеокодек — H.265(HEVC) — Safari на macOS и iOS хорошо поддерживает H.265 (с аппаратным ускорением), но Chrome и Firefox имеют ограниченную поддержку H.265 (требуют аппаратного обеспечения и лицензий). Решение — перекодирование в кодек H.264, это универсальный кодек, поддерживаемый всеми браузерами. Обратная ситуация, когда Chrome воспроизводит, а Safari нет — более распространена, обычно это связано с слишком высоким Profile/Level кодирования или moov atom в конце файла.

Теряется ли качество изображения при взаимном преобразовании Base64 видео и видеофайлов?

Качество изображения не теряется. Base64 — это способ кодирования, а не сжатие или перекодирование, он просто выполняет преобразование с однозначным соответствием между бинарными данными и текстовыми строками. Видео после преобразования в Base64 и обратного декодирования дает бинарные данные, полностью совпадающие с исходным видеофайлом (побайтово идентичные), без какой-либо потери качества изображения или звука — это похоже на копирование и вставку файла, а не на сжатие и преобразование. При правильном процессе кодирования и декодирования Base64 качество видео полностью совпадает с исходным файлом.

Устранение неполадок

После декодирования Base64 видео не воспроизводится, HTML5 video показывает неподдерживаемый формат или черный экран

Неверно установлен MIME тип: для MP4 видео установлен video/webm или другой несоответствующий тип Видеокодек не поддерживается браузером: например, в MP4 находится кодировка H.265, а не H.264 Данные Base64 были обрезаны в процессе копирования, отсутствует часть в начале или конце, что привело к повреждению файла Неверная обработка префикса Data URL: префикс также декодируется как Base64, или при удалении префикса были ошибочно удалены начальные символы Base64 Исходное видео само по себе повреждено или имеет особый формат, не поддерживаемый браузером Разрешение видео превышает ограничения браузера или используется неподдерживаемый браузером пиксельный формат (например, 10-битный YUV) Поврежден заголовок видеофайла (ftyp atom), браузер не может распознать формат контейнера MP4

Функция atob() выбрасывает InvalidCharacterError, декодирование завершается неудачей

В строке Base64 содержатся недопустимые символы: стандартный набор символов Base64 содержит только 65 символов A-Z, a-z, 0-9, +, /, = Префикс Data URL data:video/mp4;base64, не был удален и передан напрямую в atob() В строку попали символы новой строки \n, возврата каретки \r, пробелы, табуляция и другие пробельные символы При копировании из Word/веб-страниц появились китайские знаки препинания, полноширинные символы или невидимые специальные символы Строка Base64 была URL-кодирована (знак плюса + стал %2B, косая черта / стала %2F), требуется предварительное URL-декодирование Длина строки Base64 не кратна 4, и отсутствие символа заполнения = приводит к неудачной проверке atob Некоторые бэкенд-языки (например, Java, Python) используют URL-безопасный вариант кодировщика Base64 (- и _ вместо + и /)

Видео нормально воспроизводится в Chrome/Firefox, но не воспроизводится в Safari

Safari предъявляет более строгие требования к Profile и Level кодировки H.264, расширенные конфигурации, такие как High Profile Level 5.1, могут не поддерживаться moov atom (метаданные) MP4 файла находится в конце файла, а не в начале, Safari ожидает полную загрузку перед воспроизведением Аудиокодек не AAC, Safari плохо поддерживает другие аудио, такие как MP3, в контейнере MP4 Разрешение или битрейт видео слишком высокие, превышают возможности аппаратного декодирования Safari (особенно iOS Safari) Используются неподдерживаемые Safari функции кодирования, такие как 10-битная глубина цвета, некоторые функции H.264 iOS Safari требует установки атрибута playsinline для видео, чтобы оно воспроизводилось встроенным, иначе будет полноэкранным или не воспроизведется Safari имеет требования к частоте дискретизации аудиодорожки, нестандартные частоты (например, не 44,1 кГц/48 кГц) могут привести к неудаче воспроизведения

При декодировании больших Base64 видео страница подтормаживает, браузер падает

JavaScript — однопоточный, atob() и преобразование Uint8Array выполняются в основном потоке, блокируя отрисовку UI В процессе декодирования Base64 создается несколько больших строк и массивов, высокое потребление памяти (при декодировании Base64 размером 10 МБ пиковое потребление памяти может достигать десятков МБ) Создание Blob и Object URL также требует памяти, большие видео легко вызывают ограничения памяти браузера На мобильных устройствах памяти меньше, они более подвержены падениям из-за OOM (нехватки памяти) Не используется Web Worker, все операции в основном потоке блокируют цикл событий Браузеры имеют ограничения на длину одной строки (движок V8 — примерно от 512 МБ до 1 ГБ), сверхдлинные строки Base64 могут некорректно парситься Частая сборка мусора (GC) в процессе декодирования также приводит к подтормаживаниям страницы и задержкам отклика

Скопированное из ответа API Base64 после декодирования дает поврежденное видео, не воспроизводимое

Бэкенд при возврате Base64 автоматически экранировал специальные символы (например, + превратился в пробел, или проблемы с экранированием JSON) При парсинге JSON некорректно обработаны специальные символы в строке Base64 При кодировании Base64 на бэкенде возникла ошибка кодирования, например бинарные данные обработаны как строка UTF-8 Данные изменены в процессе сжатия gzip или HTTP передачи При копировании из Chrome DevTools предварительный просмотр Response на панели Network может обрезать или экранировать длинные строки Бэкенд использует другой вариант Base64 (например, URL-безопасный Base64 с - и _ вместо + и /), а фронтенд не обработал это Ответ API разбит на страницы или обрезан, данные Base64 неполные

В видео есть только изображение без звука или звук и изображение не синхронизированы

Аудиокодек не поддерживается браузером: например, в MP4 используется MP3 или Opus вместо AAC При перекодировании видео параметры аудио установлены неверно, что привело к ошибкам временных меток (PTS/DTS) Данные Base64 неполные, оказалась обрезанной часть данных аудиодорожки Видео с переменной частотой кадров (VFR), некоторые браузеры плохо поддерживают VFR видео, что приводит к рассинхронизации аудио и видео Исходное видео само по себе имеет проблему синхронизации аудио и видео, это не вызвано декодированием Base64 Частота дискретизации аудио или количество каналов не поддерживаются браузером, что приводит к неудаче декодирования аудиодорожки Временная база (timebase) аудиодорожки и видеодорожки в видеоконтейнере не совпадает, что приводит к смещению синхронизации при воспроизведении

Глоссарий

Base64: Способ кодирования бинарных данных на основе 64 печатных символов, каждые 3 байта бинарных данных кодируются в 4 байта ASCII текста, объем увеличивается примерно на 33%, часто используется для передачи бинарных данных в текстовых протоколах.
Data URL: Схема URI, определенная в RFC 2397, формат data:[mediatype][;base64],data, позволяет встраивать небольшие файлы непосредственно в документы без дополнительных HTTP запросов.
MIME тип: Идентификатор медиатипа, используемый для указания формата документа или файла. Видеоформаты начинаются с video/, например video/mp4, video/webm, video/ogg, браузеры по MIME типу определяют способ обработки ресурса.
Blob: Binary Large Object (большой бинарный объект), объект в браузере, представляющий неизменяемые исходные бинарные данные, может использоваться для хранения файловых данных, таких как видео, изображения, генерирует доступный URL через URL.createObjectURL().
atob(): Встроенная в браузер функция для декодирования строки в кодировке Base64 в бинарную строку (ASCII to Binary), соответствующая функция кодирования — btoa() (Binary to ASCII).
btoa(): Встроенная в браузер функция для кодирования бинарной строки в строку Base64 (Binary to ASCII), обратная операция atob(), используется при преобразовании видео в Base64.
Uint8Array: Типизированный массив JavaScript, хранящий 8-битные беззнаковые целые числа (0-255), каждый элемент соответствует одному байту — стандартный способ обработки бинарных данных, после декодирования Base64 требуется преобразование в Uint8Array перед созданием Blob.
MP4: MPEG-4 Part 14, распространенный формат мультимедийного контейнера, обычно инкапсулирует видеокодек H.264 и аудиокодек AAC, лучшая совместимость с веб, расширение файла .mp4.
WebM: Представленный Google открытый свободный формат видеоконтейнера, обычно использует видеокодеки VP8/VP9/AV1 и аудиокодеки Vorbis/Opus, коэффициент сжатия лучше, чем у MP4, хорошо поддерживается Chrome/Firefox/Edge.
OGG: Разработанный фондом Xiph открытый формат мультимедийного контейнера, видео обычно кодируется Theora, аудио — Vorbis, в настоящее время постепенно вытесняется WebM, расширение файла .ogv.
H.264/AVC: Наиболее широко используемый на текущий момент стандарт видеокодирования, также называемый AVC (Advanced Video Coding), с хорошим балансом коэффициента сжатия и качества, поддерживается аппаратным ускорением, стандартный видеокодек для контейнера MP4, совместим со всеми браузерами.
AAC: Advanced Audio Coding, продвинутое кодирование аудио, стандартный аудиокодек для контейнера MP4, преемник формата MP3, при одинаковом качестве файл меньше, поддерживается всеми современными браузерами.
Object URL: Временный URL, созданный через URL.createObjectURL(blob), формат blob://..., может напрямую использоваться в атрибуте src тегов video/img и т.д., указывает на данные Blob в памяти, после использования требуется вызов revokeObjectURL для освобождения.
FFmpeg: Инструмент обработки аудио и видео с открытым исходным кодом, может использоваться для перекодирования видео, монтажа, просмотра информации о кодировании, сжатия и т.д., является отраслевым стандартным инструментом для обработки видео, необходим для проверки и преобразования видеокодеков.
moov atom: Атом метаданных в MP4 файле, содержащий ключевые данные, такие как длительность видео, разрешение, информация о кодировании, параметры декодирования. moov должен быть в начале файла для быстрого воспроизведения, для веб-видео рекомендуется размещение в начале (faststart).
Контейнерный формат: Формат файла, инкапсулирующий видеопоток, аудиопоток, субтитры, метаданные, например MP4, WebM, OGG, MKV. Контейнерный формат не равен формату кодека, один и тот же контейнер может инкапсулировать разные кодеки.
Видеокодек: Алгоритм сжатия и распаковки видеоданных, распространенные — H.264, H.265(HEVC), VP8, VP9, AV1. Кодек определяет коэффициент сжатия и качество изображения, поддерживаемые браузером кодеки определяют возможность воспроизведения видео.
Отладка API: Процесс проверки корректности данных при разработке фронтенд и бэкенд интерфейсов. Данный инструмент можно использовать для быстрого предпросмотра корректности возвращаемых API Base64 видеоданных без написания фронтенд кода декодирования.
Chrome DevTools: Встроенные в браузер Chrome инструменты разработчика, панель Network позволяет просматривать API запросы и ответы, из нее можно копировать Base64 видеоданные для отладки.
Символ заполнения =: В конце кодировки Base64 могут появляться 1 или 2 знака равенства для заполнения длины результата кодирования до кратной 4. Отсутствие заполнения при декодировании может привести к ошибке, инструмент может автоматически исправлять проблемы с заполнением.

Таблица соответствия MIME типов веб-видео и совместимости

MIME тип	Контейнерный формат	Часто используемые видеокодеки	Часто используемые аудиокодеки	Совместимость с браузерами	Расширения файлов
video/mp4	MP4 (MPEG-4 Part 14)	H.264/AVC, H.265/HEVC, AV1	AAC, MP3	Все современные браузеры (Chrome/Firefox/Safari/Edge/iOS/Android), комбинация H.264+AAC 100% совместима	.mp4, .m4v
video/webm	WebM	VP8, VP9, AV1	Vorbis, Opus	Chrome/Firefox/Edge/Opera полностью поддерживают, Safari 14.1+ поддерживает, iOS Safari 15+ частично поддерживает	.webm
video/ogg	Ogg	Theora	Vorbis	Поддерживается Firefox/старыми версиями Chrome/Opera, Safari не поддерживает, в настоящее время используется мало	.ogv, .ogg
video/quicktime	QuickTime (MOV)	ProRes, H.264	AAC, PCM	В основном поддерживается Safari/macOS, совместимость с другими браузерами плохая	.mov
video/x-matroska	Matroska	H.264, VP9, AV1, и т.д.	Различные кодеки	Нативная поддержка в браузерах плохая, обычно требуется сторонний плеер, не рекомендуется для веб	.mkv

Распространенные коды ошибок декодирования Base64 видео и решения

Ошибка/сообщение об ошибке	Возможные причины	Направление устранения	Решение
atob() выдает ошибку: InvalidCharacterError или "not correctly encoded"	Строка Base64 содержит недопустимые символы; префикс Data URL не удален; есть пробельные символы/символы новой строки	Проверьте, содержит ли входная строка только A-Za-z0-9+/=; убедитесь, что префикс data: удален	Удалите префикс data:video/...;base64,; удалите все символы новой строки, пробелы, табуляцию; проверьте наличие смешанных китайских или специальных символов
Декодирование успешно, но видео не воспроизводится, отображается «неподдерживаемый видеоформат»	Неверный MIME тип; видеокодек не поддерживается браузером; заголовок файла поврежден	Убедитесь, что MIME тип соответствует фактическому формату видео; проверьте информацию о кодировании с помощью FFmpeg	Выберите правильный MIME тип (MP4 используйте video/mp4); перекодируйте с помощью FFmpeg в H.264+AAC (MP4); проверьте полноту начала и конца Base64
В видео есть изображение без звука или звук без изображения	Один из аудио или видеокодеков не поддерживается браузером; аудиодорожка или видеодорожка повреждена	Посмотрите с помощью FFmpeg, какие потоки содержит видео и их кодеки	MP4 должен быть видео H.264+аудио AAC; WebM используйте VP8/VP9+Vorbis/Opus; перекодируйте заново в стандартный совместимый формат
Изображение видео искажено, зеленый экран, мозаика	Данные Base64 неполные (обрезаны); данные повреждены в процессе декодирования; потеря ключевых кадров	Сравните исходную длину Base64, проверьте полноту копирования	Скопируйте заново полную строку Base64; проверьте потерю символов в процессе передачи; убедитесь, что сам исходный видеофайл исправен
Размер декодированного видео не совпадает с исходным файлом	Неверная обработка символов заполнения Base64=; проблемы с кодировкой при преобразовании бинарной строки в Uint8Array	Проверьте правильность обработки заполнения в логике декодирования; убедитесь, что диапазон charCodeAt — 0-255	Обеспечьте правильную обработку знаков = в конце Base64; проверьте правильность логики преобразования Uint8Array
При декодировании больших видео страница подтормаживает и не отвечает	Декодирование Base64 выполняется в основном потоке, блокируя UI; видео слишком большое, превышает ограничение памяти	Посмотрите размер данных Base64, Base64 размером более 10 МБ (примерно 7,5 МБ исходного видео) может вызывать подтормаживания	Большие видео не рекомендуется в Base64; рассмотрите возможность фонового декодирования с помощью Web Worker; обрабатывайте по частям; перейдите на способ загрузки файлов
В Safari декодирование проходит, но воспроизведение не работает, в Chrome все нормально	Safari предъявляет более строгие требования к видеокодекам; moov atom не в начале файла; слишком высокий Profile/Level кодирования	Проверьте с помощью FFmpeg H.264 Profile и Level; проверьте положение moov	При перекодировании добавьте -movflags +faststart; используйте H.264 Baseline/Main Profile, Level не выше 4.1; убедитесь, что аудио — AAC
Data URL напрямую установленный в video src не воспроизводится	Неверный формат Data URL; неправильно указан MIME тип; часть Base64 повреждена	Проверьте формат Data URL: data:video/xxx;base64,xxxx	Убедитесь в правильности MIME типа; запятая — английская запятая; часть Base64 полная; некоторые мобильные устройства имеют ограничения на размер Data URL

Таблица сравнения размера исходного видео и размера после кодирования Base64

Размер исходного видео	Размер после кодирования Base64 (примерно)	Прирост объема	Накладные расходы заголовка Data URL	Подходит ли для встраивания	Типичные сценарии
100 КБ	~133 КБ	+33%	около 20 байт	Рекомендуется	Очень маленькие анимации иконок, беззвучные анимации загрузки длительностью несколько секунд
500 КБ	~667 КБ	+33%	около 20 байт	Рекомендуется	Короткие зацикленные анимации, короткие видео подсказок, анимации отклика кнопок
1 МБ	~1,33 МБ	+33%	около 20 байт	По ситуации	Обучающие видео длительностью 5-10 секунд, демонстрационные анимации низкого разрешения, обратите внимание на производительность первого экрана
2 МБ	~2,67 МБ	+33%	около 20 байт	Не рекомендуется	Близко к верхнему пределу размера встроенного видео, значительно увеличивает время загрузки страницы
5 МБ	~6,67 МБ	+33%	около 20 байт	Не рекомендуется	Слишком большой размер, не рекомендуется встраивать через Base64, используйте внешние видеофайлы
10 МБ	~13,3 МБ	+33%	около 20 байт	Запрещено	Серьезно влияет на загрузку страницы, может привести к падению из-за нехватки памяти на мобильных устройствах
50 МБ	~66,7 МБ	+33%	около 20 байт	Запрещено	Категорически не обрабатывайте такие большие видео через Base64, необходимо использовать способ загрузки/загрузки файлов

Base64 в видео

Ввод Base64

Ввод Base64

Видео Preview

Похожие

Видео в Base64

Обработка заполнения Base64

Проверка хеша файла

DES Шифрование

JSON Compress

Форматировщик SQL

Варианты использования

Как использовать

Функции

Часто задаваемые вопросы

Какие видеоформаты поддерживает инструмент Base64 в видео?

Нужно ли добавлять префикс data:video/mp4;base64 при вводе?

Можно ли воспроизвести декодированное видео напрямую в браузере?

Поддерживается ли обработка больших Base64 видео? Есть ли ограничение по размеру?

Загружаются ли видеоданные на сервер? Безопасна ли конфиденциальность?

Почему видео после кодировки Base64 на 1/3 больше исходного файла?

Почему мое MP4 Base64 не воспроизводится после декодирования?

Как проверить, что мой видеокодек совместим с браузерами?

Какое расширение у видеофайла, загружаемого после декодирования?

Влияют ли символы новой строки и пробелы в строке Base64 на декодирование?

Как реализовать преобразование Base64 в видео на фронтенде с помощью JavaScript?

В чем разница между Data URL видео и Blob URL видео?

В каких сценариях подходит кодирование видео в Base64? В каких не подходит?

Почему видео после декодирования нормально воспроизводится в Safari, а в Chrome — нет?

Теряется ли качество изображения при взаимном преобразовании Base64 видео и видеофайлов?

Устранение неполадок

После декодирования Base64 видео не воспроизводится, HTML5 video показывает неподдерживаемый формат или черный экран

Функция atob() выбрасывает InvalidCharacterError, декодирование завершается неудачей

Видео нормально воспроизводится в Chrome/Firefox, но не воспроизводится в Safari

При декодировании больших Base64 видео страница подтормаживает, браузер падает

Скопированное из ответа API Base64 после декодирования дает поврежденное видео, не воспроизводимое

В видео есть только изображение без звука или звук и изображение не синхронизированы

Глоссарий

Таблица соответствия MIME типов веб-видео и совместимости

Распространенные коды ошибок декодирования Base64 видео и решения

Таблица сравнения размера исходного видео и размера после кодирования Base64