Mira nuestra colección de 5 de los complementos de video de fondo más increíbles y fáciles de usar escritos en JavaScript.

Top 5: Los mejores plugins para usar videos de fondo en la pagina con JavaScript

Hoy en día, hay muchas páginas de destino atractivas que tienen un hermoso bucle de video en pantalla completa reproduciéndose en segundo plano, y dado que no podemos simplemente configurar un video para la imagen de fondo en CSS, necesitaremos depender de un complemento para consígalo (o cree el complemento usted mismo ... sin embargo, no lo aprenderá en esta parte superior).

Estos complementos lo ayudarán a manejar todos los casos de uso, aunque no todos funcionan en dispositivos móviles, brindan la opción de póster que le permite poner una imagen en lugar de un video en ellos.

5. Vidbg.js

Github | Manifestación

Vidbg

Vidbg es un pequeño complemento para reproducir un video en el fondo de un elemento dom.

Es importante tener en cuenta que el suministro de .webm y .mp4 aumentará considerablemente la compatibilidad del navegador y es muy recomendable.

  • Funciona en todos los navegadores web modernos.
  • IE9 +.
  • El video se reproducirá en computadoras de escritorio y portátiles y recurrirá a la imagen alternativa (póster) en dispositivos móviles (tabletas, teléfonos, etc.)

4. BigVideo.js

Github | Manifestación

Este complemento facilita la adición de videos de fondo que se ajusten al relleno en sitios web. Puede reproducir video de fondo ambiental silencioso (o series de videos). O utilícelo como reproductor para mostrar la lista de reproducción de videos. BigVideo.js también puede mostrar imágenes de fondo grandes, lo cual es bueno para mostrar imágenes de fondo grandes para dispositivos que no tienen reproducción automática para video ambiental. BigVideo.js se basa en Video.js de zencoder.

Bigvideo

3. CoverVid

Github | Manifestación

Covervid

CoverVid es muy ligero, con solo 800 bytes de Javascripts. Se puede utilizar en Javascript nativo y jQuery. Su lógica está basada en los padres, lo que significa que el elemento principal puede ser de cualquier tamaño (no necesariamente un fondo de pantalla completa).

Es importante tener en cuenta que el video al que apuntes usará su elemento principal para escalar. Con eso en mente, crearemos un marcado simple y agregaremos un estilo base para dimensionar el elemento principal / envoltorio de los videos.

2. Vide

Github | Manifestación

Demostración de Videjs

Vide es un complemento de jQuery para agregar un video como fondo de un elemento dom.

  • Todos los navegadores de escritorio modernos son compatibles.
  • IE9 +
  • iOS reproduce videos desde un navegador solo en el reproductor nativo. Por lo tanto, el video para iOS está deshabilitado, solo se usará un póster en pantalla completa.
  • Algunos dispositivos Android reproducen video, otros no, imagínate. Por lo tanto, el video para Android está deshabilitado, solo se usará el póster en pantalla completa.

El complemento Vide cambia de tamaño si la ventana cambia de tamaño. Si va a utilizar algo como https://github.com/cowboy/jquery-resize, cambiará de tamaño automáticamente cuando el contenedor cambie de tamaño. O simplemente use el método resize () siempre que lo necesite. Establezca la opción de cambio de tamaño en falso para deshabilitar el cambio de tamaño automático.

1. Bideo.js

Github | Manifestación

Demostración de Bideo.js

Bideo.js es una biblioteca JS que hace que sea muy fácil agregar videos de fondo en pantalla completa. Le ayudará a reproducir un video en el fondo de un contenedor o la <body>etiqueta en sí y funciona incluso en los últimos navegadores móviles.

El video puede tardar unos segundos en cargarse, especialmente porque las fuentes se agregan a través de JS, que es algo que cargará después de la carga del DOM. Hasta entonces, es posible que desee mostrar una portada de video que será la misma que el primer fotograma o el video (o alguna otra imagen). El soporte para esto no está en el complemento, ya que es bastante simple lograrlo solo a través de HTML / CSS (al igual que las superposiciones).

Extra

Este codepen muestra una implementación impresionante sin necesidad de ningún complemento . Sin embargo, no proporcionaría compatibilidad con varios navegadores.


Interesado en la programación desde los 14 años, Carlos es un programador autodidacta, fundador y autor de la mayoría de los artículos de Our Code World.

Conviertete en un programador más sociable

Patrocinadores