Introducción
Corría el año 1895 cuando unos hermanos apellidados Lumiere desataron un fenómeno mundial que revolucionó la forma de ver la vida y de llevar mensajes a cualquier parte. Cuando hablamos de “video” englobamos todas las artes en que se transforma (cine, televisión, series, etc.) y una enorme lista de recursos en las que por medio de imágenes a gran velocidad conseguimos transmitir un mensaje.
En los últimos años el video ha evolucionado de tal forma que actualmente. Según el CISCO el 80% del trafico de la red es video. Puede resultar un dato impresionante pero si te digo nombro a Netflix, Zoom, Youtube, Tiktok, Facebook, PrimeVideo… ya entiendes que el video es el recurso preferido para comunicarse en el medio preferido por los usuarios: internet.
En este artículo vamos a hablar del video y de la importancia de saber configurarlo correctamente en tu proyecto web. Verás que hay muchas cosas que no sabías y estabas pasándolas por alto. Conocer bien el producto te hará tratarlo con más confianza.
Primeros pasos, lo más importantes
Como no podía ser de otra manera el primer paso es que pienses detenidamente en el destino del video que vas a usar. Es evidente que cada video es un mundo y por tanto cada video, o listado de videos tienes que estudiarlos. El resultado es que en producción ver estos vídeos sea un paseo en barca donde disfrutas de su contenido. Pero sabemos que en ocasiones no es así y esta mala planificación provoca que el usuario no obtenga una buena experiencia en tu sitio web.
A continuación veremos los aspectos más importantes a tener en cuenta a la hora de planificar un proyecto web que incluya vídeos.
Poster
Cuando ponemos un vídeo en una web no siempre queremos que se reproduzca.
Hay videos cortos que se reproducen en bucle y asumen un papel de background, pero si se trata de un video que quieres que se vea porque su contenido es importante has de configurarle un poster . Se trata de esta etiqueta:
<video src="videofile.ogg" autoplay poster="posterimage.jpg"></video>Obtenemos dos ventajas al establecerse como un poster:
- La pantalla de portada será más atractiva. Probablemente tu video tenga el primer frame en negro, así que si no configuras un poster, tu cuadro de video será una pantalla negra vacía.
- Este poster carga al instante y puede que el vídeo, si es muy pesado, tarde un poco en cargar. Conseguimos enmascarar esa carga en segundo plano. Si tienes muchos vídeos en una misma URL que cargan a la vez es un proceso lento así que puedes hacer que cargue al reproducirlo. Esto lo conseguimos con la etiqueta preload:
<video src="videofile.ogg" autoplay preload="none"></video>Está de más decir que el poster ha de tener las mismas dimensiones en px que el video y una resolución de 72ppx. Y por supuesto ha de ser atractivo si quieres que vean el video.
Resoluciones
La palabra resolución, cuando hablamos de video, sufre un mal uso constante. La resolución de un video no es mas que la cantidad de píxeles de alto por ancho. No podemos llamar resolución a .H264 o a 16:9. Por tanto, aclarado lo que es la resolución, veamos cuales son los estándares más usados:
- FHD, 1920x1080px. La más usada, aunque el 4k empieza a comer terreno.
- HD, 1280x720px. Era la más usada pero la desbancó en poco tiempo FHD.
- 4k, 3840 x 2160px. Aún en crecimiento porque precisa una gran tasa de datos y una pantalla con mucha densidad de pixeles.
La resolución es junto con el formato quien marcará el peso del vídeo por segundo.
Aquí es donde hemos de tener un gran tacto pues un video muy pesado puede afectar gravemente la usabilidad de la web. En este caso y al igual que pasará con la relación de aspecto, necesitamos una resolución diferente para cada dispositivo. Pero cuidado en este tema porque las pantallas están cambiando y cada vez tienen mayor densidad de píxeles. Por ejemplo, una pantalla de un desktop estándar podríamos decir que está en FHD. ¿Y una pantalla mobile? Pues aquí se ha desatado la locura y por ejemplo IPhone12 tiene 2340×1080 así que menos de FHD sería un error.
Lo aconsejable es hacer un desarrollo donde detectemos la resolución en ancho de la pantalla y en función de eso carguemos los vídeos con las resoluciones óptimas a ese dispositivo. Un código similar a este sería lo aconsejable:
<video id="video">
<source src="movie.webm" type="video/webm;">
<source src="movie.mp4" type="video/mp4;"/>
<source src="movie.ogv" type="video/ogg;"/>
</video>
<script type="text/javascript">
var srcRes = null;
if (screen.width > 1920){
srcRes = "_4k.";
} else if (screen.width > 1280) {
srcRes = "_FHD.";
} else {
srcRes = "_HD.";
}
document.querySelectorAll('source').forEach(el => el.src = el.src.replace(".", srcRes));
</script>
Este código detecta el ancho de la pantalla del dispositivo, no la ventana del navegador. Para que funcione el código simplemente has de tener tu video en diferentes resoluciones y con un nombre igual para todos pero con la matiz de la resolución: _HD, _FHD o _4K.
Formatos
Este es uno de los temas más conflictivos a la hora de cargar un vídeo. Con el resto de ajustes el video se verá mejor o peor, tardará más en cargar o menos, pero por el formato del vídeo puede pasar que se vea o no el video dependiendo del dispositivo o navegador que uses. El formato hace referencia únicamente al tipo de archivo que exportamos.
Del formato podemos diferenciar la extensión y el códec. La extensión es el paquete que engloba ese formato (.mov, .mp4, .avi, etc.) y el códec es el leguaje de compresión que se usa para hacer que el video pese menos (MPEG2, H264, WebM, etc.).
En este caso la etiqueta video cuenta con una sub-etiqueta source y en su atributo src se puede colocar el formato de video. Así para una etiqueta de video, tenemos varios src y cada uno aporta el video en diferente formato.
<video>
<source src="movie.webm" type="video/webm;"/>
<source src="movie.mp4" type="video/mp4;" />
<source src="movie.ogv" type="video/ogg; " />
<video>
Relaciones de aspecto
La relación de aspecto es la relación proporcional entre el ancho y el alto del frame. En esencia, es la forma del video. Hay multitud de estándares para configurar esta relación de aspecto entre los que vamos a destacar los más usados:
- 16:9. Se trata del estándar más usado actualmente tanto en web como en dispositivos. Su resolución más usada sería FHD 1920x1080px.
- 4:3. Es una relación que está perdiendo popularidad pues nos ofrece un frame muy cuadrado y el vídeo se aprecia más atractivo en formatos panorámicos. Su resolución mas usada sería 1280x960px, aunque el origen de esta relación proviene del sistema PAL que todos hemos tenido en casa, 720x576px.
Aunque lo normal es usar un estándar hay ocasiones en que el proyecto precisa unas relaciones de aspecto diferentes en cada dispositivo. Por ejemplo un banner en desktop con un video de fondo puede tener una relación de aspecto muy panorámica. Sin embargo en mobile su relación de aspecto será cuadrada o vertical. Aquí es donde entra en juego CSS y sus ajustes para background.
Veamos el siguiente ejemplo:
En este caso el video de fondo lo hemos configurado con la posición absoluta y en cada dispositivo jugamos con top, bottom, right, left y márgenes automáticos. En ocasiones hay que tener videos demasiado versátiles para que la perdida de información que se da de un dispositivo a otro sea asumible.
Reproductor
Por último veamos el modo en que queremos que el usuario interactúe con el video que le presentamos. Como hemos hablado anteriormente, si el video es un background, no tiene sentido que tenga botones, y si no quieres que salgan corriendo de tu página, tampoco debería tener sonido. Por eso vamos a hablar de los vídeos con los que el usuario debe interactuar. La etiqueta video nos ofrece estos atributos:
- Autoplay: Booleano para que el video se reproduzca automáticamente tras cargarse.
- Controls: Booleano para mostrar o no el panel de control del video de tu explorador.
- Muted: Booleano para iniciar el vídeo sin sonido.
- Loop: Booleano para indicar la reproducción en bucle del vídeo.
Hay casos en los que hay que desarrollar un estilo personalizado de reproductor. Para ello basta con no poner el atributo controls y configurarlos tu mismo con js y css. Os muestro un pequeño ejemplo:
<div class="container-video">
<video id="video" src="movie.mp4"></video>
<button onclick="reproducir()">Reproducir</button>
<button onclick="pausar()">Parar</button>
</div>
<script type="text/javascript">
window.reproducir = function() {
document.getElementById("video").play();
};
window.pausar = function() {
document.getElementById("video").pause();
};
</script>
Conclusión
El vídeo es un elemento complejo al que prestar mucha atención porque configurarlo bien nos devolverá una experiencia positiva de nuestro desarrollo.
Por supuesto hay muchos temas que no hemos hablado en este video relativos al video como los fps (fotogramas por segundo), la tasa de bits de video o los campos (i o p), pero quizás esos temas sean parte del diseño del propio video y no de la implementación.
Para terminar me gustaría dejar ese fragmento del que empecé hablando porque como dicen es importante saber de dónde vienes para saber quién eres: