Hay varias formas de agregar contenido multimedia a una página web. Anteriormente, aprendiste a usar la etiqueta <video> estándar. En este artículo, obtendrás información 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 de contenido multimedia son de propiedad y de código abierto, y, en su núcleo, hay 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. Quizás 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, profundicemos un poco.
Beneficios de usar un framework
En la mayoría de las situaciones que exceden las necesidades de una página web básica, querrás usar un marco de trabajo de medios para entregar tu contenido. A menos que estés preparado para desarrollar y mantener un conjunto completo de funciones, como la reproducción sin conexión, la transmisión, las estadísticas, la función pantalla en pantalla, las miniaturas de vista previa, la incorporación y la monetización, como la optimización de la tasa de relleno, la programación de anuncios o la licitación de encabezado, por nombrar solo algunas, probablemente deberías transferir esa complejidad a una solución existente.
Aquí es donde entran en juego los frameworks de medios. Te proporcionan un conjunto de funciones y condiciones en las que puedes usarlas y, luego, debes decidir qué framework es el adecuado para tu proyecto. En el siguiente artículo, analizaremos cómo compilamos una AWP con transmisión sin conexión que implementa varias funciones complejas. Fue un gran trabajo y aún está lejos de ser una solución lista para la producción. Ahórrate el dolor de cabeza y utiliza un marco de trabajo.
Hay muchas opciones para elegir. Por ahora, este artículo se centrará en tres: Shaka Player, JW Player y Video.js.
Reproductor de shaka
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 de la Web abierta Extensiones de MediaSource y Extensiones de medios encriptados.
Shaka Player también admite el almacenamiento y la reproducción sin conexión de contenido multimedia con IndexedDB. El contenido se puede almacenar en cualquier navegador. El almacenamiento de las licencias depende de la compatibilidad del navegador.
Encontrarás instrucciones sobre el uso básico en el sitio de documentación de Shaka Player. Sin embargo, en pocas palabras, para utilizar Shaka Player, primero debes crear una página HTML con un elemento de video o audio. Luego, instala los polyfills en el código JavaScript de la aplicación y comprueba 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. A partir de ahí, Shaka Player se hará cargo.
Con Shaka, tendrás que alojar y codificar por tu cuenta tus archivos multimedia. Crear un servidor multimedia no es demasiado complejo; sin embargo, la codificación o transcodificación de medios puede llevar mucho tiempo y ser complicado. Se recomienda que descargues esta parte a un servicio como Zencoder, Amazon Elastic Encoder o la API de Google Transcoder para automatizar las tareas repetitivas y acelerar el proceso.
Lo mejor de Shaka Player es que también existe una herramienta fantástica y un SDK de empaquetado de contenido multimedia para el empaquetado y la encriptación DASH y HLS, llamado Shaka Packager. Puede preparar y empaquetar contenido multimedia para la transmisión en línea, que aprendiste antes en Conversión de medios y Encriptación de medios.
Reproductor JW
Si buscas una opción que proporcione servicios de hosting y de codificación o transcodificación, puedes consultar JW Player, pero ten en cuenta que JW Player es un software propietario. Es decir, no tienes mucho control sobre la plataforma o la hoja de ruta. Existe una versión básica y gratuita, en la que los videos se muestran con una marca de agua, así como una versión comercial.
JW Player admite la transmisión con MPEG-DASH (solo versión pagada), administración de derechos digitales (DRM) (con Vualto), anuncios interactivos, incorporaciones y personalización de la interfaz. Hay una API y un SDK bien documentados. Sin embargo, si solo estás buscando una manera 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 creó desde cero para un mundo de HTML5. Admite video HTML5 y formatos de transmisión modernos, como DASH y HLS, así como YouTube y Vimeo. Es compatible con la reproducción de videos en computadoras y dispositivos móviles, y se ve bien en todas partes con skins basadas en CSS.
Existen varias formas de usar Video.js, pero la más sencilla es utilizar la versión gratuita de CDN que proporciona Fastly. Puedes obtener más información sobre cómo 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 debes alojar y codificar tu video. Sin embargo, una diferencia está en el sistema de complementos, en el que puedes reproducir videos de YouTube en el reproductor Video.js, que también se pueden personalizar.
Otros marcos de trabajo
Hay muchos frameworks y bibliotecas disponibles, en este artículo solo se explora lo que hay disponible. Cuando elijas un framework, debes considerar qué funciones necesitas para el proyecto y cómo planeas alojar, codificar o transcodificar el contenido multimedia. ¿Necesitas anuncios previos al video u otras estrategias de monetización? ¿Tu contenido multimedia estará disponible sin conexión? ¿Qué tan grande o pequeño es tu presupuesto? O muchas otras consideraciones. Investiga y pídeles sugerencias a los miembros de tu red de contactos. Hay decenas de otras opciones excelentes y, antes de tomar cualquier decisión, tómate un tiempo para elegir una que sea adecuada para tu equipo y evitar generar una deuda técnica innecesaria o una complejidad que mantener durante el ciclo de vida del proyecto.
A continuación, aprenderás sobre la AWP con transmisión sin conexión que creamos para demostrar cómo abordar y abordar los desafíos principales relacionados con la implementación de tu propia solución con solo el objeto de video HTML5 sin un framework para controlar el trabajo pesado.