Как собрать слайдер с видео и не загрузить все ролики сразу
Не начинайте с модификации, которая превращает несколько MP4 в бесконечную карусель. Сначала соберите родной слайдер с лёгкими постерами, а видео открывайте или подгружайте только для активного кадра. Так свайп, точки и границы остаются за Тильдой, а сеть не скачивает все ролики одновременно. Свой код нужен лишь для особой синхронизации, и его нужно проверять на мобильном Safari.
Короткий ответ
Слайды — родные, видео — ленивые. Один активный ролик, остальные пока остаются постерами.
Почему несколько видео тяжёлые
Каждый плеер добавляет разметку, запросы и состояние. Если браузер начинает загружать пять роликов до первого действия, страница проигрывает ещё до того, как человек увидит второй слайд.
Постер должен быть отдельным оптимизированным изображением. Не используйте первый кадр многомегабайтного файла как способ показать обложку.
Устойчивый сценарий
- Слайдер показывает постер, заголовок и кнопку запуска.
- По клику активный слайд создаёт или открывает плеер.
- При переходе дальше ролик останавливается.
- Возврат на слайд не запускает звук сам.
- Без JavaScript остаётся постер и ссылка на видео.
Если ролик открывается в попапе, используйте родную оболочку окна. Это избавляет слайдер от конкуренции за высоту и касания.
Автозапуск
Современные браузеры ограничивают автозапуск со звуком. Даже если тест на вашем компьютере прошёл, телефон клиента может потребовать касание. Проектируйте кнопку как основной путь, а автозапуск — как необязательное улучшение.
Приёмка
Проверьте первый, средний и последний слайд, свайп во время паузы, поворот телефона, медленную сеть и возврат назад. В инструментах сети убедитесь, что неактивные ролики не скачиваются заранее. По плану A68 отдельный мод намеренно не создаётся: родная механика закрывает основу лучше.