🎬 Архитектура предпросмотра видео в Netflix

Когда вы наводите курсор на таймлайн Netflix, вы видите, как выглядит сцена в этот момент времени. Как это устроено? Загружает ли Netflix весь фильм заранее?

Если бы это было так, фильм продолжал бы воспроизводиться даже после отключения интернета.

Netflix достигает плавного предпросмотра таймлайна (технически это называется Trick Play или Scrubbing) с помощью продуманной техники оптимизации изображений, называемой Sprite Sheets или Storyboards.

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

Ниже — архитектурный разбор того, как это работает.

🏗️ 1. Предварительная обработка
Когда фильм или эпизод загружается на серверы Netflix, он проходит через конвейер кодирования. Пока обрабатывается видео высокого качества, параллельно запускается отдельный процесс специально для предпросмотра таймлайна:

- Извлечение кадров:
Система извлекает кадры низкого разрешения с заданным интервалом, например каждые 1, 3 или 10 секунд.

- Сшивание (магический шаг):
Вместо сохранения тысяч отдельных файлов изображений, что потребовало бы тысячи медленных сетевых запросов, система сшивает эти кадры в один большой файл изображения, называемый Sprite Sheet.

- Визуальный пример:
Представьте один JPEG-файл в виде сетки 5×5, содержащей 25 маленьких скриншотов.

🗂️ 2. Индексация
Вместе со спрайт-листом Netflix генерирует небольшой текстовый файл, часто в формате WebVTT или собственного JSON. Этот файл выступает в роли карты и говорит видеоплееру: «Если пользователь навел курсор на таймкод 10:05, возьми файл sprite_sheet_3.jpg и покажи прямоугольник, начинающийся с координат x=200, y=0».

📺 3. Клиентский опыт
Когда вы открываете фильм, ваше устройство сразу загружает этот небольшой файл метаданных.

- Наведение:
Вы перемещаете курсор к отметке 25 минут.

- Вычисление:
Плеер смотрит в карту метаданных, чтобы определить, в каком спрайт-листе находится кадр для 25-й минуты.

- Загрузка (lazy load):
Если нужный спрайт-лист еще не загружен, плеер скачивает только этот конкретный файл изображения.

- Отображение:
С помощью CSS или Canvas плеер показывает «окошко», скрывая весь спрайт-лист, кроме нужной ячейки.

Преимущества

🚀 Скорость:
Загрузка одного большого изображения значительно быстрее, чем загрузка 50 маленьких файлов.

⚡ Низкая задержка:
Так как изображения заранее загружены или находятся в кэше, предпросмотр появляется мгновенно, даже если основное видео буферизуется.

📉 Экономия трафика:
Превью имеют очень низкое качество, обычно около 160px по ширине. Из-за малого размера и кратковременного просмотра сильное сжатие практически незаметно.

#streaming #performance #media

На связи с вами https://t.me/itarchitecture