Топ 5: Лучшие плагины видео фон JavaScript

В настоящее время существует множество привлекательных целевых страниц, которые имеют красивый полноэкранный цикл видео, играющий в фоновом режиме, и, поскольку мы не можем просто установить видео для фонового изображения в CSS, нам понадобится плагин для достигните этого (или создайте плагин самостоятельно … однако вы не узнаете об этом в этом топе).

Эти плагины помогут вам справиться со всеми вариантами использования, хотя не все из них работают на мобильных устройствах, они предоставляют опцию плаката, которая позволяет размещать на них изображение вместо видео.

Предупреждение! независимо от того, насколько мощен ваш компьютер, не открывайте все демонстрационные вкладки, так как производительность вашего браузера заметно снизится, так как эта функция требует много ресурсов.

5. Vidbg.js

Github | демонстрация

Vidbg

Vidbg — это крошечный плагин для воспроизведения видео на фоне элемента dom.

Важно отметить, что предоставление как .webm, так и .mp4 значительно повысит совместимость браузера, и это настоятельно рекомендуется.

  • Он работает во всех современных веб-браузерах.
  • IE9 +.
  • Видео будет воспроизводиться на настольных компьютерах и ноутбуках и будет использовать резервное изображение (плакат) на мобильных устройствах (планшетах, телефонах и т. Д.)

4. BigVideo.js

Github | демонстрация

Этот плагин позволяет легко добавлять фоновое видео для веб-сайтов. Он может воспроизводить тихое фоновое видео (или серию видео). Или используйте его в качестве плеера, чтобы показать видео плейлист. BigVideo.js также может показывать большие фоновые изображения, что хорошо для показа больших фоновых изображений для устройств, у которых нет автозапуска для окружающего видео. BigVideo.js построен поверх Video.js от зенкодера.

Bigvideo

3. CoverVid

Github | демонстрация

Covervid

CoverVid очень легкий, всего с 800 байтами JavaScript. Это применимо в нативном Javascript и jQuery. Его логика основана на родителях, то есть родительский элемент может быть любого размера (не обязательно просто полноэкранный фон).

Читайте также:  Как использовать IF-операторы в Microsoft Excel

Важно отметить, что для целевого видео будет использоваться его родительский элемент для масштабирования. Имея это в виду, мы создадим некоторую простую разметку и добавим базовый стиль для определения размера родительского элемента / обертки видео.

2. смотри

Github | демонстрация

Videjs demo

Vide — это плагин jQuery для добавления видео в качестве фона элемента dom.

  • Все современные настольные браузеры поддерживаются.
  • IE9 +
  • iOS воспроизводит видео из браузера только в родном плеере. Так что видео для iOS отключено, будет использоваться только полноэкранный постер.
  • Некоторые андроид устройства воспроизводят видео, некоторые нет — иди разберись. Так что видео на андроид отключено, будет использоваться только полноэкранный постер.

Плагин Vide изменяет размеры, если окно изменяет размеры. Если вы будете использовать что-то вроде https://github.com/cowboy/jquery-resize, он автоматически изменит размер при изменении размера контейнера. Или просто используйте метод resize () всякий раз, когда вам нужно. Установите для параметра изменения размера значение false, чтобы отключить автоматическое изменение размера.

1. Bideo.js

Github | демонстрация

Bideo.js демо

Bideo.js — это библиотека JS, которая позволяет легко добавлять полноэкранные фоновые видеоролики. Это поможет вам воспроизвести видео на фоне контейнера или теги, и это работает даже в последних мобильных браузерах.

Для загрузки видео может потребоваться несколько секунд, особенно потому, что источники добавляются через JS, который вы загружаете после загрузки DOM. До этого вы можете показать обложку видео, которая будет такой же, как первый кадр или видео (или какое-либо другое изображение). Поддержка этого отсутствует в плагине, так как это довольно просто сделать с помощью HTML / CSS (как оверлеи).

дополнительный

Этот codepen показывает отличную реализацию без использования какого-либо плагина. Однако это не обеспечит поддержку кросс-браузера.

Ссылка на основную публикацию
Adblock
detector