Entrega de Videos de Alta Calidad en Tu Sitio Web de ReactJS

Soy Raul, uno de los cofundadores de ImageKit. Volé desde India ayer, y estaba viendo un video de noticias en mi teléfono ayer. Y como estoy en roaming internacional, obviamente tomó mucho tiempo para cargar ese video y cargarlo. Y sabía que por cada segundo de ese video que estoy cargando, voy a recibir una gran factura cuando regrese a mi país. Así que esta charla que tengo se vuelve aún más relevante ahora mismo donde hablaré sobre cómo optimizar videos si estás trabajando en una experiencia realmente intensiva en videos en una aplicación React, o podría ser cualquier otra plataforma también. ¿Cómo optimizas y transmites videos correctamente y de manera nativa dentro de tu aplicación?

Ahora bien, este no es un video real. Es solo un GIF. Habría sido muy embarazoso si hubiera incrustado un video y no se hubiera reproducido durante la charla. Pero como usuarios, todos hemos visto algo como esto. Comienzas a reproducir un video, y simplemente sigue cargando. Y es realmente frustrante, ¿verdad? No es una gran experiencia para tus usuarios o visitantes de tu aplicación experimentar esto. Y como desarrolladores, necesitamos encontrar formas en las que podamos optimizar un MP4 o MOV realmente grande que está almacenado en tu nube.

¿Y cómo entregas eso correctamente en tu aplicación React, verdad? La transmisión de video es compleja, ¿verdad? No es fácil. Hay múltiples resoluciones. Hay códecs, tasas de bits. Tienes que lidiar con audio, video, subtítulos. Tienes que almacenar estos fragmentos en algún lugar. Luego tienes que configurar un CDN para entregarlo, ¿verdad? Así que es realmente complejo. En nuestra experiencia, lo que hemos visto, muchos desarrolladores simplemente omiten la parte de optimización. Simplemente entregan ese video de alta calidad directamente a sus usuarios. O tal vez crearán una variante de ese video y simplemente entregarán esa única variante a cada usuario en móvil y escritorio.

O terminarás usando una plataforma como YouTube o Vimeo para alojar tus videos. Mientras que YouTube o Vimeo se encargan de la transmisión de tus videos. Pero terminas con muchos anuncios irrelevantes para los usuarios, lo cual no es genial para la experiencia del usuario. No puedes personalizar el reproductor o la marca para que coincida con el aspecto y la sensación de tu aplicación.

O terminas duplicando el almacenamiento entre, digamos, tu almacenamiento en la nube en S3 o Google Cloud, y luego tienes un almacenamiento duplicado que existe en Vimeo, por ejemplo. Una mejor solución es usar el ImageKit Video API, que no es más que una optimización de video en tiempo real, transmisión y transformación basada en URL muy simple que puede funcionar muy fácilmente con tu infraestructura e integrarse con tu código muy rápidamente. Te mostraré cómo funciona esto.

Así que puedes seguir subiendo todo tu contenido, ya sean imágenes, videos, etcétera, en tu almacenamiento en la nube. Probablemente ya estés haciendo eso ahora mismo. Así que puedes seguir subiendo todos tus activos en un almacenamiento en la nube de la manera en que lo has estado haciendo hasta ahora.

Podría ser cualquier almacenamiento en la nube popular. {{^}}Podría ser un servidor web. {{^}}Podría ser privado. No importa. Simplemente sigue subiendo tus activos donde los estés subiendo.

Y luego simplemente conectas ese almacenamiento a ImageKit. Cuando digo conectar, es simplemente conectarlo como un origen a un CDN. Realmente no vamos a extraer los activos de tu bucket.

Es solo una conexión que existe que permitirá a ImageKit extraer el activo en tiempo real cuando accedas a algo a través de ImageKit. Ahora, en este ejemplo, he usado el componente de video en nuestro SDK de React. Puedes ver que tengo dos parámetros aquí.