Actualmente, y gracias a la altas velocidad de transferencia de datos por internet, los contenidos de vídeo ya son parte fundamental del diseño web. Se puede insertar un vídeo en el html de tu web como un elemento más de la imagen. Es un momento igual de emocionante que cuando se empezaron a poder usar grandes imágenes para los fondos web (que provocaron el nacimiento de CSS2 con diferentes background-styles).

Ya que los temas para hablar sobre el mundo del vídeo son infinitos, aquí vamos a comentar sólo el uso de vídeos para integrarlos en el contenido de la web. ¿Por qué? Pues porque podría haber problemas, como siempre.

Hay que tener en cuenta que, por ejemplo, muchos usuarios bloquean la reproducción automática en el móvil en caso de no disponer de conexión WIFI; o que todos los navegadores no soportan los mismos formatos de compresión; o que el estilo responsive podría provocar encuadres sin sentido.

¿Para qué insertar un vídeo en el html de tu web?

Es la primera duda que debes resolver en caso de usar vídeo: ¿para qué usarlo? Porque la respuesta a esto te resolverá la siguiente duda obligatoria: ¿dónde almacenarlo? En general hay dos usos principales, que son:

1. Para mostrar mis vídeos

Este uso es el tradicional, donde el usuario debe pulsar un play para visualizar de manera voluntaria el contenido. Para embeberlo, nuestra recomendación es que uses una plataforma externa (YOUTUBE o VIMEO) para subir, convertir, almacenar y servir los vídeos. De esta manera ofreces una ventana a tu otra plataforma y le ahorras al usuario tener que cambiar de sitio. No obstante, este sistema no ofrece mucho juego a nivel de diseño y maquetación. Así que “embebe” el vídeo en tu web, usando las herramientas que te ofrece la plataforma, y listo. Quizás VIMEO PRO sí te añade algunas configuraciones avanzadas interesantes.

2. Para que el vídeo forme parte de la maquetación y el diseño

Este caso es el delicado e interesante. Delicado porque están en tu mano todas las opciones de exportación final del archivo (no te preocupes, esto es lo que vamos a comentar ahora). Y es interesante porque sirve realmente para que el vídeo forme parte de la decoración o estética de tu web. Juega con las funciones de autoplay, loop, cambia su apariencia mediante CSS, según el dispositivo, etc. Aquí sí, sube el vídeo a tu servidor. 

Formatos de vídeo en tu web

En caso de usar tu servidor, ya no necesitas un sistema de reproducción de vídeo para el navegador. Desde la aparición del HTML5 en 2014 los navegadores lo tienen incluido. Una cosa menos.

A la hora de insertar un vídeo, en el código HTML podrás usar parámetros básicos como loop, controls, etc para configurar cómo ha de ser la reproducción.

Depende de tí la edición y el formato final del vídeo. Por diversas razones no se ha establecido un único formato universal de vídeo, aunque el soportado por más dispositivos es el formato MP4. Podrás y deberás utilizar vídeos de sustitución con otros formatos (WEBM u OGG) para asegurar llegar a todos los navegadores web.

Te dejo una tabla de la situación de los formatos de vídeo dependiendo del motor del navegador. Como verás, por orden de universalidad están: MP4, WEBM y OGG. Haz clic en la imagen si quieres ver al completo la tabla, o las características en dispositivo móvil.

El código mínimo de inserción sería:

<video width=”X” height=”X” controls>
<source src=”movie.mp4″ type=”video/mp4″>
<source src=”movie.ogg” type=”video/ogg”>
Argggg. Tu navegador no soporta vídeo.
</video>

Sistema de codificación

Además del formato de compresión (MP4, WEBM y OGG), también influye el sistema de codificación. Lo más frecuente es la combinación compresión MP4 + codificación H264. Con esta pareja es casi seguro que el vídeo se verá correctamente. Aún así, es muy recomendable ofrecer la opción de sustitución con la versión WEBM.

Tamaño recomendado en vídeos de fondo

Bueno, aquí va otra de las grandes dudas y su respuesta: el tamaño sí que importa. Y mucho. La duda está entre si es mejor poca calidad y tamaño grande, o viceversa. Desde que las webs se visualizan tanto en ordenadores grandes como en dispositivos móviles, prefiero usar un vídeo de tamaño menor pero en buena calidad. De esta manera, al menos, aseguramos que se verá perfecto en muchísimos casos.

