Crear Página HTML5 con un Vídeo de Fondo de Pantalla Completa

NO existe algo que cautive mas, que Diseñar contenido dinámico e interactivo, el crear una Página  HTML5 o Página Web con un Vídeo de Fondo a Pantalla Completa, es una de las estrategias que los profesionales del Diseño Web utilizan cada vez mas.

Aunque todavía no podemos definir un vídeo de Fondo o la propiedad CSS background-image, todavía solo admite imágenes .SVG, Mapas de Bit .BMP o valores de Color y Gradientes (degradado). Existen estrategias mediante las cuales podemos Engañar o Aparentar este poderoso efecto.

La estrategia es simple y consiste en Forzar al elemento HTML5 de vídeo, a aparecer detrás de otros elementos HTML. También que este vídeo ocupe la pantalla completo del navegador, por lo que sus características deben ser tan delicadas como las de una imagen de fondo.

 

Consideraciones y Limitaciones


Antes de trabajar, existen algunos factores que debemos considerar:

  • NO considere utilizar esta técnica, por el simple hecho que ya aprendió a implementarla: El contenido de un vídeo debe y tiene la capacidad de amplificar el mensaje de nuestro Sitio Web, no lo utilice por el hecho que se ve visualmente bonito o atractivo.
  • El vídeo es probable que usted prefiera establecerlo en autoplay (automáticamente se reproduzca al cargar), pero definitivamente debe ser silenciado de forma predeterminada; mi recomendación es que idealmente, no debería incluir sonido en absoluto. (Usted puede crear fácilmente un botón de activar el sonido para el vídeo con JavaScript). La causa de esto es para evitar incomodidad o ruido al ser un vídeo que inicia o que no se ha cargado completamente.
  • El vídeo debe mostrar una imagen de marcador de posición/fondo, poner detrás una imagen de fondo estática para los navegadores que NO soportan HTML5. La imagen de marcador de posición (imagen de fondo) también se utilizará como un fondo predeterminado en los dispositivos móviles: muchos de los teléfonos y las tabletas no son compatibles con autoplay en los vídeos, por razones obvias.
  • La duración es importante: Un vídeo demasiado corto puede sentirse repetitivo (como la mayoría de vídeos se establecerán en bucle/lazo infinito), mientras que un vídeo con duración larga de tiempo se convierte en una narración en sí misma, y por lo tanto merece ser un elemento de diseño independiente. Yo sugeriría una duración de aproximadamente 15 – 45 segundos.
  • La accesibilidad y Legibilidad es importante: cualquier texto colocado por adelante/encima del vídeo debe ser de alto contraste. Los usuarios deben tener fácil acceso a una interfaz de usuario para el control de pausa y sonido (si llegase a incluirse) en el vídeo; Lo ideal sería que el vídeo debe reproducirse automáticamente.
  • El Ancho de banda es un gran problema . El vídeo tiene que ser pequeño, y estar en un formato de compresión de mayor eficacia posible, mis recomendaciones son .OGV .WEBM y .MP4. Al mismo tiempo, hay que considerar diferentes resoluciones a través de diferentes dispositivos y sus pantallas asociadas. En casos avanzados, es posible que desee considerar el detectar en el usuario mediante programación el tipo de conexión, y resolución del tamaño del navegador, con el objetivo de enviar diferentes versiones de calidad del vídeo para diferentes características. Trate de mantener el vídeo por debajo de los 5 MB; Lo ideal sería que el vídeo NO supere los 1024k. También utilizar una resolución de vídeo Media de 640×360 aproximadamente y que sea re-dimensionada a mayores resoluciones de navegador, que podría ser una buena alternativa.

Con lo anterior, demos inicio a nuestro ejercicio, para lo cual necesitamos crear la siguiente estructura de carpetas:

  • Carpeta de Trabajo la cual llamaremos: “Mi_Pagina” o como prefieras
  • Contenida dentro de Mi_Pagina crearemos unas sub-carpetas llamadas “resource”, “js” y “css”
Vuxmi.Com Estructura de Carpetas
Estructura de Carpetas para ejercicio de Página Web con Vídeo de fondo

 

Esquema Básico de la Pagina HTML5


El esquema básico de la Pagina Web para nuestro vídeo de fondo de pantalla completa, debiera ser similar a lo siguiente:

<!DOCTYPE html>
<html >
   <head>
      <meta charset="UTF-8">
      <title>Página HTML5 con un Vídeo de Fondo de Pantalla Completa</title>
      <meta name="description" content="Vuxmi.com Página HTML5 con un Vídeo de Fondo de Pantalla Completa">
      <link rel="stylesheet" href="css/style.css">
   </head>
   <body>
      <video poster="Carpeta/Imagen.jpg" id="Identificador" playsinline autoplay muted loop>
         <source src="Carpeta/ArchivoFormato1.webm" type="video/webm">
         <source src="Carpeta/ArchivoFormato2.mp4" type="video/mp4">
      </video>
      <div id="vuxmi">
         <h1>Titulo</h1>
         <p>Texto General<br/>Creado por: Alexander Escobar</p>
         <button id="Button_Sonido">Sonido</button>
         <button id="Button_Pausa">Pausa</button>
      </div>
      <script src='js/jquery-X.X.X.min.js'></script>
      <script src="js/ControlesVideo.js"></script>
   </body>
