S7 Mesh — Scroll Video Experience

Преимущества решения

Scroll-driven video — как у Apple, Tesla и других премиальных брендов

10× Меньше размер файла
по сравнению с image sequence

5–10× Легче, чем MP4
с ключевым кадром в каждом фрейме

30fps Достаточно для плавности,
но при 60fps будет вообще супер

0 Зависимостей — чистый JS,
без библиотек и плагинов

Сравнение с альтернативами

Подход	Загрузка	Память	При скролле	Размер
Image sequence (JPEG)	Тяжело	Много	Быстро	Огромный
MP4 + keyframe в каждом кадре	Долго	Мало	Хорошо	Огромный
Наше решение MP4 + canvas cache	Прелоадер 3с	Средне	Мгновенно	Маленький

Совместимость

Браузер / Платформа	Поддержка	Примечание
Chrome / Edge	✓	Полная поддержка
Safari (macOS / iOS)	✓	Safari 15+
Firefox	✓	Полная поддержка
Mobile (Android / iOS)	✓	Touch-скролл
Canvas API	✓	99.5% пользователей
ImageBitmap API	✓	96%+ пользователей

Вывод

MP4 + keyframe в каждом кадре даёт хорошее качество при скролле, но ценой многократно увеличенного размера файла — каждый кадр хранится целиком, что делает видео в 5–10 раз тяжелее.

Наше решение — MP4 + canvas cache — использует обычный сжатый MP4 (минимальный вес), кэширует кадры при загрузке за ~3 секунды, и после этого обеспечивает мгновенный отклик при скролле. Ноль зависимостей, работает во всех браузерах.

Оптимальный баланс: маленький файл → быстрая загрузка → плавный скролл.