Реализация эффекта скролла по видео для веб-страницы

Создать JavaScript-модуль, позволяющий проигрывать видео по скроллу страницы (или по клику), имитируя эффект покадровой анимации (scroll-driven video). Скрипт должен быть универсальным и переиспользуемым: можно вставлять на разные страницы, либо в разные блоки одной страницы с разными видео.

🖼️ Исходные материалы:

• Видео с дрона (будет предоставлено в формате .mp4).

• Возможность заменить видео на другое без переписывания кода.

• Возможность задать начало/конец проигрыша и количество кадров.

⚙️ Функциональные требования:

1. Преобразование видео в кадры:
   

   • Скрипт или инструкция для автоматической нарезки видео на изображения (jpeg/png) с сохранением порядка (frame001.jpg, frame002.jpg, …).

   • Оптимальное количество кадров: 50–300 (в зависимости от длины видео).

   • Кадры сохраняются в отдельную папку и подключаются как спрайтовая последовательность.

3. Отображение и скролл:
   

   • Отображается блок (div), в котором по скроллу (или клику) сменяются кадры.

   • Поддержка нескольких таких блоков на странице (по ID или классу).

   • Возможность задать скролл в обе стороны (вверх/вниз → назад/вперед).

   • Можно задать вручную: количество пикселей скролла на один кадр.

5. Альтернатива: воспроизведение через <video>-элемент:
   

   • Поддержка встроенного видео (<video>) с фрейм-контролем через JS (если без нарезки).

   • Прогресс скролла → управление video.currentTime.

7. Адаптивность и кроссбраузерность:
   

   • Скрипт должен корректно работать в Chrome, Safari, Firefox, Edge.

   • Адаптация под мобильные устройства (опционально: горизонтальный свайп).

9. Установка и настройка:
   

   • Скрипт подключается через <script> или как отдельный модуль (желательно ES6).

   • В коде должна быть возможность легко задать:
     

     • путь к видео или кадрам;

     • количество кадров;

     • идентификатор блока (например, #droneScrollBlock);

     • диапазон скролла (startScroll, endScroll).

Оставляйте ваш телеграм