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 ₽

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

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

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

JOURNAL / КОЛЛЕКЦИЯ

Один журнал.
Ваш характер.

42 готовые композиции. Общие публикации, сообщество и видео.

JournalСообществоСмотреть ↗CheerUpMirandaСмотреть ↗CheerUpLifestyleСмотреть ↗CheerUpBoldСмотреть ↗CheerUpMagazineСмотреть ↗CheerUpFoodСмотреть ↗CheerUpFashionСмотреть ↗CheerUpMomСмотреть ↗CheerUpTravelСмотреть ↗CheerUpRovellaСмотреть ↗CheerUpFitnessСмотреть ↗CheerUpGeneralСмотреть ↗CheerUpTrendyСмотреть ↗CheerUpBeautyСмотреть ↗CheerUpDefaultСмотреть ↗Lets BlogКлассическийСмотреть ↗Lets BlogСлайдер в 3 колонкиСмотреть ↗Lets BlogСетка без рамкиСмотреть ↗Lets BlogКонтейнерСмотреть ↗Lets BlogВерхнее менюСмотреть ↗Lets BlogПростое менюСмотреть ↗LaFeminiteРедакционный разворотСмотреть ↗LaFeminiteПростая главнаяСмотреть ↗LaFeminiteАвторский журналСмотреть ↗WritingОсновной · на всю ширинуСмотреть ↗WritingОсновной · с колонкойСмотреть ↗WritingРазновысокая сетка · на всю ширинуСмотреть ↗WritingРазновысокая сетка · с колонкойСмотреть ↗WritingСписок · на всю ширинуСмотреть ↗WritingСписок · с колонкойСмотреть ↗WritingКлассический · на всю ширинуСмотреть ↗WritingКлассический · с колонкойСмотреть ↗WritingСетка с главным материалом · на всю ширинуСмотреть ↗WritingСетка с главным материалом · с колонкойСмотреть ↗WritingСписок с главным материалом · на всю ширинуСмотреть ↗WritingСписок с главным материалом · с колонкойСмотреть ↗SoledadТехнологииСмотреть ↗SoledadЖурналСмотреть ↗SoledadНаукаСмотреть ↗SoledadСетка без колонкиСмотреть ↗SoledadСетка с колонкойСмотреть ↗SoledadВидеожурналСмотреть ↗