Ejemplo de cómo implementar fácilmente un fondo de video en pantalla completa usando HTML5

¿Quieres reproducir un vídeo en pantalla completa en tu página de inicio? Este vídeo se utiliza como fondo de la página web y no afecta la navegación normal del contenido web. Entonces déjame decirte que existe una biblioteca Javascript que se adapta a tus necesidades, se trata de Bideo.js.

Ajuste automático: Bideo.js puede ajustar automáticamente el tamaño del video de acuerdo con el tamaño de la ventana actual del navegador. Cuando se ajusta la ventana del navegador, se adaptará al tamaño de la ventana. Tanto el lado del móvil como el de la PC pueden ajustarse automáticamente para que el video. se puede utilizar como fondo y mostrarse en pantalla completa.

Superposición: después de utilizar el vídeo como fondo de la página web, podemos colocar cualquier contenido HTML encima del vídeo.

Portada del vídeo: Cuando se abre la página, el vídeo puede tardar unos segundos en cargarse. Luego podemos configurar una imagen como portada del vídeo y esperar hasta que se cargue antes de reproducirlo.

Agregue el siguiente código HTML al cuerpo de su página. Obviamente, la etiqueta <video> se usa para cargar videos, el atributo loop se refiere a reproducir el video en bucle y muted se refiere al modo silencio, es decir, el volumen es 0. #video_cover es la portada del vídeo predeterminada. #overlay es la capa de máscara en la que se muestra el resto del contenido de la página.

 <div id=contenedor> <video id=fondo_bucle de video silenciado></video> <div id=video_cover></div> <div id=overlay></div> <div id=video_controls> <span id=play> <img src=play.png> </span> <span id=pause> <img src=pause.png> </span> </div> <sección id=main_content> <div id=head> <h1>HTML5 implementa fácilmente un fondo de video en pantalla completa: Bideo.js</h1> <p class=sub_head>Una biblioteca Javscript que puede agregar fácilmente un video de fondo en pantalla completa a la página </p> <p class=info>(Espera un momento, el vídeo tardará un poco en cargarse).</p> </div> </section></div>

También agregamos #video_controls, que se utiliza para controlar la reproducción y pausa del video, adecuado para teléfonos móviles. Finalmente, puede agregar cualquier contenido HTML que desee mostrar en la siguiente sección.

CSS también es fundamental. Las cosas más importantes a las que hay que prestar atención son las configuraciones de #container y #background_video. El siguiente código CSS se puede tomar directamente sin explicación:

 * {margen: 0; relleno: 0;}html, cuerpo {ancho: 100%; alto: 100%; desbordamiento: oculto;}#contenedor {desbordamiento: oculto; posición: superior: 0; : 0; abajo: 0; altura: 100%;}#fondo_video { posición: absoluta; arriba: 50%; -50%); ajuste de objeto: cubierta; altura: 100%; ancho: 100%;}#video_cover { posición: absoluta; altura: 100%; -repetir; tamaño de fondo: portada; posición de fondo: centro;}#superposición: fondo: 0; rgba(0,0,0,0.5);}

Primero cargue la biblioteca Bideo:

 <script src=bideo.js></script>

Luego cree una instancia de bido: new Bideo(), luego inicialice la carga directamente y configure las siguientes opciones:

 (function () { var bv = new Bideo(); bv.init({ // Elemento de video videoEl: document.querySelector('#background_video'), // Elemento contenedor contenedor: document.querySelector('body'), / / Cambio de tamaño del ajuste adaptativo: verdadero, // reproducción automática: falso, isMobile: window.matchMedia('(max-width: 768px)').matches, playButton: document.querySelector('#play'), pausaButton: document.querySelector('#pause'), // Carga la fuente del video y reemplaza tu propio archivo fuente de video de acuerdo con el negocio real src: [ { src: 'http://ak4.picdn.net/shutterstock/videos/4170274/preview/stock-footage-beautiful-girl-lying-on-the-meadow-and-dreaming-enjoy-nature-close-up-slow-motion -footage.mp4', escriba: 'video/mp4' }, { src: 'night.webm', escriba: 'video/webm;codecs=vp8, vorbis' } ], // Una vez cargado el video, la portada del video se ocultará onLoad: function () { document.querySelector('#video_cover').style.display = 'none '; } } );}());

Así, se completa una página de video de fondo de gran apariencia. Bienvenido a ver la demostración en línea DEMO y descargar el código fuente. Para obtener más información sobre Bideo.js, consulte la dirección del proyecto github: https://github.com/rishabhp/bideo.js.

Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.