Cómo optimizar mejor sus videos para la Web: una guía rápida

Foto de perfil del autor

Los sitios web modernos se componen de HTML, elementos dinámicos de JavaScript, imágenes, video y otros medios enriquecidos. En la mayoría de los sitios web, los medios enriquecidos representan la mayor parte del tiempo de carga de la página y son los elementos más pesados ​​que el usuario necesita recuperar en su ancho de banda limitado.

Los videos en la web son un arma de doble filo. Por un lado, pueden hacer que un sitio web sea mucho más atractivo y atractivo para los usuarios. Por otro lado, pueden crear problemas de usabilidad, problemas de rendimiento y problemas de seguridad.

En este artículo, explicaré varias formas de optimizar videos, para asegurar que contribuyan a la experiencia del usuario, sin dañarla. Cubriré cómo seleccionar el formato de video adecuado para su sitio web y aplicación web, y varios consejos para mejorar la usabilidad y el rendimiento del contenido de video.

Selección de formatos de archivo de video para la web

La optimización de video comienza con la selección del formato correcto. Existen muchos formatos de video por ahí, pero muchos no son adecuados para su uso en la web, debido a problemas de rendimiento, experiencia del usuario o problemas de seguridad.

Revisemos algunos formatos modernos que son adecuados para sitios web y comprendamos sus ventajas, desventajas y propiedades técnicas. Estos son los principales formatos de video que debe considerar usar en su sitio web o aplicación web.

Formatos de archivo de video progresivo:

  • H264 / AVC – este formato utiliza un contenedor mp4 y codificación H264 / AVC. La mayoría de navegadores y sistemas admiten este formato, incluidas las aplicaciones desarrolladas para iOS y Android.
  • H265 / HEVC – este formato usa un contenedor mp4 y codificación H265 / HEVC. Los formatos H265 / HEVC logran una alta eficiencia de compresión, que es aproximadamente un 50% más liviana que H264 / AVC. Sin embargo, H265 / HEVC solo es compatible con dispositivos Apple.
  • VP9 – Este formato fue creado por Google para proporcionar una alternativa de formato de código abierto y libre de regalías a H265. VP9 puede reducir el tamaño del video con un mínimo de borrosidad, si es que lo hace. Sin embargo, solo es compatible con Chrome y Android y es un poco menos eficiente que H265.
  • AV1 – este formato usa mapeos para contenedores MKV y MP4. AV1 no tiene licencia y logra una eficiencia de compresión superior o similar en comparación con H265.

Formatos de archivo de tasa de bits adaptable (ABR):

  • HLS – es un protocolo ABR desarrollado por Apple. Es compatible con dispositivos Apple, Safari y aplicaciones iOS, y se puede adaptar para código abierto. El protocolo puede dividir tanto H264 como H265 en trozos que se sirven como mp4, pero H264 produce resultados significativamente mejores.
  • MPEG-DASH – es un protocolo ABR independiente del códec. Admite muchos tipos de codificación, incluidos VP9, ​​AV1, H265 y H264. Este formato actualmente viene con menos soporte que HLS y, por lo tanto, es menos recomendado para sitios web comerciales y especialmente tiendas de comercio electrónico.

Otros consejos de optimización de video para sitios web y aplicaciones web

Tenga en cuenta que los siguientes consejos son útiles si aloja su propio video y lo transmite directamente desde su servidor web. Si opta por alojar su video en una plataforma de video en línea (OVP) como YouTube o Vimeo, la plataforma se ocupará de la mayoría de estos problemas.

Hacer que los videos sean utilizables

Lo más importante que debe recordar al optimizar los videos en línea es brindar a los usuarios una buena experiencia. A continuación, se muestran algunos puntos clave a considerar para mejorar la participación de los usuarios:

  • Cambiar el tamaño del video para dispositivos móviles – si cambia el tamaño del contenido de la página para dispositivos móviles, también debe cambiar el tamaño del contenido de video. Prepare múltiples versiones de archivos de video, adaptadas a los tamaños de pantalla más comunes utilizados por sus visitantes.
  • No reproducir automáticamente – No es una práctica común en la web no reproducir automáticamente el video, porque es perturbador y molesto para los usuarios. Sin embargo, en algunos casos, es posible que desee reproducir automáticamente un video de fondo silencioso, dando a los usuarios la opción de activar el audio.
  • Admite usuarios con poco ancho de banda – no todo el mundo mira videos a través de conexiones de banda ancha de alta velocidad. Proporcione a los espectadores con conexiones lentas la opción de ver una versión más comprimida del archivo. Puede hacer esto de forma dinámica con protocolos de transmisión de velocidad de bits adaptables.
  • No se apodere de la pantalla – los videos deben formar parte del diseño de un sitio web y no deben asumir el control del diseño. Los usuarios deben tener la opción de expandir el video si así lo desean.

