Solución de video de fondo amigable para dispositivos móviles-VIDAGE. js
| Autor: | dvLden |
|---|---|
| Views Total: | 2,681 |
| Sitio oficial: | Ir a la web |
| Actualizado: | August 20, 2018 |
| Licencia: | MIT |
Vista prévia
Descripción
Vidage.js a lightweight JavaScript library which allows for HTML5 videos to be used as a background for your webpage.
El plugin también tiene una alternativa que utiliza una imagen de fondo de pantalla completa en lugar de vídeo para ahorrar ancho de banda en los dispositivos móviles.
Funcionamiento
Cargue el JavaScript y la hoja de estilos de VIDAGE de la siguiente manera:
<link href="Vidage.css" rel="stylesheet"> <script src="Vidage.min.js"></script>
Prepare la imagen de reserva y establezca la ruta correcta en VIDAGE. CSS.
.Vidage__image{background-image:url(bg.jpg); Inserte vídeos HTML5 en el fondo de su página web.
<div class="Vidage"> <div class="Vidage__image"></div> <video id="VidageVideo" class="Vidage__video" preload="metadata" loop autoplay muted> <source src="1.ogg" type="video/ogg"> <source src="1.mp4" type="video/mp4"> </video> <div class="Vidage__backdrop"></div> </div>
Inicialice el VIDAGE y listo.
new Vidage('#VidageVideo'); Registro de cambios
v0.5.1 (08/20/2018)
- actualizar
