Фоновое видео на странице с поддержкой ротации (плейлиста)

Недавно один из моих старых клиентов попросил меня сделать на его сайте видео-бэкграунд из нескольких роликов, которые должны воспроизводиться друг за другом.

Недавно один из моих старых клиентов попросил меня сделать на его сайте видео-бэкграунд из нескольких роликов, которые должны воспроизводиться друг за другом.

Казалось бы, ничего сложного в этом нет, и даже есть готовые решения (вот например), но проблема оказалась в том, что нет решений для реализации ротации. То есть показать одно видео — пожалуйста, а несколько видео друг за другом — нет.

В результате я сделал свою небольшую библиотеку background-video, которая создаёт на странице видео-фон. Вот её особенности:

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

В планах — улучшить совместимость со старыми версиями IE.