YETI³ STUDIO / Коллекция готовых сайтовЭто может быть ваш сайт ↗
JOURNALтехнологии · опыт · люди
← К публикациям
ААлексей Морозовдемо

Видео для веба: контейнер ещё не гарантирует воспроизведение

Фронтенд

H.264, AAC, faststart и адаптивные варианты: разбираем путь от загрузки до плеера.

Видео к публикации · адаптивное качество

MP4 — это контейнер

Внутри файла может находиться кодек, который браузер не умеет воспроизводить. Проверяйте дорожки через ffprobe. Для совместимого H.264 с yuv420p достаточно переупаковки, а неподдерживаемое видео требует перекодирования.

Первый кадр без ожидания всего файла

Перенос служебных данных в начало MP4 с faststart позволяет начать воспроизведение раньше. Обложка показывает содержимое до загрузки видео. Автовоспроизведение со звуком не должно заменять явное действие зрителя.

Адаптивное качество

HLS разбивает видео на сегменты и позволяет плееру выбирать вариант под сеть. Синхронные ключевые кадры упрощают переключение. Исходные пропорции нужно сохранять без обрезки и растягивания.

Обработка должна жить отдельно

Загрузка создаёт постоянное задание. Фоновый работник проверяет файл, создаёт обложку, готовит MP4 и варианты качества. Страница показывает состояние задачи и не ждёт завершения ffmpeg внутри обычного HTTP-запроса.

Источник демонстрационного видео

Фрагмент 15 секунд из записи переключения дата-центров Wikimedia, 27 октября 2020. Автор CDanis (WMF). Видео сокращено и перекодировано. Оригинал. Лицензия CC BY-SA 4.0.

↑ 3 · Оценить▢ В закладки
А
Алексей Морозов

Разбираю сложные интерфейсы на понятные решения. Вымышленный автор демо.

Обсуждение 2

Обсуждаем идеи, делимся опытом и уважаем собеседника.

Полезный разговор начинается с вас.

Войти и обсудить ↗
ММария Волковадемо

Стоит ли перекодировать уже совместимый H.264 только ради единого формата?

ААлексей Морозовдемо

Для MP4 faststart часто достаточно переупаковки. А варианты HLS требуют отдельной обработки. Важно не тратить CPU там, где копирование дорожек даёт тот же результат.

YETI³ STUDIO / ГОТОВОЕ РЕШЕНИЕ

Ваш бизнес.
Ваш новый сайт.

Этот дизайн уже работает. Смените название, добавьте своё содержание и управляйте сайтом из одного кабинета.

Мобильная версияУправление контентомСвой домен
Решение JOURNALот 6900 ₽

Лицензия дизайна и функций решения. Размещение и ядро рассчитываются отдельно.

Настроить в конструкторе ↗

Окончательный расчёт и доступность установки — в конструкторе. Здесь демонстрационные данные.