Búsqueda de sitios web

javascript - Usar MUX Player (Video) en Angular 14/15

Mux es un servicio de API de video que tiene su propio reproductor: MUX Player

Quiero usar este paquete npm en Angular 14/15 importándolo solo en un componente específico. El js solo debe cargarse cuando se cargue este componente.

Importar

Los dos métodos de usar el servicio son:

  1. vía una importación directa <script src="https://unpkg.com/@mux/mux-player"></script> en el HTML (lo cual puedo hacer en el archivo index.html de Angular). Sin embargo, esto significa que el script se carga para todos, lo cual no es lo que quiero.
  2. Paquete npm @mux/mux-player

Uso

Agrega el código al HTML de un componente donde se haya importado el script o paquete npm.

<mux-player
stream-type="on-demand"
playback-id="FuJSYrK0014ec2LPnm11bzC2MAySAQPqA"
metadata-video-title="Tea and Cookies"
metadata-user-id="user-24601"
/>

Asegurándose también de incluir schemas: [CUSTOM_ELEMENTS_SCHEMA] en el módulo (o componente independiente).

Problema

Angular puede ser un poco extraño con los paquetes sin tipar. Creo que este paquete usa TypeScript, pero en cualquier caso, importar el paquete de npm me da muchos errores. Esencialmente, no se está cargando porque Angular lo elimina mediante tree-shaking cuando no estoy usando la clase importada en los archivos ts de los componentes. Esto significa que al cargar, veo: No se puede encontrar el módulo '../../../types/mux' o sus declaraciones de tipo correspondientes y La propiedad 'error' en el tipo 'MuxVideoElement' no es asignable a la misma propiedad en el tipo base 'CustomVideoElement<HTMLVideoElement>'. Al tipo 'MediaError' le faltan las siguientes propiedades del tipo 'MediaError': MEDIA_ERR_ABORTED, MEDIA_ERR_DECODE, MEDIA_ERR_NETWORK, MEDIA_ERR_SRC_NOT_SUPPORTED

Lo que he intentado

  1. Para confirmar que la importación de <script> y el código HTML funcionan juntos, importé el script en el index.html, y esto eliminó todos los errores y el reproductor se cargó bien.

  2. He intentado importar el paquete npm import MuxPlayerElement from "@mux/mux-player";, y añadí declare module "@mux/mux-player"; al typings.d.ts.

  3. Importa el paquete en el componente y trató de declarar la referencia de plantilla @ViewChild como un MuxPlayerElement, para evitar cualquier tree-shaking.

Hay una demostración de Angular donde dice "¿Este reproductor? Es un libro abierto." en https://www.mux.com/player, sin embargo, esto da como resultado el error Only void and foreign elements can be self closed "mux-player". La solución fácil para esto es cerrar la etiqueta con </mux-player> en lugar de .../>

Respuesta #1

¡Actualización!

Mux abordó el soporte para Angular en 1.9.0

https://docs.mux.com/guides/player/releases#190

Instrucciones de uso:

  1. npm install @mux/mux-player
  2. agrega schemas: [CUSTOM_ELEMENTS_SCHEMA] al módulo (o componente independiente)
  3. agrega import "@mux/mux-player" a las importaciones del componente de destino
  4. Usa según lo documentado <mux-player ...></mux-player>

🎉