Existen varias formas de agregar contenido multimedia a una página web. Anteriormente, aprendiste a
usar la etiqueta <video> estándar. En este artículo, aprenderás sobre algunos de los frameworks (o bibliotecas) multimedia disponibles que puedes usar para extender o reemplazar el comportamiento del reproductor de video HTML5 predeterminado.
Los frameworks multimedia pueden ser de propiedad privada o de código abierto, y en su núcleo, son un conjunto de APIs que admiten la reproducción de audio o video para varios formatos de contenedor y protocolos de transmisión. Un buen framework tiene una arquitectura modular y proporciona documentación clara y detallada. Idealmente, también debería ser relativamente fácil de configurar y usar. Es posible que te preguntes: “Si el reproductor de video HTML5 ya proporciona la mayoría de las funciones, ¿por qué debería usar un framework o una biblioteca?”. Excelente pregunta, empecemos.
Beneficios de usar un framework
En la mayoría de las situaciones que van más allá de las necesidades de una página web básica, querrás usar un framework de medios para publicar tu contenido. A menos que tengas todo listo para desarrollar y mantener un conjunto de funciones enriquecido, como reproducción sin conexión, transmisión, análisis, imagen en imagen, miniaturas de vista previa, incorporación y monetización, como la optimización de la tasa de relleno, la programación de anuncios o las ofertas de encabezado, entre otras, lo mejor es que transfieras esa complejidad a una solución existente.
Aquí es donde entran en juego los frameworks multimedia. Te proporcionan un conjunto de funciones y condiciones en las que puedes usarlas, y luego debes decidir cuál es el framework adecuado para tu proyecto. En el siguiente artículo, hablaremos cómo compilamos una PWA con transmisión sin conexión que implementa varias funciones complejas. Spoiler alert, fue mucho trabajo y aún está lejos de ser una solución lista para producción. Evita el dolor de cabeza y usa un framework.
Hay muchas opciones para elegir. Por ahora, este artículo se enfocará en tres: Shaka Player, JW Player y Video.js.
Shaka Player
Según la documentación, Shaka Player de Google es una biblioteca de JavaScript de código abierto para contenido multimedia adaptable. Reproduce formatos multimedia adaptables (como DASH y HLS) en un navegador, sin usar complementos. En su lugar, Shaka Player usa los estándares web abiertos MediaSource Extensions y Encrypted Media Extensions.
Shaka Player también admite la reproducción y el almacenamiento sin conexión de contenido multimedia con IndexedDB. El contenido se puede almacenar en cualquier navegador. El almacenamiento de licencias depende de la compatibilidad del navegador.
En el sitio de documentación de Shaka Player, encontrarás instrucciones para el uso básico. Sin embargo, en pocas palabras, para usar Shaka Player, primero debes crear una página HTML con un elemento de audio o video. Luego, en el código JavaScript de tu aplicación, instala los polyfills y verifica la compatibilidad con el navegador. Una vez que el navegador confirme la compatibilidad con Shaka Player, una secuencia de comandos creará un objeto Player para unir el elemento multimedia, detectar errores y, luego, cargar un archivo de manifiesto. Shaka Player se encargará de todo.
Con Shaka, deberás alojar y codificar tus archivos multimedia por tu cuenta. Crear un servidor de contenido multimedia no es demasiado complejo, pero la codificación o transcodificación de contenido multimedia puede ser complicada y llevar mucho tiempo. Es probable que desees transferir esta parte a un servicio como Zencoder, Amazon Elastic Encoder o la API de Google Transcoder para automatizar tareas repetitivas y acelerar el proceso.
Lo mejor de Shaka Player es que también hay una herramienta fantástica y un SDK de empaquetado de contenido multimedia para el empaquetado y la encriptación de DASH y HLS llamado Shaka Packager. Puede preparar y empaquetar contenido multimedia para la transmisión en línea, como aprendiste antes en Conversión de contenido multimedia y Encriptación de contenido multimedia.
JW Player
Si buscas una opción que proporcione servicios de alojamiento y codificación o transcodificación, puedes consultar JW Player, pero ten en cuenta que es un software propietario. Es decir, no tienes mucho control sobre la plataforma ni sobre el plan de trabajo. Hay una versión básica gratuita en la que los videos se muestran con una marca de agua y una versión comercial.
JW Player admite la transmisión con MPEG-DASH (solo la versión pagada), la administración de derechos digitales (DRM) (con Vualto), los anuncios interactivos, la personalización de la interfaz y las incorporaciones. Hay una API y un SDK bien documentados. Sin embargo, si solo buscas una forma rápida y gratuita de alojar tu contenido multimedia, la incorporación de videos de YouTube suele ser la mejor opción gratuita.
Video.js
Según su sitio web, Video.js se compila desde cero para un mundo HTML5. Admite videos HTML5 y formatos de transmisión modernos, como DASH y HLS, así como YouTube y Vimeo. Admite la reproducción de video en computadoras y dispositivos móviles, y se ve bien en todas partes con temas basados en CSS.
Existen varias formas de usar Video.js, pero la más fácil es usar la versión gratuita de la CDN que proporciona Fastly. Obtén más información para configurar el reproductor en la página de introducción. Video.js es un reproductor de video muy potente y, al igual que Shaka Player, también deberás alojar y codificar tu video. Sin embargo, una diferencia se encuentra en el sistema de complementos, en el que puedes realizar acciones como reproducir videos de YouTube en el reproductor Video.js, que también se puede personalizar.
Otros frameworks
Hay muchos frameworks y bibliotecas diferentes disponibles, y este artículo solo toca la superficie de lo que existe. Cuando elijas un framework, debes tener en cuenta las funciones que necesitas para el proyecto y cómo planeas alojar y codificar o transcodificar tu contenido multimedia. ¿Necesitas anuncios previos al video o alguna otra estrategia de monetización? ¿Tu contenido multimedia estará disponible sin conexión? ¿De qué tamaño es tu presupuesto? O cualquier otra consideración. Investiga y pide sugerencias a las personas de tu red. Existen docenas de otras opciones geniales, y antes de tomar una decisión, tómate un tiempo para elegir una que sea adecuada para tu equipo y evita crear una deuda técnica o una complejidad innecesarias que debas mantener durante el ciclo de vida del proyecto.
A continuación, aprenderás sobre la PWA con transmisión sin conexión que compilamos para demostrar cómo abordar y resolver los principales desafíos que surgen cuando lanzas tu propia solución con solo el objeto de video HTML5 sin un framework para manejar las tareas pesadas.