</html>

 

Trabajando con el CSS


Construir el Vídeo en HTML5, es de la forma habitual:

<video poster="Carpeta/Imagen.jpg" id="Identificador" playsinline autoplay muted loop>
   <source src="Carpeta/ArchivoFormato1.webm" type="video/webm">
   <source src="Carpeta/ArchivoFormato2.mp4" type="video/mp4">
</video>

Importante: el orden de los archivos de vídeo es de vital importancia; Como recordaran, de acuerdo a las especificaciones, el navegador debe tratar de reproducir el primer vídeo de la lista al no lograrlo (no esta disponible, tiene error o el navegador no posee la capacidad), este automáticamente pasara a el siguiente archivo y así sucesivamente hasta agotar la lista.

La imagen de la propiedad HTML5poster” de la “linea 1, Construcción del Vídeo” será la que reemplazara al vídeo, desde que se carga y estará disponible hasta que el vídeo de inicio (incluso si no llegase a reproducirse por cualquier motivo). Por lo anterior, tiene sentido que la imagen elegida, sea el Primer Fotograma del vídeo.

NOTA: Chrome actualmente tiene un error (bug) en el que NO va a reproducir automáticamente un vídeo de formato .WEBM, si este se encuentra como ultima opción, lo recomendable es colocarlo al inicio de la lista.

Haciendo que el Vídeo sea Pantalla Completa y de Fondo


Las propiedades que hacen la magia en el CSS, son los siguientes:

   min-width: 100%;
   min-height: 100%;
   width: auto;
   height: auto;

Las propiedades min-width, min-height, width y height, están configurados que tomen el ancho y alto completo del navegador con el valor 100%, los valores “auto” indican que detecte y sea calculado el tamaño en forma automática.

 

   z-index: -100;

La propiedad “z-index” indica la capa de posición del objeto, dicho en otras palabras indica el nivel de profundidad, algo así como decir enviar al frente o enviar atrás de otros objetos. El valor -100 indica que estará atrás hasta la posición 100, un valor positivo haría que el vídeo estuviera encima de todos los demás objetos HTML5. Como nuestro vídeo posee el valor Negativo -100, todos los demás objetos a pesar que NO tengan esta propiedad definida, tienen automáticamente valor de Cero. Técnicamente bastaría poner el valor -1 a nuestro vídeo para que este detrás de todo.

Los navegadores más antiguos no reconocerán los formatos de vídeo, pero todavía deben reconocer la etiqueta básica <video> (con la excepción de IE8, que se detalla mas adelante en este articulo).Para aquellos navegadores creamos un elemento background-image, utilizando la misma imagen de marcador de posición. En esta etapa única Safari (móvil y de escritorio) requiere que el prefijo de proveedor -webkit para las transformaciones, por lo que se ha incluido en el código; si también apuntan a Firefox 15 o previas versiones, tendrán que incluir una versión -moz con el prefijo de las transformaciones CSS.

 

Una Nota sobre IE8


No sólo IE8 no reconoce la etiqueta <video>, que no reconoce ninguna etiqueta HTML5 en absoluto, haciendo caso omiso de cada nuevo elemento en la especificación. Esto es problemático, ya que queremos ser capaces de, al menos, el estilo del elemento en el navegador y colocar una imagen de fondo en ella. 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 posteriormente, dentro de nuestro CSS, una declaración que permite a IE a entender que se trata de un elemento de bloque para permitirnos habilitarlo o des-habilitarlo.

video { display: block; }

Con estos cambios en el lugar correcto, permitirá a Internet Explorer 8 poder utilizar el elemento de estilo de <video> y utilizar una imagen de fondo.

 

Trabajando con Móvil


El ver un vídeo de fondo de pantalla completa, en dispositivos móviles, presenta varios retos:

  • Consumo Adicional de Plan de Datos, por el streaming de los vídeos.
  • Lo anterior implica adicionar una Interfaz de Control del Vídeo y Sonido (algo ya veníamos mencionando)
  • El tamaño de los Botones debe tener la capacidad de facilitar toques.

Muchas plataformas móviles se niegan a la reproducción automática de vídeo HTML5 para evitar cargos/cobros de datos adicionales o excesivos (a excepción del IOS 10 iPhones), en tales casos, el vídeo se muestra con un botón de reproducción incorporado, que a su vez, puede capturar toques en el dispositivo, bloqueando enlaces que pueden estar encima de la reproducción del vídeo. Es decir los controles habituales del Reproductor de vídeo podrían entrar en conflicto con nuestro diseño.
Si bien es posible apoyarnos a la reproducción automática de vídeo con JavaScript, la solución más fácil es utilizar una consulta de medios (detectar la configuración del usuario o navegador) agregando la característica de que se apague el vídeo por completo en pantallas más pequeñas(Dispositivos Móviles), sustituyendo la imagen de marcador de posición en el fondo. Para realizar esto necesitamos incluir a nuestro CSS existente, lo siguiente:

