Недавно один из моих старых клиентов попросил меня сделать на его сайте видео-бэкграунд из нескольких роликов, которые должны воспроизводиться друг за другом.
Недавно один из моих старых клиентов попросил меня сделать на его сайте видео-бэкграунд из нескольких роликов, которые должны воспроизводиться друг за другом.
Казалось бы, ничего сложного в этом нет, и даже есть готовые решения (вот например), но проблема оказалась в том, что нет решений для реализации ротации. То есть показать одно видео – пожалуйста, а несколько видео друг за другом – нет.
В результате я сделал свою небольшую библиотеку background-video, которая создаёт на странице видео-фон. Вот её особенности:
- Малый размер – 5Кб в обычном и менее 2.5 Кб в минифицированном виде
- Не требует подключения jQuery, всё сделано на обычном JavaScript
- Поддерживает последовательное циклическое воспроизведение (ротацию)
- Фоновая загрузка видео: воспроизводятся только загруженные видео, а остальные добавляются в список воспроизведения по мере загрузки
- Вместо видео на мобильных устройствах отображается статичная картина для экономии трафика
В планах – улучшить совместимость со старыми версиями IE.