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

Video básico de aprendizaje. Aumenta la participación.

Doug Sillars

¿Estás pensando en agregar un video a tu sitio web? A medida que los dispositivos y las conexiones de red se volvieron más rápidos y potentes, puedes ir más allá de las imágenes y agregar videos a tu conjunto de herramientas de técnicas para crear la Web. Las investigaciones demuestran 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, es probable que solo sea cuestión de tiempo para 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 ese motivo, es muy importante asegurarse de que los archivos se creen para una reproducción rápida y estable para todos los clientes. Si bien el video puede aumentar la participación y la satisfacción del cliente, un video que no se reproduce o que se detiene durante la reproducción puede frustrar al cliente. Esta publicación se enfoca en el uso de la etiqueta <video> de HTML5 para entregar videos y, por lo tanto, no abarcará videos en streaming.

¡Empecemos!

La etiqueta <video>

Parece obvio, ¿no? Para agregar un video, debes agregar la etiqueta <video>, apuntar a una fuente y, luego, comenzar a correr.

<video src="myVideo.mp4">

Y estás en lo cierto. 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 publicación de videos en la Web sea optimizar los archivos que se entregan al navegador. Para hacerlo, 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 fuente separados. El navegador se inicia 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, que suele llamarse contenedor, se puede guardar con diferentes códecs, cada uno con diferentes atributos. (Obtén más información aquí). En el ejemplo anterior, la primera opción es el formato WebM (que se puede codificar con códecs VP8 o VP9), y es compatible (al momento de escribir) el 78% de los usuarios globales. La segunda opción es el códec H.265 de mp4, que es compatible con iOS y Mac más recientes. Estos códecs son más nuevos y tienen una compresión de datos mejorada, a la vez que entregan la misma calidad de video que los formatos de video más antiguos.

La última opción de nuestra lista es el mp4 H.264, que es compatible con el 92% de todos los usuarios globales, pero tiene un formato 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 para una película de dos minutos:

La publicación de archivos más pequeños es la mejor optimización del rendimiento que puedes implementar para publicar mejor tus videos. Cuando se descarga un video más pequeño, la reproducción ocurre antes y el búfer de video se llena más rápido. lo que genera menos bloqueos durante la reproducción de video. Además, la carga del servidor disminuye, lo que atiende los mayores requisitos de almacenamiento de varios archivos de video.

El atributo precargado

Los videos no pueden comenzar a reproducirse hasta que se hayan descargado y almacenado de forma local. Con el atributo de precarga, puedes controlar la cantidad de video que se descarga cuando se carga la página. Hay tres valores para el atributo de precarga: auto, metadata y none.

preload='auto'

Si se usa 'auto', se descargará todo el video, sin importar si el usuario presiona reproducir o no. Esto permite una reproducción rápida de video, ya que el video se descarga de forma local antes de que el usuario presione reproducir. Desde el uso de datos (y la perspectiva 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 completa de un video.

preload='metadata'

Esta es la configuración predeterminada para la precarga en Chrome y Safari. Cuando se usa 'metadata', se descarga el primer 3% del video. Si bien esto comparte advertencias con 'auto', descargar solo el 3% del video implica 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 del video.

preload='none'

Esto ahorra la mayor cantidad de datos, pero hará que el inicio del video sea más lento cuando se presione la reproducción, ya que, como indica la configuración, se precarga cero kilobytes del video de forma local en el dispositivo. Esta es la configuración adecuada para los videos que aparecen, pero que tienen pocas probabilidades de reproducirse. Esto también se puede usar si el usuario habilitó el modo lite en su navegador.

póster

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

<video src="myVideo.mp4" poster="/image/myVideoImage.jpg">

Si agregas una foto en lugar de un cuadro negro en la página, tu sitio web será más interactivo y atractivo. Sin embargo, si usas el atributo poster, se agrega una descarga de imagen antes de que comience la descarga del video. Por ese motivo, te recomendamos que no agregues un póster para los videos que se reproducen automáticamente (ya que la descarga adicional retrasará la descarga del video).

Controles de reproducción

Cuando se agrega un atributo controls, se agregan controles de reproducción. Sin ellos, tus clientes no podrán iniciar ni detener tu video. Agrega esto para los videos, de manera que los usuarios puedan detenerse y pausar, cambiar el volumen, etcétera. Para los videos de fondo o en bucle, te recomendamos omitir este atributo.

silenciado

El atributo muted hace que la reproducción comience en silencio. Si no se proporcionan controles, permanecerá silenciado durante toda la reproducción. Si lo deseas, puede tener sentido 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, está fuera del alcance de este artículo. Encontrarás las instrucciones en la Hoja de referencia para manipulación de contenido multimedia.

bucle

Para publicar un video que repita indefinidamente 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.

Video de reproducción automática

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

<video src="myVideo.mp4" 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" autoplay muted>

Conclusión

Con solo agregar un video a tu sitio web, se agregará un nuevo ámbito de participación para tus clientes, pero es importante que publiques el contenido de manera correcta, lo que te permitirá asegurarte de que la reproducción del video sea fluida y no tenga pausas. Usar los atributos integrados de la etiqueta <video> puede ser de gran ayuda para ofrecer videos impecables a todas las personas que visiten tu sitio web.