Más allá de las imágenes con videos básicos para la Web

Aprende a crear videos básicos. Aumenta la participación.

¿Estás pensando en agregar videos a tu sitio web? A medida que los dispositivos y las conexiones de red se vuelven más rápidos y potentes, puedes ir más allá de las imágenes y agregar videos a tu caja de herramientas de técnicas para crear la Web. Las investigaciones muestran que los sitios web con videos generan más participación y ventas. Por lo tanto, aunque aún no hayas agregado videos a tus sitios, probablemente sea solo cuestión de tiempo que lo hagas.

Es muy probable que los archivos de video que agregues a tu sitio sean los más grandes que se descarguen. Por esa razón, es muy importante asegurarse de que los archivos se compilen para una reproducción rápida y estable para todos tus clientes. Si bien los videos pueden aumentar la participación y la satisfacción del cliente, un video que no se reproduce o se detiene durante la reproducción puede generar frustración en los clientes. En esta publicación, se enfoca en el uso de la etiqueta <video> HTML5 para la publicación de videos y, por lo tanto, no se abordará la transmisión de videos.

¡Comencemos!

La etiqueta <video>

Parece obvio, ¿no? Para agregar un video, debes agregar la etiqueta <video>, apuntar a una fuente y, luego, ¡listo!

<video src="myVideo.mp4">

Y tienes razón. En el nivel más alto, esto es todo lo que necesitas para agregar un video a la Web. Sin embargo, hay muchos atributos que puedes agregar a la etiqueta de video para mejorar el diseño y la publicación del video.

La etiqueta <source>

Quizás la mejor manera de mejorar la entrega de videos en la Web sea optimizar los archivos que se entregan al navegador. Para ello, usa la etiqueta <source>:

<video>
  <source src="myWebmVideo.webm" type="video/webm">
  <source src="myh265Video.mp4" type="video/mp4">
  <source src="myh264Video.mp4" type="video/mp4">
</video>

Esto hace referencia a tres archivos de origen independientes. El navegador comienza en la parte superior y elige el primer formato y códec que puede usar. En el mundo de los videos, el formato de archivo, generalmente llamado contenedor, se puede guardar con diferentes códecs, cada uno con distintos atributos. (Obtén más información aquí). En el ejemplo anterior, la primera opción es el formato WebM (que puede codificarse con códecs VP8 o VP9) y es compatible (al momento de la escritura) por el 78% de los usuarios globales. La segunda opción es el códec H.265 de mp4, que es compatible con iOS y Macs más recientes. Estos códecs son más nuevos y mejoraron la compresión de datos, a la vez que entregan la misma calidad de video que los formatos de video más antiguos.

La opción final de nuestra lista es mp4 H.264, que es compatible con el 92% de todos los usuarios de todo el mundo, pero es un formato más antiguo y, por lo tanto, suele ser mucho más grande que los videos WebM o H.265. En un ejemplo, puedes ver la diferencia en una película de dos minutos:

Códec Tamaño del archivo
VP8 5.5 MB
VP9 4.2 MB
H.265 5.4 MB
H.264 16.1 MB

La mejor optimización de rendimiento que puedes hacer para entregar mejor tus videos es la entrega de archivos más pequeños. Cuando se descarga un video más pequeño, la reproducción se produce antes y el búfer se llena más rápido. Esto genera menos interrupciones durante la reproducción de video. Además, se reduce la carga del servidor, lo que compensa los mayores requisitos de almacenamiento de varios archivos de video.

El atributo precargado

Los videos no pueden comenzar a reproducirse hasta que se descargue y almacene uno de ellos de forma local. Con el atributo preload, puedes controlar la cantidad de video que se descarga cuando se carga la página. Existen tres valores para el atributo de carga previa: auto, metadata y none.

preload='auto'

