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, obtendrás información sobre algunos de los frameworks (o bibliotecas) de contenido multimedia disponibles que puedes usar para ampliar o reemplazar el comportamiento del reproductor de video HTML5 predeterminado.
Los frameworks de contenido multimedia están disponibles tanto en propiedad como en código abierto, y, en esencia, hay un conjunto de APIs que admiten la reproducción de audio o video para varios formatos de contenedores y protocolos de transmisión. Un buen framework tiene una arquitectura modular y proporciona documentación clara y detallada. Lo ideal sería que también fuera relativamente fácil de configurar y usar. Puede que te estés preguntando: "Si el reproductor de video HTML5 ya proporciona la mayoría de las funciones, ¿por qué debería usar un framework o una biblioteca?" Es una buena pregunta. Comencemos.
Beneficios de usar un marco de trabajo
En la mayoría de las situaciones que superan las necesidades de una página web básica, te recomendamos usar un framework de medios para entregar tu contenido. A menos que estés preparado para desarrollar y mantener un amplio conjunto 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 las ofertas de encabezado, por nombrar solo algunos), probablemente debas transferir esa complejidad a una solución existente.
Aquí es donde entran en juego los frameworks de los medios. Te proporcionan un conjunto de funciones y condiciones para usarlas y, luego, debes decidir qué framework es 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. Alerta de spoiler: Fue mucho trabajo y aún está lejos de ser una solución lista para la producción. Ahórrate el dolor de cabeza y usa un marco.
Existen muchas opciones para elegir. Por ahora, este artículo nos centraremos en tres: Shaka Player, JW Player y Video.js.
Shaka Player
Según la documentación, el 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 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 licencias depende del navegador.
Encontrarás instrucciones de uso básico en el sitio de documentación de Shaka Player. Sin embargo, en pocas palabras, para usar el reproductor Shaka, primero debes crear una página HTML con un elemento de audio o video. Luego, en el código JavaScript de tu aplicación, instalas los polyfills y verifica la compatibilidad con el navegador. Una vez que el navegador haya confirmado 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 hará cargo a partir de ahí.
Con Shaka, deberás alojar y codificar tus archivos multimedia por tu cuenta. La creación de un servidor multimedia no es demasiado complejo; sin embargo, la codificación y transcodificación de contenido multimedia puede llevar mucho tiempo y ser complicada. Es probable que quieras descargar esta parte en 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 de DASH y HLS llamado Shaka Packager. Puede preparar y empaquetar contenido multimedia para la transmisión en línea, que aprendiste con anterioridad en Conversión de contenido multimedia y Encriptación de medios.
Reproductor JW
Si buscas una opción que proporcione servicios de hosting y codificación/transcodificación, puedes consultar JW Player, pero ten en cuenta que este es un software de propiedad de Google. Es decir, no tienes mucho control sobre la plataforma o la hoja de ruta. Hay una versión gratuita básica 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 versión pagada), administración de derechos digitales (DRM) (con Vualto), publicidad interactiva, inserciones y personalización de la interfaz. Hay una API y un SDK bien documentados. Sin embargo, si solo buscas una forma rápida y gratuita de alojar tu contenido multimedia, incorporar videos de YouTube suele ser la mejor opción sin costo.
Video.js
Según su sitio web, Video.js se crea desde cero para un entorno HTML5. Es compatible con video HTML5 y formatos modernos de transmisión, como DASH y HLS, además de YouTube y Vimeo. Es compatible con la reproducción de videos en computadoras de escritorio y dispositivos móviles, y se ve bien en todas partes con máscaras basadas en CSS.
Existen varias formas de usar Video.js, pero la más fácil es usar la versión gratuita de CDN que proporciona Fastly. Puedes obtener más información para configurar el reproductor en la página de primeros pasos. Video.js es un reproductor de video muy potente y, al igual que Shaka Player, necesitas alojar y codificar tu video. Sin embargo, una diferencia es el sistema de complementos, en el que puedes hacer acciones como reproducir videos de YouTube en el reproductor Video.js, que también se puede personalizar.
Otros marcos de trabajo
Hay muchos frameworks y bibliotecas diferentes disponibles. En este artículo, solo se muestra lo que existe. Cuando elijas un framework, debes considerar qué características necesitas para el proyecto y cómo planeas alojar, 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? ¿Qué tan grande o pequeño es tu presupuesto? O cualquier otra cantidad de consideraciones. Investiga y pide sugerencias a las personas de tu red. Hay muchas 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 deuda técnica innecesaria o complejidad para 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 principales desafíos que conlleva implementar tu propia solución usando solo el objeto de video HTML5 sin un framework para manejar el trabajo pesado.