Entregue video usando HTML5

Hoy en día es extremadamente común entregar videos en HTML5, lo que le permite mostrar contenido de video a los visitantes de su sitio web sin necesidad de un complemento. Deberá utilizar un formato compatible con HTML5.

Los archivos MP4 son los más populares y son compatibles con todos los navegadores, mientras que Chrome, Firefox y Opera también admiten otros formatos como WebM y Ogg.

A continuación se explica cómo insertar un video HTML5 en una página web, proporcionando dos versiones del archivo, WebM y MP4:

A continuación, se muestran los atributos que puede utilizar como parte del

  • controls

    – define si el botón de reproducción / pausa y el control deslizante de volumen se muestran al usuario

  • autoplay

    – si se establece en verdadero, el video comenzará a reproducirse tan pronto como se haya almacenado en búfer

  • poster

    – imagen de vista previa del video

También puede usar reproductores de video habilitados para HTML5 como Video.js o la Reproductor de video Cloudinary.

Usar CDN

Puedes usar un red de entrega de contenido (CDN) para transmitir contenido de video y ponerlo a disposición de los usuarios al instante. Los usuarios no tienen que esperar a que el video se descargue y se almacene en búfer. Los CDN están integrados en los OVP, pero también puede usar un CDN para los videos que transmite directamente desde sus servidores.

CDN utiliza una variedad de técnicas de almacenamiento en caché para garantizar una entrega rápida de medios. El contenido de video popular se almacena en caché y luego otros usuarios pueden acceder rápidamente a él en la misma ubicación. La infraestructura y la cobertura geográfica proporcionada por la CDN permite a los usuarios acceder al video desde cualquier dispositivo y ubicación, sin afectar la calidad del video o el rendimiento de la página web.

Optimizar el inicio de la transmisión

Al transmitir video, una mejor práctica es comenzar con la transmisión de menor calidad para obtener la velocidad de reproducción más rápida. Para videos largos, se recomienda usar una transmisión de calidad media al principio para ofrecer un resultado más nítido y evitar decepciones a los espectadores.

Al solicitar una transmisión de video, el servidor proporciona un archivo de manifiesto para que el reproductor pueda enumerar todas las transmisiones disponibles (incluida la información de tamaño y velocidad de bits). En la transmisión HLS, el reproductor generalmente comienza a reproducir seleccionando la primera transmisión de la lista.

Puede aprovechar esto optimizando la primera transmisión colocada en el archivo de manifiesto, asegurándose de que se ejecute de manera óptima para el dispositivo relevante. Debe proporcionar archivos de manifiesto alternativos para dispositivos móviles y de escritorio.

Puede permitir que los usuarios comiencen a transmitir más rápido al proporcionar una transmisión de baja calidad como la primera transmisión en el manifiesto. Más adelante, a medida que el reproductor del lado del cliente comprenda mejor el rendimiento disponible, descargará clips adicionales y podrá actualizar a una transmisión de mayor calidad. Esto significa que el usuario verá inicialmente el video con algo de pixelación y luego se volverá más nítido. Esto puede evitar un retraso de 5 a 20 segundos que puede ocurrir en muchos escenarios de transmisión.

Conclusión

En este artículo, cubrí algunos formatos de video que pueden brindar una buena experiencia para sitios web y aplicaciones web, incluidos formatos progresivos como H264 / AVC, H265 / HEVC y protocolos de transmisión de velocidad de bits como HLS y MPEG-DASH.

Además, proporcioné algunos consejos y trucos para mejorar el rendimiento y la experiencia del usuario de los videos en su sitio:

  • Asegúrese de que los videos estén optimizados para dispositivos móviles y evite interrumpir a los usuarios
  • Entregue video usando HTML5 para eliminar la necesidad de complementos y problemas de compatibilidad
  • Utilice CDN para mejorar el rendimiento y reducir la carga en los servidores web
  • Para formatos de transmisión de velocidad de bits, optimice el inicio de transmisión para garantizar que los videos comiencen más rápido

Espero que esto le ayude a mejorar la entrega de archivos multimedia enriquecidos a sus usuarios, mejorar el tiempo de carga de la página y crear una mejor experiencia de usuario.

Etiquetas

Únete a Hacker Noon

Crea tu cuenta gratuita para desbloquear tu experiencia de lectura personalizada.

  • Add Your Comment