Si se usa 'auto', se descargará todo el video, sin importar si el usuario presiona el botón de reproducción o no. Esto permite una reproducción de video rápida, ya que se descarga de forma local antes de que el usuario presione el botón de reproducción. Desde el punto de vista del uso de datos (y de la carga del servidor), esto solo se debe usar cuando es muy probable que se mire el video. De lo contrario, se desperdiciarán todos los datos de una descarga de video completa.

preload='metadata'

Este es el parámetro de configuración predeterminado para la carga previa en Chrome y Safari. Cuando se usa 'metadata', se descarga el primer 3% del video. Si bien esto comparte las advertencias con 'auto', descargar solo el 3% del video tiene un costo de uso de datos o servidor mucho menor que el del video completo, a la vez que garantiza que una parte del video se almacene de forma local para un inicio rápido.

preload='none'

Esto ahorra la mayor cantidad de datos, pero hará que el inicio del video sea más lento cuando se presione reproducir, ya que, como se indica en la configuración, no se precargan kilobytes del video de forma local en el dispositivo. Este es el parámetro de configuración adecuado para los videos que están presentes, pero es poco probable que se reproduzcan. También se puede usar si el usuario habilitó el modo Lite en su navegador.

póster

Te recomendamos que tengas una imagen de póster que se muestre sobre la ventana del video antes de que comience a reproducirse:

<video src="myVideo.mp4" poster="/image/myVideoImage.jpg">
Un video sin póster muestra una pantalla negra antes de comenzar.
Sin imagen de póster

Un video sin póster muestra una pantalla negra antes de comenzar.

Un video con un póster es mucho más atractivo.
Con una imagen de póster

Un video con un póster es mucho más atractivo.

Si agregas una foto en lugar de un cuadro negro en la página, tu sitio web será más atractivo e interactivo. Sin embargo, usar el atributo poster agrega una descarga de imagen antes de que comience la descarga del video. Por ese motivo, te recomendamos que evites agregar un póster para los videos de reproducción automática (ya que la descarga adicional retrasará la descarga).

Controles de reproducción

Si agregas un atributo controls, se agregarán controles de reproducción. Sin ellos, los clientes no pueden iniciar ni detener el video. Debes agregar esto a los videos para que los usuarios puedan detenerlos y pausarlos, cambiar el volumen, etcétera. En el caso de los videos en segundo plano o en bucle, te recomendamos que omitas este atributo.

silenciado

El atributo muted hace que la reproducción comience en un estado silenciado. Si no se proporcionan controles, este permanecerá silenciado durante toda la reproducción. Si es así, podría ser conveniente quitar la pista de audio del video. Esto reduce aún más el tamaño del archivo de video que se entrega al cliente.

Al igual que con los contenedores y los códecs, quitar el archivo de audio, también llamado demuxing, también está fuera del alcance de este artículo. Puedes encontrar instrucciones en la Guía de manipulación de contenido multimedia.

bucle

Para publicar un video que repita el contenido (como un GIF animado), agrega el atributo loop. Como los archivos de video suelen ser mucho más pequeños que los GIF animados, este mecanismo te permite reemplazar los GIF por archivos de video.

Reproducción automática de videos

Si quieres que tu video se reproduzca de inmediato (por ejemplo, como video de fondo o un video que se repite como un GIF animado), puedes agregar el atributo autoplay:

<video src="myVideo.mp4" playsinline autoplay>

Dicho esto, para que un video se reproduzca automáticamente en navegadores para dispositivos móviles, también se debe agregar el atributo muted:

<video src="myVideo.mp4" playsinline autoplay muted>

Conclusión

Simplemente agregar un video a tu sitio web agregará un nuevo ámbito de participación para tus clientes, pero es importante que publiques el contenido de forma correcta, lo que garantiza que la reproducción del video sea fluida y sin interrupciones. El uso de los atributos integrados de la etiqueta <video> puede ayudarte mucho a mostrar videos impecables a todas las personas que visitan tu sitio web.