Как воспроизвести видео из Base64
- Вставьте Base64 в поле Base64 или data URI или загрузите его из текстового файла кнопкой Открыть файл .txt. При открытии страницы загружается двухсекундный пример в H.264.
- Плеер показывает первый кадр. Длительность и Размеры появляются, когда браузер прочитает метаданные файла; у встроенного примера это
0:02.0и96 × 64 px. - Расширение и MIME-тип зависят от определённого контейнера:
.mp4иvideo/mp4,.webmиvideo/webm,.movиvideo/quicktime. - Нажмите Скачать файл, чтобы сохранить видео.
Видео декодируется и воспроизводится внутри браузера. Content Security Policy страницы блокирует сетевые запросы, кроме счётчика просмотров Cloudflare, так что личная запись отсюда никуда не уйдёт.
Контейнер и кодек
У видеофайла два уровня: контейнер (MP4, WebM, MOV, MKV), который инструмент определяет по первым байтам, и кодеки изображения и звука внутри него, которые читает только медиадвижок браузера. Воспроизведение зависит от кодека:
| Видеокодек | Обычный контейнер | Chrome, Edge | Firefox | Safari |
|---|---|---|---|---|
| H.264 (AVC) | MP4, MOV | Да | Да | Да |
| VP8, VP9 | WebM | Да | Да | WebM с Safari 16 на macOS, 17.4 на iOS |
| AV1 | MP4, WebM | Да | Да | Только на устройствах с аппаратным декодированием AV1 |
| HEVC (H.265) | MP4, MOV | Там, где система даёт декодер | Ограниченно, зависит от платформы | Да |
| Theora | Ogg | Нет | Нет | Нет |
Если кодируете вы сами, берите H.264 в MP4: он играет во всех браузерах из таблицы. Когда браузер не может декодировать файл, в полях Длительность и Размеры стоит н/д, а над плеером появляется сообщение «Ваш браузер не может воспроизвести этот файл MP4. Скачайте его и откройте в медиаплеере.» Скачанный файл при этом в порядке: VLC и ffmpeg читают все кодеки из таблицы.
Что говорит определение формата
| Определено | Что покажет страница |
|---|---|
| MP4, MOV, 3GP, WebM, MKV, AVI, OGV | Принимается как видео, с подходящим расширением |
| WebM или MP4 без изображения | Воспроизводится, в поле Размеры написано только аудио |
| M4A, MP3, WAV | «Похоже на M4A, а не на видео.» и кнопка Скачать как .m4a и т. п. |
| GIF | «Похоже на GIF, а не на видео.»: анимированный GIF считается изображением |
| Binary | «Не похоже на видео»: часто это недокачанный файл или сырые данные потока |
Файл WebM, записанный через MediaRecorder в браузере только с микрофона, всё равно остаётся WebM: он проходит как видео и воспроизводится как аудио. Подробности о семействе MP4 на странице Base64 в MP4.
Откуда берётся видео в Base64
API для генерации видео могут возвращать ролик полем Base64 в JSON вместо ссылки на скачивание. Записи экрана и камеры, сделанные в браузере, часто отправляются на сервер в Base64. Тестовые наборы встраивают короткие ролики строками, а некоторые сайты вставляют фоновое видео без звука как URI data:video/mp4; чем это оборачивается, разобрано в статье о производительности data URI. Чтобы получить такую строку, используйте Видео в Base64.
Проверить кодек и сконвертировать через ffmpeg
Если ролик не воспроизводится, ffprobe назовёт кодек:
base64 -d clip.b64 > clip.mp4
ffprobe -v error -select_streams v:0 -show_entries stream=codec_name,width,height -of csv=p=0 clip.mp4
Для ролика в HEVC это выведет hevc,320,240. Перекодирование в H.264 со звуком AAC даёт файл, который играет в любом браузере, а +faststart переносит индекс в начало, чтобы воспроизведение начиналось до полной загрузки файла:
ffmpeg -i clip.mp4 -c:v libx264 -pix_fmt yuv420p -c:a aac -movflags +faststart clip-h264.mp4
Другие команды для терминала собраны в статье Base64 в Bash.
Вопросы и ответы
Как воспроизвести видео из Base64?
Вставьте Base64 или URI вида data:video/…;base64, в поле выше, и появится плеер с загруженным видео. Скачать файл сохраняет его с расширением найденного контейнера.
Почему звук есть, а картинки нет?
Браузер умеет читать контейнер, но не видеокодек, или в файле вообще нет видеодорожки (тогда в строке Размеры написано только аудио). Чаще всего дело в HEVC, который браузер не поддерживает.
Почему не воспроизводится видео с iPhone?
iPhone по умолчанию снимает в HEVC (H.265), часто в файл MOV. Safari его воспроизводит, а Chrome, Edge и Firefox воспроизводят его только там, где операционная система и железо дают декодер HEVC. После конвертации в H.264 видео будет играть везде.
Насколько большое видео в Base64 потянет плеер?
Предел задаёт только память устройства. Ролик на 50 MB занимает около 70 миллионов символов Base64; входные данные больше 4 MB декодируются без показа в текстовом поле, а на очень больших страница ненадолго подвисает.