Por poner un ejemplo: si tengo un diseño web en el que se visualiza un vídeo a pantalla completa, su tamaño dependerá de la pantalla de cada usuario. En caso de tener que elegir un único tamaño para el vídeo, que es lo habitual, la duda sería qué tamaño utilizo, ¿el más grande posible? Pues yo creo que no. Si el peso final del vídeo en megas fuera el mismo prefiero usar un vídeo de 980 píxeles de ancho y buena calidad, que un vídeo de 1920 píxeles con menor calidad.

A igualdad de peso final del archivo, es mejor tener un vídeo de poco tamaño y buena calidad, que de mayor tamaño y poca calidad.

Ten en cuenta que los dispositivos pequeños van disminuir el tamaño del vídeo para adaptarlo a las posibilidades de su resolución de pantalla. Por lo que si usamos un vídeo grande estaremos tirando muchos de los píxeles que tanto nos ha costado comprimir.

Es cierto que por CSS podríamos poner un vídeo de diferente tamaño para cada tramo de responsive, pero bueno, ese es otro caso más finolis, que muchas veces puede ser una locura en caso de querer cambiar ese vídeo de vez en cuando.

Peso del vídeo

El peso influye en la calidad del vídeo. Pero cuando hablamos de vídeos en web lo más importante es el tiempo de carga del contenido. Este factor suele ser más decisivo en la impresión que se llevará el usuario, que la calidad del vídeo.

Si el vídeo pesa mucho, te recomiendo tener preparado algo como sustitución (imagen de fondo, color de fondo, etc) para que el primer impacto al entrar en la web no sea el de mirar un agujero.

Como este tiempo debe ser el mínimo posible, deberás apretar el vídeo y llevarlo al límite de sus posibilidades. Es cierto que siempre existe la opción de configurar un sistema de PRELOADER para que no se pueda acceder a la web si el contenido no está preparado.

A grandes rasgos, creo que un vídeo para pantalla completa, que no dure más de 10 segundos, se debería poder apretar a menos de 10 megas. Esto ya es mucho peso (todo el resto de contenidos de una página web pueden sumar menos de 1 mega). Ya sabes: el peso en web se convierte en tiempo :)

Resumen de formato, peso y duración de vídeo de fondo

Según los visto, te recopilo unos parámetros generales para la compresión de tu vídeo. Es una recomendación a grandes rasgos sin pillarme los dedos. Por supuesto depende del vídeo, de tí y de lo que creas que tu público puede esperar a que cargue el vídeo. Esto sería:

  • Duración máxima: 10 segundos.
  • Peso máximo: 1’5 megas por segundo de duración (10 megas máximo)
  • Tamaño Máximo: 980 píxeles
  • Formato: MP4 + H264
  • Velocidad Bits: 2.000 / 5000 kbps
  • Audio: elimína la pista de audio :)

 

herramienta para editar videos online

Herramienta web gratuita para editar vídeos online

Hay muchas webs que ofrecen este servicio de compresión y conversión. Entre todos los editores de vídeos online, nosotros hemos utilizado CLOUD CONVERT por su agilidad, velocidad y facilidad, ya que no requiere registro ni nada para utilizarla. Sube tu archivo y haz tus pruebas de calidad.

Desventajas de usar tu propio servidor para insertar un vídeo en el html de tu web

No nos olvidamos que existe la opción de usar una plataforma externa para almacenar y servir luego los vídeo en tu web. Estos son algunos factores a tener en cuenta:

 

  1. El formato de tu vídeo no será cambiado automáticamente al subirlo a tu servidor. Será tu responsabilidad ofrecer diferentes formatos y la universalidad de su reproducción. En esto ayudaron mucho YOUTUBE y VIMEO, por ejemplo.
  2. La velocidad del servidor será inferior al de una plataforma de video profesional. Además no podrás ofrecer que el usuario cambie la calidad del vídeo fácilmente dependiendo de su conexión (como hacen las grandes plataformas en su reproductor).
  3. La estabilidad del servicio también será menor. Nuestros amigos de YOUTUBE o VIMEO fallan poco (o al menos suelen fallar menos).
  4. Te afectará el uso de ancho de banda (megas en transferencia y almacenamiento). Por lo que si tu web la visitan millones de personas puedes tener problemas de caída de página, subida del precio del servidor por aumento del uso de ancho de banda. Es lo malo de ser famoso y atractivo.
Volver al glosario
Agencia de Branding

Somos una agencia de branding. Todos nuestros proyectos tienen algo en común: la creatividad y la estrategia. Contáctanos si tienes un proyecto o si te gustaría saber más sobre nuestro método de trabajo.

Conócenos