Clicky

Fondo de página con vídeo HTML5 a pantalla completa

Fondo de página con vídeo HTML5 a pantalla completa

Vídeo "Background" puede ser una característica muy poderosa en un sitio

Aunque todavía no podemos establecer un vídeo para el background o el background-image como una propiedad del CSS - sólo puede coger mapas de bits, imágenes SVG, colores y degradados como valores - es posible falsificar la apariencia de un vídeo de fondo al obligarle a que esté detrás de otros elementos HTML. El reto es hacer que el vídeo ocupe toda la ventana del navegador, por lo que es tan sensible como las imágenes de fondo.

Consideraciones y Limitaciones

Antes de lograr esto, hay algunos factores que se deben considerar:

  1. No sólo tienes que utilizar esta técnica, ya que puede: el contenido de vídeo debe amplificar el mensaje de un sitio, no sólo se mostrará porque es bonito.
  2. El vídeo es probable que se establezca en reproducción automática, pero debe ser silenciado por defecto, idealmente no debería incluir sonido en absoluto. (Puedes crear fácilmente con JavaScript un botón de activar el sonido para el vídeo).
  3. El vídeo debe mostrar una imagen de marcador de posición, retrocediendo una imagen de fondo estática para los navegadores que no soportan HTML5. La imagen de marcador de posición también utilizará un fondo en los dispositivos móviles: la mayoría de los teléfonos y las tabletas no son compatibles con la reproducción automática, por razones obvias.
  4. La duración es importante: un vídeo demasiado corto puede sentirse repetitivo (en la mayoría de  vídeos se pueden establecer en bucle), mientras que demasiado largo se convierte en un relato en sí mismo, y por lo tanto merece ser un elemento de diseño independiente. Te sugiero una duración de aproximadamente 12-30 segundos.
  5. El ancho de banda también es importante. El vídeo tiene que ser pequeño, y comprimido tan eficazmente como sea posible. Al mismo tiempo, es necesario escalarlo a través de diferentes dispositivos y sus pantallas asociadas. En los casos avanzados, es posible que desees considerar el uso de JavaScript matchmedia para enviar diferentes versiones de calidad del vídeo a diferentes tamaños de pantalla. Trata de mantener el vídeo por debajo de 5Mb, idealmente en 500k.

Con estos factores en mente, echemos un vistazo a las técnicas para reproducir el vídeo, usando un pedazo de código de Alexander Wagner.

Un enfoque CSS puro

Construir el vídeo HTML5 como de costumbre:

<video autoplay loop poster="/polina.jpg" id="bgvid">
<source src="/polina.webm" type="video/webm">
<source src="/polina.mp4" type="video/mp4">
</video>

Importante: el orden de los archivos de vídeo es de vital importancia; Chrome actualmente tiene un error en el que no va a reproducir automáticamente un vídeo WebM si llega después de cualquier otra cosa.

Una vez que se carga, la imagen del poster será reemplazada por el primer fotograma del vídeo, por lo que tiene sentido obtener esa imagen desde el mismo primer fotograma.

Para hacer vídeo a pantalla completa:

video#bgvid {
position: fixed; right: 0; bottom: 0;
min-width: 100%; min-height: 100%;
width: auto; height: auto; z-index: -100;
background: url(polina.jpg) no-repeat;
background-size: cover;
}

Los navegadores más antiguos no reconocerán los formatos de vídeo HTML5, pero aún deben reconocer la etiqueta básica <video> (con la excepción de IE8, que se detalla a continuación). Para el resto de navegadores creamos un elemento background-image, utilizando la misma imagen del marcador.

Date cuenta que el elemento <video> no acaba de cambiar el tamaño a pantalla completa en los dispositivos móviles, debido a los límites percibidos por el dispositivo de la relación de aspecto del vídeo. Estoy explorando mejores posibilidades para un futuro artículo.

Una nota sobre el IE 8

IE8 no sólo no reconoce la etiqueta <video>, no reconoce en absoluto ninguna HTML5, haciendo caso omiso de todos los elementos nuevos en la especificación. Esto es problemático, ya que queremos ser capaces de, al menos, colocar en el navegador el elemento background y una imagen de fondo en él. Para ello, necesitamos dos cosas: una sola línea de código JavaScript, dentro de un comentario condicional:

<!--[if lt IE 9]>
<script>
document.createElement('video');
</script>
<![endif]-->

Y, dentro de nuestro CSS, una declaración que permita a IE entender que este es un elemento a nivel de bloque:

video { display: block; }

Con estos en su lugar, IE8 puede por lo menos representar el elemento <video> como una imagen background (de fondo).

Alternativas JavaScript

Aunque yo diría que una solución HTML5/CSS es mejor que un framework, hay por lo menos un plugin de jQuery y algo de código JavaScript bastante bien establecidos que crean los resultados que se muestran aquí.

Conclusión

Vídeo "Background" puede ser una característica muy poderosa en un sitio, pero con este gran poder viene una gran responsabilidad: por favor usa estas funciones con criterio.

Artículo original: Create Fullscreen HTML5 Page Background Video, por Dudley Storey

Jesus_Caceres