@media screen and (max-device-width: 800px) {
   html {
      background: url(Imagen.jpg) #000 no-repeat center center fixed;
   }
   #SelectorVideo{
      display: none;
   }
}

La consulta de medios en sí es la parte más importante, y tendrá que ser modificada en base a las expectativas tanto del lugar y un espacio móvil cambiante. Actualmente, se detecta si la pantalla es físicamente menos de 800 píxeles de ancho, y si es así cambia la imagen de vídeo para un fondo estático . Tenga en cuenta que esto ignora la retina de un iPad 3, todavía registrará una resolución horizontal de 768px bajo esta consulta de medios, a pesar de que su resolución real es mucho mayor.

NOTA: A partir de IOS 10, iPhone se esta arriesgando por reproducción automática cuando es incrustado un vídeo en línea, con el atributo correcto (playsinline) siempre y cuando el vídeo o no tiene pista de audio, o es silenciado.

Ver la siguiente linea de código:

 <video poster="resource/VuxmiCom.jpg" id="bgvid" playsinline autoplay muted loop>

 

Integrando la Accesibilidad y Legibilidad


Los usuarios con trastornos vestibulares pueden sentirse desorientados por el movimiento, especialmente cuando se trata de leer el texto delante de una imagen en movimiento, mientras que los usuarios con características autista pueden verse afectados por los cambios rápidos. Para aquellos usuarios (y todos los demás) un botón de pausa debe ser de fácil acceso.

   <button id="Button_Pausa">Pausa</button>
   <button id="Button_Sonido">Sonido</button>

Para los usuarios con navegadores que tienen una configuracion de Accesibilidad Prefers Reduced Motion (actualmente Safari 10.1), podemos añadir la siguiente secuencia de comando para la parte inferior de la página:

var vid = document.getElementById("Identificador del Grupo de Video"),
pauseButton = document.getElementById("Button_Pause");
if (window.matchMedia('(prefers-reduced-motion)').matches) {
   vid.removeAttribute("autoplay");
   vid.pause();
   pauseButton.innerHTML = "Paused";
}

Esto establecerá el vídeo a una pausa por defecto para los usuarios.

Idealmente, el vídeo también debe detenerse y se desvanecen cuando se ha reproducido una vez. Agregue lo siguiente a la secuencia de comandos:

function vidFade() {
   vid.classList.add("stopfade");
}

vid.addEventListener('ended', function() {
   // only functional if "loop" is removed 
   vid.pause();
   // to capture IE10
   vidFade();
});

pauseButton.addEventListener("click", function() {
   vid.classList.toggle("stopfade");
   if (vid.paused) {
      vid.play();
      pauseButton.innerHTML = "Pausa";
   } else {
      vid.pause();
      pauseButton.innerHTML = "Pausado";
   }
})

El JavaScript pide un poco de CSS a considerar adicionar a nuestra hoja de estilo, recordar utilizar los prefijos de proveedores, la cual en nuestro ejemplo ha sido eliminadas para mayor claridad:

#video Selector {
   transition: 1s opacity;
}
.stopfade { opacity: .5; }

Recuerde también, escribir CSS para hacer desaparecer el elemento de botón en dispositivos móviles, dada la solución anterior: de lo contrario, el botón aparecerá en iPhones con iOS 9 o inferior, sin ningún propósito aparente. Es decir el vídeo indicara “Pausado” cuando se esta reproduciendo o viceversa.

 

Utilizar una libreria JavaScript, como Alternativa


Aunque mi recomendación es utilizar una solución HTML5 / CSS como marco de trabajo siempre sera la mejor opción, (menos código, menos capas de programación, mas personalizado) hay quienes preferirán utilizar alguna librería o plugin jQuery que les permita pensar menos y proporcionara resultados similares a los que hemos expuesto en nuestro ejemplo.

Aqui el Link Jquery VideoBackGround

 

Resumen:


  • Utilizar un vídeo con el objetivo de transmitir algo o Amplificar el impacto de nuestro Sitio Web, NO solo por apariencia.
  • Establecerlo en Autoplay el vídeo, sin sonido de ser preferible.
  • Mostrar una Imagen de Fondo, en caso NO se puede reproducir el vídeo o para dispositivos que poseen poco ancho de banda con resoluciones bajas de pantalla como los Dispositivos móviles.
  • Un vídeo con duración de aproximadamente 15 – 45 segundos
  • Cualquier texto colocado por adelante/encima del vídeo debe ser de contraste alto, fácil de leer.
  • Adicionar una interfaz para control de pausar y sonido.
  • Utilizar un vídeo de resolución Media 640×360 para poder ser dimensionado de acuerdo al tamaño de navegadores, debe ser en el formato de compresión mas eficiente .OGV .WEBM y .MP4 preferiblemente y no pesar mucho en tamaño físico.
  • La imagen elegida, sea el Primer Fotograma del Vídeo.

 

Link de Descarga del Ejercicio “Crear Página HTML5 con un Vídeo de Fondo de Pantalla Completa

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *